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
|
import EMPTY_STATE_SVG_URL from '@gitlab/svgs/dist/illustrations/empty-state/empty-pipeline-md.svg?url';
import FILTERED_SVG_URL from '@gitlab/svgs/dist/illustrations/empty-state/empty-search-md.svg?url';
import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
import { mockRegistrationToken, newRunnerPath } from 'jest/ci/runner/mock_data';
import RunnerListEmptyState from '~/ci/runner/components/runner_list_empty_state.vue';
describe('RunnerListEmptyState', () => {
let wrapper;
const findEmptyState = () => wrapper.findComponent(GlEmptyState);
const findLink = () => wrapper.findComponent(GlLink);
const findRunnerInstructionsModal = () => wrapper.findComponent(RunnerInstructionsModal);
const createComponent = ({ props, mountFn = shallowMountExtended, ...options } = {}) => {
wrapper = mountFn(RunnerListEmptyState, {
propsData: {
registrationToken: mockRegistrationToken,
newRunnerPath,
...props,
},
directives: {
GlModal: createMockDirective('gl-modal'),
},
stubs: {
GlEmptyState,
GlSprintf,
GlLink,
},
...options,
});
};
describe('when search is not filtered', () => {
const title = s__('Runners|Get started with runners');
describe('when there is a registration token', () => {
beforeEach(() => {
createComponent();
});
it('renders an illustration', () => {
expect(findEmptyState().props('svgPath')).toBe(EMPTY_STATE_SVG_URL);
});
it('displays "no results" text with instructions', () => {
const desc = s__(
'Runners|Runners are the agents that run your CI/CD jobs. Follow the %{linkStart}installation and registration instructions%{linkEnd} to set up a runner.',
);
expect(findEmptyState().text()).toMatchInterpolatedText(`${title} ${desc}`);
});
describe.each([
{ createRunnerWorkflowForAdmin: true },
{ createRunnerWorkflowForNamespace: true },
])('when %o', (glFeatures) => {
describe('when newRunnerPath is defined', () => {
beforeEach(() => {
createComponent({
provide: {
glFeatures,
},
});
});
it('shows a link to the new runner page', () => {
expect(findLink().attributes('href')).toBe(newRunnerPath);
});
});
describe('when newRunnerPath not defined', () => {
beforeEach(() => {
createComponent({
props: {
newRunnerPath: null,
},
provide: {
glFeatures,
},
});
});
it('opens a runner registration instructions modal with a link', () => {
const { value } = getBinding(findLink().element, 'gl-modal');
expect(findRunnerInstructionsModal().props('modalId')).toEqual(value);
});
});
});
describe.each([
{ createRunnerWorkflowForAdmin: false },
{ createRunnerWorkflowForNamespace: false },
])('when %o', (glFeatures) => {
beforeEach(() => {
createComponent({
provide: {
glFeatures,
},
});
});
it('opens a runner registration instructions modal with a link', () => {
const { value } = getBinding(findLink().element, 'gl-modal');
expect(findRunnerInstructionsModal().props('modalId')).toEqual(value);
});
});
});
describe('when there is no registration token', () => {
beforeEach(() => {
createComponent({ props: { registrationToken: null } });
});
it('renders an illustration', () => {
expect(findEmptyState().props('svgPath')).toBe(EMPTY_STATE_SVG_URL);
});
it('displays "no results" text', () => {
const desc = s__(
'Runners|Runners are the agents that run your CI/CD jobs. To register new runners, please contact your administrator.',
);
expect(findEmptyState().text()).toMatchInterpolatedText(`${title} ${desc}`);
});
it('has no registration instructions link', () => {
expect(findLink().exists()).toBe(false);
});
});
});
describe('when search is filtered', () => {
beforeEach(() => {
createComponent({ props: { isSearchFiltered: true } });
});
it('renders a "filtered search" illustration', () => {
expect(findEmptyState().props('svgPath')).toBe(FILTERED_SVG_URL);
});
it('displays "no filtered results" text', () => {
expect(findEmptyState().text()).toContain(s__('Runners|No results found'));
expect(findEmptyState().text()).toContain(s__('Runners|Edit your search and try again'));
});
});
});
|
