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
|
import { GlCollapsibleListbox, GlListboxItem } from '@gitlab/ui';
import { mount } 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 = mount(component, {
propsData: {
...defaultProps,
...props,
},
data() {
return data;
},
});
}
const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
const findGlCollapsibleListbox = () => wrapper.findComponent(GlCollapsibleListbox);
const findGlListboxItems = () => wrapper.findAllComponents(GlListboxItem);
const findGlListboxToggleText = () =>
findGlCollapsibleListbox().find('.gl-new-dropdown-button-text');
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(findGlCollapsibleListbox().exists()).toBe(true);
});
describe('dropdown text', () => {
it('when no selection shows the first', () => {
createComponent();
expect(findGlListboxToggleText().text()).toBe('Maven');
});
it('when an option is selected, shows that option label', async () => {
createComponent();
findGlCollapsibleListbox().vm.$emit('select', defaultProps.options[1].value);
await nextTick();
expect(findGlListboxToggleText().text()).toBe('Gradle');
});
});
describe('dropdown items', () => {
it('has one item for each option', () => {
createComponent();
expect(findGlListboxItems()).toHaveLength(defaultProps.options.length);
});
it('on click updates the data and emits event', async () => {
createComponent();
const selectedItem = 'gradle';
expect(findGlCollapsibleListbox().props('selected')).toBe('maven');
findGlCollapsibleListbox().vm.$emit('select', selectedItem);
await nextTick();
expect(wrapper.emitted('change').at(-1)).toStrictEqual([selectedItem]);
expect(findGlCollapsibleListbox().props('selected')).toBe(selectedItem);
});
});
});
});
|
