Skip to content
Snippets Groups Projects

Allow (un)following someone in the user popover

1 file
+ 38
10
Compare changes
  • Side-by-side
  • Inline
import { within } from '@testing-library/dom';
import UsersCache from '~/lib/utils/users_cache';
import initUserPopovers from '~/user_popovers';
import waitForPromises from 'helpers/wait_for_promises';
jest.mock('~/api/user_api', () => ({
followUser: jest.fn().mockResolvedValue({}),
unfollowUser: jest.fn().mockResolvedValue({}),
}));
jest.useFakeTimers();
describe('User Popovers', () => {
const fixtureTemplate = 'merge_requests/merge_request_with_mentions.html';
@@ -22,7 +32,7 @@ describe('User Popovers', () => {
return Array.from(document.querySelectorAll('[data-testid="user-popover"]'));
};
const dummyUser = { name: 'root' };
const dummyUser = { name: 'root', username: 'root', is_followed: false };
const dummyUserStatus = { message: 'active' };
const triggerEvent = (eventName, el) => {
@@ -35,8 +45,6 @@ describe('User Popovers', () => {
el.dispatchEvent(event);
};
let popovers;
beforeEach(() => {
loadFixtures(fixtureTemplate);
@@ -49,11 +57,17 @@ describe('User Popovers', () => {
.mockImplementation((userId) => userStatusCacheSpy(userId));
jest.spyOn(UsersCache, 'updateById');
popovers = initUserPopovers(document.querySelectorAll(selector), (popoverInstance) => {
initUserPopovers(document.querySelectorAll(selector), (popoverInstance) => {
const mountingRoot = document.createElement('div');
document.body.appendChild(mountingRoot);
popoverInstance.$mount(mountingRoot);
});
window.gon = {
features: {
followInUserPopover: true,
},
};
});
describe('shows a placeholder popover on hover', () => {
@@ -140,18 +154,32 @@ describe('User Popovers', () => {
expect(userLink.getAttribute('aria-describedby')).toBe(null);
});
it('updates `user` prop and `UsersCache` when `follow` and `unfollow` events are emitted', () => {
const [firstPopover] = popovers;
it('updates toggle follow button and `UsersCache` when toggle follow button is clicked', async () => {
const userLink = document.querySelector(selector);
triggerEvent('mouseenter', userLink);
jest.runAllTimers();
await waitForPromises();
const [firstPopover] = findPopovers();
const withinFirstPopover = within(firstPopover);
const findFollowButton = () => withinFirstPopover.queryByRole('button', { name: 'Follow' });
const findUnfollowButton = () => withinFirstPopover.queryByRole('button', { name: 'Unfollow' });
const { userId } = document.querySelector(selector).dataset;
firstPopover.$emit('follow');
triggerEvent('click', findFollowButton());
expect(firstPopover.$props.user.isFollowed).toBe(true);
await waitForPromises();
expect(findUnfollowButton()).not.toBe(null);
expect(UsersCache.updateById).toHaveBeenCalledWith(userId, { is_followed: true });
firstPopover.$emit('unfollow');
triggerEvent('click', findUnfollowButton());
await waitForPromises();
expect(firstPopover.$props.user.isFollowed).toBe(false);
expect(findFollowButton()).not.toBe(null);
expect(UsersCache.updateById).toHaveBeenCalledWith(userId, { is_followed: false });
});
});
Loading