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
|
import { shallowMount } from '@vue/test-utils';
import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue';
import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
import * as utils from '~/lib/utils/common_utils';
import { GlButton } from '@gitlab/ui';
jest.mock('~/lib/utils/common_utils', () => ({
...jest.requireActual('~/lib/utils/common_utils'),
scrollToElement: jest.fn(),
}));
const target = 'gitlab-ci-yml-selector';
const dismissKey = '99';
const defaultTrackLabel = 'suggest_gitlab_ci_yml';
const commitTrackLabel = 'suggest_commit_first_project_gitlab_ci_yml';
const dismissCookie = 'suggest_gitlab_ci_yml_99';
const humanAccess = 'owner';
describe('Suggest gitlab-ci.yml Popover', () => {
let wrapper;
function createWrapper(trackLabel) {
wrapper = shallowMount(Popover, {
propsData: {
target,
trackLabel,
dismissKey,
humanAccess,
},
stubs: {
GlButton,
GlIcon
}
slots: {
title: '<gl-button><gl-icon /> </gl-button>',
}
});
}
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('when no dismiss cookie is set', () => {
beforeEach(() => {
createWrapper(defaultTrackLabel);
});
it('sets popoverDismissed to false', () => {
expect(wrapper.vm.popoverDismissed).toEqual(false);
});
});
describe('when the dismiss cookie is set', () => {
beforeEach(() => {
utils.setCookie(dismissCookie, true);
createWrapper(defaultTrackLabel);
});
it('sets popoverDismissed to true', () => {
expect(wrapper.vm.popoverDismissed).toEqual(true);
});
afterEach(() => {
utils.removeCookie(dismissCookie);
});
});
describe('tracking', () => {
let trackingSpy;
beforeEach(() => {
createWrapper(commitTrackLabel);
trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
});
afterEach(() => {
unmockTracking();
});
it('sends a tracking event with the expected properties for the popover being viewed', () => {
const expectedCategory = undefined;
const expectedAction = undefined;
const expectedLabel = 'suggest_commit_first_project_gitlab_ci_yml';
const expectedProperty = 'owner';
document.body.dataset.page = 'projects:blob:new';
wrapper.vm.trackOnShow();
expect(trackingSpy).toHaveBeenCalledWith(expectedCategory, expectedAction, {
label: expectedLabel,
property: expectedProperty,
});
});
it('sends a tracking event when the popover is dismissed', () => {
const expectedLabel = commitTrackLabel;
const expectedProperty = 'owner';
const expectedValue = '10';
const dismissButton = wrapper.find(GlButton);
console.log(wrapper.html());
triggerEvent(dismissButton.element);
expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_button', {
label: expectedLabel,
property: expectedProperty,
value: expectedValue,
});
});
});
describe('when the popover is mounted with the trackLabel of the Confirm button popover at the bottom of the page', () => {
it('calls scrollToElement so that the Confirm button and popover will be in sight', () => {
const scrollToElementSpy = jest.spyOn(utils, 'scrollToElement');
createWrapper(commitTrackLabel);
expect(scrollToElementSpy).toHaveBeenCalled();
});
});
});
|
