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
|
import { escape } from 'lodash';
import { shallowMount } from '@vue/test-utils';
import { GlIcon } from '@gitlab/ui';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { sprintf } from '~/locale';
import ValidationSegment, { i18n } from '~/pipeline_editor/components/info/validation_segment.vue';
import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
import { mockYmlHelpPagePath, mergeUnwrappedCiConfig } from '../../mock_data';
describe('~/pipeline_editor/components/info/validation_segment.vue', () => {
let wrapper;
const createComponent = (props = {}) => {
wrapper = extendedWrapper(
shallowMount(ValidationSegment, {
provide: {
ymlHelpPagePath: mockYmlHelpPagePath,
},
propsData: {
ciConfig: mergeUnwrappedCiConfig(),
loading: false,
...props,
},
}),
);
};
const findIcon = () => wrapper.findComponent(GlIcon);
const findLearnMoreLink = () => wrapper.findByTestId('learnMoreLink');
const findValidationMsg = () => wrapper.findByTestId('validationMsg');
it('shows the loading state', () => {
createComponent({ loading: true });
expect(wrapper.text()).toBe(i18n.loading);
});
describe('when config is valid', () => {
beforeEach(() => {
createComponent({});
});
it('has check icon', () => {
expect(findIcon().props('name')).toBe('check');
});
it('shows a message for valid state', () => {
expect(findValidationMsg().text()).toContain(i18n.valid);
});
it('shows the learn more link', () => {
expect(findLearnMoreLink().attributes('href')).toBe(mockYmlHelpPagePath);
expect(findLearnMoreLink().text()).toBe(i18n.learnMore);
});
});
describe('when config is not valid', () => {
beforeEach(() => {
createComponent({
ciConfig: mergeUnwrappedCiConfig({
status: CI_CONFIG_STATUS_INVALID,
}),
});
});
it('has warning icon', () => {
expect(findIcon().props('name')).toBe('warning-solid');
});
it('has message for invalid state', () => {
expect(findValidationMsg().text()).toBe(i18n.invalid);
});
it('shows an invalid state with an error', () => {
const firstError = 'First Error';
const secondError = 'Second Error';
createComponent({
ciConfig: mergeUnwrappedCiConfig({
status: CI_CONFIG_STATUS_INVALID,
errors: [firstError, secondError],
}),
});
// Test the error is shown _and_ the string matches
expect(findValidationMsg().text()).toContain(firstError);
expect(findValidationMsg().text()).toBe(
sprintf(i18n.invalidWithReason, { reason: firstError }),
);
});
it('shows an invalid state with an error while preventing XSS', () => {
const evilError = '<script>evil();</script>';
createComponent({
ciConfig: mergeUnwrappedCiConfig({
status: CI_CONFIG_STATUS_INVALID,
errors: [evilError],
}),
});
const { innerHTML } = findValidationMsg().element;
expect(innerHTML).not.toContain(evilError);
expect(innerHTML).toContain(escape(evilError));
});
it('shows the learn more link', () => {
expect(findLearnMoreLink().attributes('href')).toBe(mockYmlHelpPagePath);
expect(findLearnMoreLink().text()).toBe('Learn more');
});
});
});
|
