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
|
import { GlToggle } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import ProjectFeatureSetting from '~/pages/projects/shared/permissions/components/project_feature_setting.vue';
describe('Project Feature Settings', () => {
const defaultProps = {
name: 'Test',
options: [
[1, 1],
[2, 2],
[3, 3],
[4, 4],
[5, 5],
],
value: 1,
disabledInput: false,
showToggle: true,
};
let wrapper;
const findHiddenInput = () => wrapper.find(`input[name=${defaultProps.name}]`);
const findToggle = () => wrapper.findComponent(GlToggle);
const mountComponent = (customProps = {}) =>
shallowMount(ProjectFeatureSetting, {
propsData: {
...defaultProps,
...customProps,
},
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('Hidden name input', () => {
it('should set the hidden name input if the name exists', () => {
wrapper = mountComponent();
expect(findHiddenInput().attributes('value')).toBe('1');
});
it('should not set the hidden name input if the name does not exist', () => {
wrapper = mountComponent({ name: null });
expect(findHiddenInput().exists()).toBe(false);
});
});
describe('Feature toggle', () => {
it('should be hidden if "showToggle" is passed false', () => {
wrapper = mountComponent({ showToggle: false });
expect(findToggle().exists()).toBe(false);
});
it('should enable the feature toggle if the value is not 0', () => {
wrapper = mountComponent();
expect(findToggle().props('value')).toBe(true);
});
it('should enable the feature toggle if the value is less than 0', () => {
wrapper = mountComponent({ value: -1 });
expect(findToggle().props('value')).toBe(true);
});
it('should disable the feature toggle if the value is 0', () => {
wrapper = mountComponent({ value: 0 });
expect(findToggle().props('value')).toBe(false);
});
it('should disable the feature toggle if disabledInput is set', () => {
wrapper = mountComponent({ disabledInput: true });
expect(findToggle().props('disabled')).toBe(true);
});
it('should emit a change event when the feature toggle changes', () => {
wrapper = mountComponent({ propsData: defaultProps });
expect(wrapper.emitted('change')).toBeUndefined();
findToggle().vm.$emit('change', false);
expect(wrapper.emitted('change')).toHaveLength(1);
expect(wrapper.emitted('change')[0]).toEqual([0]);
});
});
describe('Project repo select', () => {
it.each`
disabledInput | value | options | isDisabled
${true} | ${0} | ${[[1, 1]]} | ${true}
${true} | ${1} | ${[[1, 1], [2, 2], [3, 3]]} | ${true}
${false} | ${0} | ${[[1, 1], [2, 2], [3, 3]]} | ${true}
${false} | ${1} | ${[[1, 1]]} | ${true}
${false} | ${1} | ${[[1, 1], [2, 2], [3, 3]]} | ${false}
`(
'should set disabled to $isDisabled when disabledInput is $disabledInput, the value is $value and options are $options',
({ disabledInput, value, options, isDisabled }) => {
wrapper = mountComponent({ disabledInput, value, options });
const expected = isDisabled ? 'disabled' : undefined;
expect(wrapper.find('select').attributes('disabled')).toBe(expected);
},
);
it('should emit the change when a new option is selected', () => {
wrapper = mountComponent();
expect(wrapper.emitted('change')).toBeUndefined();
wrapper.findAll('option').at(1).trigger('change');
expect(wrapper.emitted('change')).toHaveLength(1);
expect(wrapper.emitted('change')[0]).toEqual([2]);
});
});
});
|
