diff options
Diffstat (limited to 'spec/frontend/user_popovers_spec.js')
-rw-r--r-- | spec/frontend/user_popovers_spec.js | 218 |
1 files changed, 126 insertions, 92 deletions
diff --git a/spec/frontend/user_popovers_spec.js b/spec/frontend/user_popovers_spec.js index b171c8fc9ed..0530569c9df 100644 --- a/spec/frontend/user_popovers_spec.js +++ b/spec/frontend/user_popovers_spec.js @@ -10,6 +10,8 @@ jest.mock('~/api/user_api', () => ({ })); describe('User Popovers', () => { + let origGon; + const fixtureTemplate = 'merge_requests/merge_request_with_mentions.html'; const selector = '.js-user-link[data-user], .js-user-link[data-user-id]'; @@ -39,7 +41,7 @@ describe('User Popovers', () => { el.dispatchEvent(event); }; - beforeEach(() => { + const setupTestSubject = () => { loadHTMLFixture(fixtureTemplate); const usersCacheSpy = () => Promise.resolve(dummyUser); @@ -56,147 +58,179 @@ describe('User Popovers', () => { document.body.appendChild(mountingRoot); popoverInstance.$mount(mountingRoot); }); + }; + + beforeEach(() => { + origGon = window.gon; + window.gon = {}; }); afterEach(() => { - resetHTMLFixture(); + window.gon = origGon; }); - describe('shows a placeholder popover on hover', () => { - let linksWithUsers; + describe('when signed out', () => { beforeEach(() => { - linksWithUsers = findFixtureLinks(); + setupTestSubject(); + }); + + it('does not show a placeholder popover on hover', () => { + const linksWithUsers = findFixtureLinks(); linksWithUsers.forEach((el) => { triggerEvent('mouseover', el); }); + + expect(findPopovers().length).toBe(0); }); + }); - it('for initial links', () => { - expect(findPopovers().length).toBe(linksWithUsers.length); + describe('when signed in', () => { + beforeEach(() => { + window.gon.current_user_id = 7; + + setupTestSubject(); }); - it('for elements added after initial load', async () => { - const addedLinks = [createUserLink(), createUserLink()]; - addedLinks.forEach((link) => { - document.body.appendChild(link); - }); + afterEach(() => { + resetHTMLFixture(); + }); - jest.runOnlyPendingTimers(); + describe('shows a placeholder popover on hover', () => { + let linksWithUsers; + beforeEach(() => { + linksWithUsers = findFixtureLinks(); + linksWithUsers.forEach((el) => { + triggerEvent('mouseover', el); + }); + }); - addedLinks.forEach((link) => { - triggerEvent('mouseover', link); + it('for initial links', () => { + expect(findPopovers().length).toBe(linksWithUsers.length); }); - expect(findPopovers().length).toBe(linksWithUsers.length + addedLinks.length); + it('for elements added after initial load', async () => { + const addedLinks = [createUserLink(), createUserLink()]; + addedLinks.forEach((link) => { + document.body.appendChild(link); + }); + + jest.runOnlyPendingTimers(); + + addedLinks.forEach((link) => { + triggerEvent('mouseover', link); + }); + + expect(findPopovers().length).toBe(linksWithUsers.length + addedLinks.length); + }); }); - }); - it('does not initialize the popovers for group references', async () => { - const [groupLink] = Array.from(document.querySelectorAll('.js-user-link[data-group]')); + it('does not initialize the popovers for group references', async () => { + const [groupLink] = Array.from(document.querySelectorAll('.js-user-link[data-group]')); - triggerEvent('mouseover', groupLink); - jest.runOnlyPendingTimers(); + triggerEvent('mouseover', groupLink); + jest.runOnlyPendingTimers(); - expect(findPopovers().length).toBe(0); - }); + expect(findPopovers().length).toBe(0); + }); - it('does not initialize the popovers for @all references', async () => { - const [projectLink] = Array.from(document.querySelectorAll('.js-user-link[data-project]')); + it('does not initialize the popovers for @all references', async () => { + const [projectLink] = Array.from(document.querySelectorAll('.js-user-link[data-project]')); - triggerEvent('mouseover', projectLink); - jest.runOnlyPendingTimers(); + triggerEvent('mouseover', projectLink); + jest.runOnlyPendingTimers(); - expect(findPopovers().length).toBe(0); - }); + expect(findPopovers().length).toBe(0); + }); - it('does not initialize the user popovers twice for the same element', async () => { - const [firstUserLink] = findFixtureLinks(); - triggerEvent('mouseover', firstUserLink); - jest.runOnlyPendingTimers(); - triggerEvent('mouseleave', firstUserLink); - jest.runOnlyPendingTimers(); - triggerEvent('mouseover', firstUserLink); - jest.runOnlyPendingTimers(); + it('does not initialize the user popovers twice for the same element', async () => { + const [firstUserLink] = findFixtureLinks(); + triggerEvent('mouseover', firstUserLink); + jest.runOnlyPendingTimers(); + triggerEvent('mouseleave', firstUserLink); + jest.runOnlyPendingTimers(); + triggerEvent('mouseover', firstUserLink); + jest.runOnlyPendingTimers(); - expect(findPopovers().length).toBe(1); - }); + expect(findPopovers().length).toBe(1); + }); - describe('when user link emits mouseenter event with empty user cache', () => { - let userLink; + describe('when user link emits mouseenter event with empty user cache', () => { + let userLink; - beforeEach(() => { - UsersCache.retrieveById.mockReset(); + beforeEach(() => { + UsersCache.retrieveById.mockReset(); - [userLink] = findFixtureLinks(); + [userLink] = findFixtureLinks(); - triggerEvent('mouseover', userLink); - }); + triggerEvent('mouseover', userLink); + }); - it('populates popover with preloaded user data', () => { - const { name, userId, username } = userLink.dataset; + it('populates popover with preloaded user data', () => { + const { name, userId, username } = userLink.dataset; - expect(userLink.user).toEqual( - expect.objectContaining({ - name, - userId, - username, - }), - ); + expect(userLink.user).toEqual( + expect.objectContaining({ + name, + userId, + username, + }), + ); + }); }); - }); - describe('when user link emits mouseenter event', () => { - let userLink; + describe('when user link emits mouseenter event', () => { + let userLink; - beforeEach(() => { - [userLink] = findFixtureLinks(); + beforeEach(() => { + [userLink] = findFixtureLinks(); - triggerEvent('mouseover', userLink); - }); + triggerEvent('mouseover', userLink); + }); - it('removes title attribute from user links', () => { - expect(userLink.getAttribute('title')).toBeFalsy(); - expect(userLink.dataset.originalTitle).toBeFalsy(); - }); + it('removes title attribute from user links', () => { + expect(userLink.getAttribute('title')).toBeFalsy(); + expect(userLink.dataset.originalTitle).toBeFalsy(); + }); - it('fetches user info and status from the user cache', () => { - const { userId } = userLink.dataset; + it('fetches user info and status from the user cache', () => { + const { userId } = userLink.dataset; - expect(UsersCache.retrieveById).toHaveBeenCalledWith(userId); - expect(UsersCache.retrieveStatusById).toHaveBeenCalledWith(userId); - }); + expect(UsersCache.retrieveById).toHaveBeenCalledWith(userId); + expect(UsersCache.retrieveStatusById).toHaveBeenCalledWith(userId); + }); - it('removes aria-describedby attribute from the user link on mouseleave', () => { - userLink.setAttribute('aria-describedby', 'popover'); - triggerEvent('mouseleave', userLink); + it('removes aria-describedby attribute from the user link on mouseleave', () => { + userLink.setAttribute('aria-describedby', 'popover'); + triggerEvent('mouseleave', userLink); - expect(userLink.getAttribute('aria-describedby')).toBe(null); - }); + expect(userLink.getAttribute('aria-describedby')).toBe(null); + }); - it('updates toggle follow button and `UsersCache` when toggle follow button is clicked', async () => { - const [firstPopover] = findPopovers(); - const withinFirstPopover = within(firstPopover); - const findFollowButton = () => withinFirstPopover.queryByRole('button', { name: 'Follow' }); - const findUnfollowButton = () => - withinFirstPopover.queryByRole('button', { name: 'Unfollow' }); + it('updates toggle follow button and `UsersCache` when toggle follow button is clicked', async () => { + const [firstPopover] = findPopovers(); + const withinFirstPopover = within(firstPopover); + const findFollowButton = () => withinFirstPopover.queryByRole('button', { name: 'Follow' }); + const findUnfollowButton = () => + withinFirstPopover.queryByRole('button', { name: 'Unfollow' }); - jest.runOnlyPendingTimers(); + jest.runOnlyPendingTimers(); - const { userId } = document.querySelector(selector).dataset; + const { userId } = document.querySelector(selector).dataset; - triggerEvent('click', findFollowButton()); + triggerEvent('click', findFollowButton()); - await waitForPromises(); + await waitForPromises(); - expect(findUnfollowButton()).not.toBe(null); - expect(UsersCache.updateById).toHaveBeenCalledWith(userId, { is_followed: true }); + expect(findUnfollowButton()).not.toBe(null); + expect(UsersCache.updateById).toHaveBeenCalledWith(userId, { is_followed: true }); - triggerEvent('click', findUnfollowButton()); + triggerEvent('click', findUnfollowButton()); - await waitForPromises(); + await waitForPromises(); - expect(findFollowButton()).not.toBe(null); - expect(UsersCache.updateById).toHaveBeenCalledWith(userId, { is_followed: false }); + expect(findFollowButton()).not.toBe(null); + expect(UsersCache.updateById).toHaveBeenCalledWith(userId, { is_followed: false }); + }); }); }); }); |