debian-mirror-gitlab/spec/frontend/user_popovers_spec.js

100 lines
2.9 KiB
JavaScript
Raw Normal View History

2019-02-15 15:39:39 +05:30
import initUserPopovers from '~/user_popovers';
import UsersCache from '~/lib/utils/users_cache';
describe('User Popovers', () => {
2020-03-13 15:44:24 +05:30
const fixtureTemplate = 'merge_requests/merge_request_with_mentions.html';
2019-02-15 15:39:39 +05:30
preloadFixtures(fixtureTemplate);
2020-03-13 15:44:24 +05:30
const selector = '.js-user-link, .gfm-project_member';
2019-02-15 15:39:39 +05:30
const dummyUser = { name: 'root' };
const dummyUserStatus = { message: 'active' };
2020-03-13 15:44:24 +05:30
let popovers;
2019-02-15 15:39:39 +05:30
const triggerEvent = (eventName, el) => {
2020-03-13 15:44:24 +05:30
const event = new MouseEvent(eventName, {
bubbles: true,
cancelable: true,
view: window,
});
2019-02-15 15:39:39 +05:30
el.dispatchEvent(event);
};
beforeEach(() => {
loadFixtures(fixtureTemplate);
const usersCacheSpy = () => Promise.resolve(dummyUser);
2020-06-23 00:09:42 +05:30
jest.spyOn(UsersCache, 'retrieveById').mockImplementation(userId => usersCacheSpy(userId));
2019-02-15 15:39:39 +05:30
const userStatusCacheSpy = () => Promise.resolve(dummyUserStatus);
2020-06-23 00:09:42 +05:30
jest
.spyOn(UsersCache, 'retrieveStatusById')
.mockImplementation(userId => userStatusCacheSpy(userId));
2019-02-15 15:39:39 +05:30
2020-03-13 15:44:24 +05:30
popovers = initUserPopovers(document.querySelectorAll(selector));
2019-02-15 15:39:39 +05:30
});
2020-03-13 15:44:24 +05:30
it('initializes a popover for each user link with a user id', () => {
const linksWithUsers = Array.from(document.querySelectorAll(selector)).filter(
({ dataset }) => dataset.user || dataset.userId,
);
2019-02-15 15:39:39 +05:30
2020-03-13 15:44:24 +05:30
expect(linksWithUsers.length).toBe(popovers.length);
});
2019-02-15 15:39:39 +05:30
2020-03-13 15:44:24 +05:30
it('does not initialize the user popovers twice for the same element', () => {
const newPopovers = initUserPopovers(document.querySelectorAll(selector));
const samePopovers = popovers.every((popover, index) => newPopovers[index] === popover);
2019-02-15 15:39:39 +05:30
2020-03-13 15:44:24 +05:30
expect(samePopovers).toBe(true);
});
2019-02-15 15:39:39 +05:30
2020-03-13 15:44:24 +05:30
describe('when user link emits mouseenter event', () => {
let userLink;
2019-02-15 15:39:39 +05:30
2020-03-13 15:44:24 +05:30
beforeEach(() => {
2020-06-23 00:09:42 +05:30
UsersCache.retrieveById.mockReset();
2020-03-13 15:44:24 +05:30
userLink = document.querySelector(selector);
2019-02-15 15:39:39 +05:30
2020-03-13 15:44:24 +05:30
triggerEvent('mouseenter', userLink);
});
2019-02-15 15:39:39 +05:30
2020-03-13 15:44:24 +05:30
it('removes title attribute from user links', () => {
expect(userLink.getAttribute('title')).toBeFalsy();
expect(userLink.dataset.originalTitle).toBeFalsy();
});
2019-02-15 15:39:39 +05:30
2020-03-13 15:44:24 +05:30
it('populates popovers with preloaded user data', () => {
const { name, userId, username } = userLink.dataset;
const [firstPopover] = popovers;
expect(firstPopover.$props.user).toEqual(
2020-06-23 00:09:42 +05:30
expect.objectContaining({
2020-03-13 15:44:24 +05:30
name,
userId,
username,
}),
);
});
it('fetches user info and status from the user cache', () => {
const { userId } = userLink.dataset;
2019-02-15 15:39:39 +05:30
2020-03-13 15:44:24 +05:30
expect(UsersCache.retrieveById).toHaveBeenCalledWith(userId);
expect(UsersCache.retrieveStatusById).toHaveBeenCalledWith(userId);
2019-02-15 15:39:39 +05:30
});
});
2020-03-13 15:44:24 +05:30
it('removes aria-describedby attribute from the user link on mouseleave', () => {
const userLink = document.querySelector(selector);
userLink.setAttribute('aria-describedby', 'popover');
triggerEvent('mouseleave', userLink);
expect(userLink.getAttribute('aria-describedby')).toBe(null);
});
2019-02-15 15:39:39 +05:30
});