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
|
import { createLocalVue, shallowMount } from '@vue/test-utils';
import SquashBeforeMerge from '~/vue_merge_request_widget/components/states/squash_before_merge.vue';
import { SQUASH_BEFORE_MERGE } from '~/vue_merge_request_widget/i18n';
const localVue = createLocalVue();
describe('Squash before merge component', () => {
let wrapper;
const createComponent = props => {
wrapper = shallowMount(localVue.extend(SquashBeforeMerge), {
localVue,
propsData: {
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
});
const findLabel = () => wrapper.find('[data-testid="squashLabel"]');
describe('checkbox', () => {
const findCheckbox = () => wrapper.find('.js-squash-checkbox');
it('is unchecked if passed value prop is false', () => {
createComponent({
value: false,
});
expect(findCheckbox().element.checked).toBeFalsy();
});
it('is checked if passed value prop is true', () => {
createComponent({
value: true,
});
expect(findCheckbox().element.checked).toBeTruthy();
});
it('changes value on click', done => {
createComponent({
value: false,
});
findCheckbox().element.checked = true;
findCheckbox().trigger('change');
wrapper.vm.$nextTick(() => {
expect(findCheckbox().element.checked).toBeTruthy();
done();
});
});
it('is disabled if isDisabled prop is true', () => {
createComponent({
value: false,
isDisabled: true,
});
expect(findCheckbox().attributes('disabled')).toBeTruthy();
});
});
describe('label', () => {
describe.each`
isDisabled | expectation
${true} | ${'grays out text if it is true'}
${false} | ${'does not gray out text if it is false'}
`('isDisabled prop', ({ isDisabled, expectation }) => {
beforeEach(() => {
createComponent({
value: false,
isDisabled,
});
});
it(expectation, () => {
expect(findLabel().classes('gl-text-gray-400')).toBe(isDisabled);
});
});
});
describe('tooltip', () => {
const tooltipTitle = () => findLabel().attributes('title');
it('does not render when isDisabled is false', () => {
createComponent({
value: true,
isDisabled: false,
});
expect(tooltipTitle()).toBeUndefined();
});
it('display message when when isDisabled is true', () => {
createComponent({
value: true,
isDisabled: true,
});
expect(tooltipTitle()).toBe(SQUASH_BEFORE_MERGE.tooltipTitle);
});
});
describe('about link', () => {
it('is not rendered if no help path is passed', () => {
createComponent({
value: false,
});
const aboutLink = wrapper.find('a');
expect(aboutLink.exists()).toBeFalsy();
});
it('is rendered if help path is passed', () => {
createComponent({
value: false,
helpPath: 'test-path',
});
const aboutLink = wrapper.find('a');
expect(aboutLink.exists()).toBeTruthy();
});
it('should have a correct help path if passed', () => {
createComponent({
value: false,
helpPath: 'test-path',
});
const aboutLink = wrapper.find('a');
expect(aboutLink.attributes('href')).toEqual('test-path');
});
});
});
|
