1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
import { GlBanner } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
import InviteMembersBanner from '~/groups/components/invite_members_banner.vue';
import eventHub from '~/invite_members/event_hub';
import axios from '~/lib/utils/axios_utils';
jest.mock('~/lib/utils/common_utils');
const title = 'Collaborate with your team';
const body =
"We noticed that you haven't invited anyone to this group. Invite your colleagues so you can discuss issues, collaborate on merge requests, and share your knowledge";
const buttonText = 'Invite your colleagues';
const provide = {
svgPath: '/illustrations/background',
inviteMembersPath: 'groups/members',
trackLabel: 'invite_members_banner',
calloutsPath: 'call/out/path',
calloutsFeatureId: 'some-feature-id',
groupId: '1',
};
const createComponent = (stubs = {}) => {
return shallowMount(InviteMembersBanner, {
provide,
stubs,
});
};
describe('InviteMembersBanner', () => {
let wrapper;
let trackingSpy;
let mockAxios;
beforeEach(() => {
mockAxios = new MockAdapter(axios);
document.body.dataset.page = 'any:page';
trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
mockAxios.restore();
unmockTracking();
});
describe('tracking', () => {
const mockTrackingOnWrapper = () => {
unmockTracking();
trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
};
beforeEach(() => {
wrapper = createComponent({ GlBanner });
});
const trackCategory = undefined;
const buttonClickEvent = 'invite_members_banner_button_clicked';
it('sends the displayEvent when the banner is displayed', () => {
const displayEvent = 'invite_members_banner_displayed';
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, displayEvent, {
label: provide.trackLabel,
});
});
describe('when the button is clicked', () => {
beforeEach(() => {
jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
wrapper.find(GlBanner).vm.$emit('primary');
});
it('calls openModal through the eventHub', () => {
expect(eventHub.$emit).toHaveBeenCalledWith('openModal', {
inviteeType: 'members',
source: 'invite_members_banner',
});
});
it('sends the buttonClickEvent with correct trackCategory and trackLabel', () => {
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, buttonClickEvent, {
label: provide.trackLabel,
});
});
});
it('sends the dismissEvent when the banner is dismissed', () => {
mockTrackingOnWrapper();
mockAxios.onPost(provide.calloutsPath).replyOnce(200);
const dismissEvent = 'invite_members_banner_dismissed';
wrapper.find(GlBanner).vm.$emit('close');
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, dismissEvent, {
label: provide.trackLabel,
});
});
});
describe('rendering', () => {
const findBanner = () => {
return wrapper.find(GlBanner);
};
beforeEach(() => {
wrapper = createComponent();
});
it('uses the svgPath for the banner svgpath', () => {
expect(findBanner().attributes('svgpath')).toBe(provide.svgPath);
});
it('uses the title from options for title', () => {
expect(findBanner().attributes('title')).toBe(title);
});
it('includes the body text from options', () => {
expect(findBanner().html()).toContain(body);
});
it('uses the button_text text from options for buttontext', () => {
expect(findBanner().attributes('buttontext')).toBe(buttonText);
});
});
describe('dismissing', () => {
beforeEach(() => {
wrapper = createComponent({ GlBanner });
});
it('should render the banner when not dismissed', () => {
expect(wrapper.find(GlBanner).exists()).toBe(true);
});
it('should close the banner when dismiss is clicked', async () => {
mockAxios.onPost(provide.calloutsPath).replyOnce(200);
expect(wrapper.find(GlBanner).exists()).toBe(true);
wrapper.find(GlBanner).vm.$emit('close');
await wrapper.vm.$nextTick();
expect(wrapper.find(GlBanner).exists()).toBe(false);
});
});
});
|
