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
|
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
import component from '~/vue_shared/components/registry/persisted_dropdown_selection.vue';
describe('Persisted dropdown selection', () => {
let wrapper;
const defaultProps = {
storageKey: 'foo_bar',
options: [
{ value: 'maven', label: 'Maven' },
{ value: 'gradle', label: 'Gradle' },
],
};
function createComponent({ props = {}, data = {} } = {}) {
wrapper = shallowMount(component, {
propsData: {
...defaultProps,
...props,
},
data() {
return data;
},
});
}
const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
const findDropdown = () => wrapper.findComponent(GlDropdown);
const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
afterEach(() => {
wrapper.destroy();
});
describe('local storage sync', () => {
it('uses the local storage sync component with the correct props', () => {
createComponent();
expect(findLocalStorageSync().props('asString')).toBe(true);
});
it('passes the right props', () => {
createComponent({ data: { selected: 'foo' } });
expect(findLocalStorageSync().props()).toMatchObject({
storageKey: defaultProps.storageKey,
value: 'foo',
});
});
it('on input event updates the model and emits event', async () => {
const inputPayload = 'bar';
createComponent();
findLocalStorageSync().vm.$emit('input', inputPayload);
await nextTick();
expect(wrapper.emitted('change')).toStrictEqual([[inputPayload]]);
expect(findLocalStorageSync().props('value')).toBe(inputPayload);
});
});
describe('dropdown', () => {
it('has a dropdown component', () => {
createComponent();
expect(findDropdown().exists()).toBe(true);
});
describe('dropdown text', () => {
it('when no selection shows the first', () => {
createComponent();
expect(findDropdown().props('text')).toBe('Maven');
});
it('when an option is selected, shows that option label', () => {
createComponent({ data: { selected: defaultProps.options[1].value } });
expect(findDropdown().props('text')).toBe('Gradle');
});
});
describe('dropdown items', () => {
it('has one item for each option', () => {
createComponent();
expect(findDropdownItems()).toHaveLength(defaultProps.options.length);
});
it('binds the correct props', () => {
createComponent({ data: { selected: defaultProps.options[0].value } });
expect(findDropdownItems().at(0).props()).toMatchObject({
isChecked: true,
isCheckItem: true,
});
expect(findDropdownItems().at(1).props()).toMatchObject({
isChecked: false,
isCheckItem: true,
});
});
it('on click updates the data and emits event', async () => {
createComponent({ data: { selected: defaultProps.options[0].value } });
expect(findDropdownItems().at(0).props('isChecked')).toBe(true);
findDropdownItems().at(1).vm.$emit('click');
await nextTick();
expect(wrapper.emitted('change')).toStrictEqual([['gradle']]);
expect(findDropdownItems().at(0).props('isChecked')).toBe(false);
expect(findDropdownItems().at(1).props('isChecked')).toBe(true);
});
});
});
});
|
