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
148
149
150
151
152
153
154
155
156
|
import { mount, shallowMount } from '@vue/test-utils';
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper';
import MockAdapter from 'axios-mock-adapter';
import suggestPipelineComponent from '~/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue';
import MrWidgetIcon from '~/vue_merge_request_widget/components/mr_widget_icon.vue';
import dismissibleContainer from '~/vue_shared/components/dismissible_container.vue';
import { suggestProps, iconName } from './pipeline_tour_mock_data';
import axios from '~/lib/utils/axios_utils';
import {
SP_TRACK_LABEL,
SP_LINK_TRACK_EVENT,
SP_SHOW_TRACK_EVENT,
SP_LINK_TRACK_VALUE,
SP_SHOW_TRACK_VALUE,
SP_HELP_URL,
} from '~/vue_merge_request_widget/constants';
describe('MRWidgetSuggestPipeline', () => {
describe('template', () => {
let wrapper;
afterEach(() => {
wrapper.destroy();
});
describe('core functionality', () => {
const findOkBtn = () => wrapper.find('[data-testid="ok"]');
let trackingSpy;
let mockAxios;
const mockTrackingOnWrapper = () => {
unmockTracking();
trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
};
beforeEach(() => {
mockAxios = new MockAdapter(axios);
document.body.dataset.page = 'projects:merge_requests:show';
trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
wrapper = mount(suggestPipelineComponent, {
propsData: suggestProps,
stubs: {
GlSprintf,
},
});
});
afterEach(() => {
unmockTracking();
mockAxios.restore();
});
it('renders add pipeline file link', () => {
const link = wrapper.find(GlLink);
expect(link.exists()).toBe(true);
expect(link.attributes().href).toBe(suggestProps.pipelinePath);
});
it('renders the expected text', () => {
const messageText = /\s*No pipeline\s*Add the .gitlab-ci.yml file\s*to create one./;
expect(wrapper.text()).toMatch(messageText);
});
it('renders widget icon', () => {
const icon = wrapper.find(MrWidgetIcon);
expect(icon.exists()).toBe(true);
expect(icon.props()).toEqual(
expect.objectContaining({
name: iconName,
}),
);
});
it('renders the show me how button', () => {
const button = findOkBtn();
expect(button.exists()).toBe(true);
expect(button.classes('btn-info')).toEqual(true);
expect(button.attributes('href')).toBe(suggestProps.pipelinePath);
});
it('renders the help link', () => {
const link = wrapper.find('[data-testid="help"]');
expect(link.exists()).toBe(true);
expect(link.attributes('href')).toBe(SP_HELP_URL);
});
it('renders the empty pipelines image', () => {
const image = wrapper.find('[data-testid="pipeline-image"]');
expect(image.exists()).toBe(true);
expect(image.attributes().src).toBe(suggestProps.pipelineSvgPath);
});
describe('tracking', () => {
it('send event for basic view of the suggest pipeline widget', () => {
const expectedCategory = undefined;
const expectedAction = undefined;
expect(trackingSpy).toHaveBeenCalledWith(expectedCategory, expectedAction, {
label: SP_TRACK_LABEL,
property: suggestProps.humanAccess,
});
});
it('send an event when add pipeline link is clicked', () => {
mockTrackingOnWrapper();
const link = wrapper.find('[data-testid="add-pipeline-link"]');
triggerEvent(link.element);
expect(trackingSpy).toHaveBeenCalledWith('_category_', SP_LINK_TRACK_EVENT, {
label: SP_TRACK_LABEL,
property: suggestProps.humanAccess,
value: SP_LINK_TRACK_VALUE.toString(),
});
});
it('send an event when ok button is clicked', () => {
mockTrackingOnWrapper();
const okBtn = findOkBtn();
triggerEvent(okBtn.element);
expect(trackingSpy).toHaveBeenCalledWith('_category_', SP_SHOW_TRACK_EVENT, {
label: SP_TRACK_LABEL,
property: suggestProps.humanAccess,
value: SP_SHOW_TRACK_VALUE.toString(),
});
});
});
});
describe('dismissible', () => {
const findDismissContainer = () => wrapper.find(dismissibleContainer);
beforeEach(() => {
wrapper = shallowMount(suggestPipelineComponent, { propsData: suggestProps });
});
it('renders the dismissal container', () => {
expect(findDismissContainer().exists()).toBe(true);
});
it('emits dismiss upon dismissal button click', () => {
findDismissContainer().vm.$emit('dismiss');
expect(wrapper.emitted().dismiss).toBeTruthy();
});
});
});
});
|
