diff options
Diffstat (limited to 'spec/frontend/invite_members/components/invite_members_trigger_spec.js')
-rw-r--r-- | spec/frontend/invite_members/components/invite_members_trigger_spec.js | 82 |
1 files changed, 73 insertions, 9 deletions
diff --git a/spec/frontend/invite_members/components/invite_members_trigger_spec.js b/spec/frontend/invite_members/components/invite_members_trigger_spec.js index f362aace1df..b569b6286e0 100644 --- a/spec/frontend/invite_members/components/invite_members_trigger_spec.js +++ b/spec/frontend/invite_members/components/invite_members_trigger_spec.js @@ -1,35 +1,99 @@ -import { GlButton } from '@gitlab/ui'; +import { GlButton, GlLink } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import ExperimentTracking from '~/experimentation/experiment_tracking'; import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue'; +import eventHub from '~/invite_members/event_hub'; + +jest.mock('~/experimentation/experiment_tracking'); const displayText = 'Invite team members'; +let wrapper; +let triggerProps; +let findButton; +const triggerComponent = { + button: GlButton, + anchor: GlLink, +}; const createComponent = (props = {}) => { - return shallowMount(InviteMembersTrigger, { + wrapper = shallowMount(InviteMembersTrigger, { propsData: { displayText, + ...triggerProps, ...props, }, }); }; -describe('InviteMembersTrigger', () => { - let wrapper; +describe.each(['button', 'anchor'])('with triggerElement as %s', (triggerElement) => { + triggerProps = { triggerElement }; + findButton = () => wrapper.findComponent(triggerComponent[triggerElement]); afterEach(() => { wrapper.destroy(); - wrapper = null; }); describe('displayText', () => { - const findButton = () => wrapper.findComponent(GlButton); + it('includes the correct displayText for the button', () => { + createComponent(); + + expect(findButton().text()).toBe(displayText); + }); + }); + + describe('clicking the link', () => { + let spy; beforeEach(() => { - wrapper = createComponent(); + spy = jest.spyOn(eventHub, '$emit'); }); - it('includes the correct displayText for the button', () => { - expect(findButton().text()).toBe(displayText); + it('emits openModal from an unknown source', () => { + createComponent(); + + findButton().vm.$emit('click'); + + expect(spy).toHaveBeenCalledWith('openModal', { inviteeType: 'members', source: 'unknown' }); + }); + + it('emits openModal from a named source', () => { + createComponent({ triggerSource: '_trigger_source_' }); + + findButton().vm.$emit('click'); + + expect(spy).toHaveBeenCalledWith('openModal', { + inviteeType: 'members', + source: '_trigger_source_', + }); + }); + }); + + describe('tracking', () => { + it('tracks on mounting', () => { + createComponent({ trackExperiment: '_track_experiment_' }); + + expect(ExperimentTracking).toHaveBeenCalledWith('_track_experiment_'); + expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith('comment_invite_shown'); + }); + + it('does not track on mounting', () => { + createComponent(); + + expect(ExperimentTracking).not.toHaveBeenCalledWith('_track_experiment_'); + }); + + it('does not add tracking attributes', () => { + createComponent(); + + expect(findButton().attributes('data-track-event')).toBeUndefined(); + expect(findButton().attributes('data-track-label')).toBeUndefined(); + }); + + it('adds tracking attributes', () => { + createComponent({ label: '_label_', event: '_event_' }); + + expect(findButton().attributes('data-track-event')).toBe('_event_'); + expect(findButton().attributes('data-track-label')).toBe('_label_'); }); }); }); |