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
|
import { shallowMount } from '@vue/test-utils';
import { GlBanner, GlButton } from '@gitlab/ui';
import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
import { setCookie, parseBoolean } from '~/lib/utils/common_utils';
import InviteMembersBanner from '~/groups/components/invite_members_banner.vue';
jest.mock('~/lib/utils/common_utils');
const isDismissedKey = 'invite_99_1';
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 svgPath = '/illustrations/background';
const inviteMembersPath = 'groups/members';
const buttonText = 'Invite your colleagues';
const trackLabel = 'invite_members_banner';
const createComponent = (stubs = {}) => {
return shallowMount(InviteMembersBanner, {
provide: {
svgPath,
inviteMembersPath,
isDismissedKey,
trackLabel,
},
stubs,
});
};
describe('InviteMembersBanner', () => {
let wrapper;
let trackingSpy;
beforeEach(() => {
document.body.dataset.page = 'any:page';
trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
unmockTracking();
});
describe('tracking', () => {
beforeEach(() => {
wrapper = createComponent({ GlBanner });
});
const trackCategory = undefined;
const displayEvent = 'invite_members_banner_displayed';
const buttonClickEvent = 'invite_members_banner_button_clicked';
const dismissEvent = 'invite_members_banner_dismissed';
it('sends the displayEvent when the banner is displayed', () => {
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, displayEvent, {
label: trackLabel,
});
});
it('sets the button attributes for the buttonClickEvent', () => {
const button = wrapper.find(`[href='${wrapper.vm.inviteMembersPath}']`);
expect(button.attributes()).toMatchObject({
'data-track-event': buttonClickEvent,
'data-track-label': trackLabel,
});
});
it('sends the dismissEvent when the banner is dismissed', () => {
wrapper.find(GlBanner).vm.$emit('close');
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, dismissEvent, {
label: 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(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);
});
it('uses the href from inviteMembersPath for buttonlink', () => {
expect(findBanner().attributes('buttonlink')).toBe(inviteMembersPath);
});
});
describe('dismissing', () => {
const findButton = () => wrapper.findAll(GlButton).at(1);
beforeEach(() => {
wrapper = createComponent({ GlBanner });
findButton().vm.$emit('click');
});
it('sets iDismissed to true', () => {
expect(wrapper.vm.isDismissed).toBe(true);
});
it('sets the cookie with the isDismissedKey', () => {
expect(setCookie).toHaveBeenCalledWith(isDismissedKey, true);
});
});
describe('when a dismiss cookie exists', () => {
beforeEach(() => {
parseBoolean.mockReturnValue(true);
wrapper = createComponent({ GlBanner });
});
it('sets isDismissed to true', () => {
expect(wrapper.vm.isDismissed).toBe(true);
});
it('does not render the banner', () => {
expect(wrapper.find(GlBanner).exists()).toBe(false);
});
});
});
|
