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
|
import { shallowMount } from '@vue/test-utils';
import { withGonExperiment } from 'helpers/experimentation_helper';
import EmptyState from '~/pipelines/components/pipelines_list/empty_state.vue';
import Tracking from '~/tracking';
describe('Pipelines Empty State', () => {
let wrapper;
const findGetStartedButton = () => wrapper.find('[data-testid="get-started-pipelines"]');
const findInfoText = () => wrapper.find('[data-testid="info-text"]').text();
const createWrapper = () => {
wrapper = shallowMount(EmptyState, {
propsData: {
helpPagePath: 'foo',
emptyStateSvgPath: 'foo',
canSetCi: true,
},
});
};
describe('renders', () => {
beforeEach(() => {
createWrapper();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('should render empty state SVG', () => {
expect(wrapper.find('img').attributes('src')).toBe('foo');
});
it('should render empty state header', () => {
expect(wrapper.find('[data-testid="header-text"]').text()).toBe('Build with confidence');
});
it('should render a link with provided help path', () => {
expect(findGetStartedButton().attributes('href')).toBe('foo');
});
describe('when in control group', () => {
it('should render empty state information', () => {
expect(findInfoText()).toContain(
'Continuous Integration can help catch bugs by running your tests automatically',
'while Continuous Deployment can help you deliver code to your product environment',
);
});
it('should render a button', () => {
expect(findGetStartedButton().text()).toBe('Get started with Pipelines');
});
});
describe('when in experiment group', () => {
withGonExperiment('pipelinesEmptyState');
beforeEach(() => {
createWrapper();
});
it('should render empty state information', () => {
expect(findInfoText()).toContain(
'GitLab CI/CD can automatically build, test, and deploy your code. Let GitLab take care of time',
'consuming tasks, so you can spend more time creating',
);
});
it('should render button text', () => {
expect(findGetStartedButton().text()).toBe('Get started with CI/CD');
});
});
describe('tracking', () => {
let origGon;
describe('when data is set', () => {
beforeEach(() => {
jest.spyOn(Tracking, 'event').mockImplementation(() => {});
origGon = window.gon;
window.gon = {
tracking_data: {
category: 'Growth::Activation::Experiment::PipelinesEmptyState',
value: 1,
property: 'experimental_group',
label: 'label',
},
};
createWrapper();
});
afterEach(() => {
window.gon = origGon;
});
it('tracks when mounted', () => {
expect(Tracking.event).toHaveBeenCalledWith(
'Growth::Activation::Experiment::PipelinesEmptyState',
'viewed',
{
value: 1,
label: 'label',
property: 'experimental_group',
},
);
});
it('tracks when button is clicked', () => {
findGetStartedButton().vm.$emit('click');
expect(Tracking.event).toHaveBeenCalledWith(
'Growth::Activation::Experiment::PipelinesEmptyState',
'documentation_clicked',
{
value: 1,
label: 'label',
property: 'experimental_group',
},
);
});
});
describe('when no data is defined', () => {
beforeEach(() => {
jest.spyOn(Tracking, 'event').mockImplementation(() => {});
createWrapper();
});
it('does not track on view', () => {
expect(Tracking.event).not.toHaveBeenCalled();
});
it('does not track when button is clicked', () => {
findGetStartedButton().vm.$emit('click');
expect(Tracking.event).not.toHaveBeenCalled();
});
});
});
});
});
|
