diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/user_popover/user_popover_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/user_popover/user_popover_spec.js | 39 |
1 files changed, 28 insertions, 11 deletions
diff --git a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js index 9550368eefc..b7ce3e47cef 100644 --- a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js +++ b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js @@ -6,6 +6,7 @@ import UserPopover from '~/vue_shared/components/user_popover/user_popover.vue'; import axios from '~/lib/utils/axios_utils'; import createFlash from '~/flash'; import { followUser, unfollowUser } from '~/api/user_api'; +import { mockTracking } from 'helpers/tracking_helper'; jest.mock('~/flash'); jest.mock('~/api/user_api', () => ({ @@ -51,6 +52,18 @@ describe('User Popover Component', () => { const findUserLocalTime = () => wrapper.findByTestId('user-popover-local-time'); const findToggleFollowButton = () => wrapper.findByTestId('toggle-follow-button'); + const itTracksToggleFollowButtonClick = (expectedLabel) => { + it('tracks click', async () => { + const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); + + await findToggleFollowButton().trigger('click'); + + expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_button', { + label: expectedLabel, + }); + }); + }; + const createWrapper = (props = {}) => { wrapper = mountExtended(UserPopover, { propsData: { @@ -75,7 +88,7 @@ describe('User Popover Component', () => { }, }); - expect(wrapper.find(GlSkeletonLoader).exists()).toBe(true); + expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(true); }); }); @@ -89,7 +102,7 @@ describe('User Popover Component', () => { it('shows icon for location', () => { createWrapper(); - const iconEl = wrapper.find(GlIcon); + const iconEl = wrapper.findComponent(GlIcon); expect(iconEl.props('name')).toEqual('location'); }); @@ -102,8 +115,8 @@ describe('User Popover Component', () => { }); describe('job data', () => { - const findWorkInformation = () => wrapper.find({ ref: 'workInformation' }); - const findBio = () => wrapper.find({ ref: 'bio' }); + const findWorkInformation = () => wrapper.findComponent({ ref: 'workInformation' }); + const findBio = () => wrapper.findComponent({ ref: 'bio' }); const bio = 'My super interesting bio'; it('should show only bio if work information is not available', () => { @@ -159,7 +172,7 @@ describe('User Popover Component', () => { createWrapper({ user }); expect( - wrapper.findAll(GlIcon).filter((icon) => icon.props('name') === 'profile').length, + wrapper.findAllComponents(GlIcon).filter((icon) => icon.props('name') === 'profile').length, ).toEqual(1); }); @@ -172,7 +185,7 @@ describe('User Popover Component', () => { createWrapper({ user }); expect( - wrapper.findAll(GlIcon).filter((icon) => icon.props('name') === 'work').length, + wrapper.findAllComponents(GlIcon).filter((icon) => icon.props('name') === 'work').length, ).toEqual(1); }); }); @@ -338,9 +351,11 @@ describe('User Popover Component', () => { await axios.waitForAll(); expect(wrapper.emitted().follow.length).toBe(1); - expect(wrapper.emitted().unfollow).toBeFalsy(); + expect(wrapper.emitted().unfollow).toBeUndefined(); }); + itTracksToggleFollowButtonClick('follow_from_user_popover'); + describe('when an error occurs', () => { beforeEach(() => { followUser.mockRejectedValue({}); @@ -361,8 +376,8 @@ describe('User Popover Component', () => { it('emits no events', async () => { await axios.waitForAll(); - expect(wrapper.emitted().follow).toBe(undefined); - expect(wrapper.emitted().unfollow).toBe(undefined); + expect(wrapper.emitted().follow).toBeUndefined(); + expect(wrapper.emitted().unfollow).toBeUndefined(); }); }); }); @@ -388,6 +403,8 @@ describe('User Popover Component', () => { expect(wrapper.emitted().unfollow.length).toBe(1); }); + itTracksToggleFollowButtonClick('unfollow_from_user_popover'); + describe('when an error occurs', () => { beforeEach(async () => { unfollowUser.mockRejectedValue({}); @@ -406,8 +423,8 @@ describe('User Popover Component', () => { }); it('emits no events', () => { - expect(wrapper.emitted().follow).toBe(undefined); - expect(wrapper.emitted().unfollow).toBe(undefined); + expect(wrapper.emitted().follow).toBeUndefined(); + expect(wrapper.emitted().unfollow).toBeUndefined(); }); }); }); |