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
|
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DropdownKeyboardNavigation from '~/vue_shared/components/dropdown_keyboard_navigation.vue';
import { UP_KEY_CODE, DOWN_KEY_CODE, TAB_KEY_CODE } from '~/lib/utils/keycodes';
const MOCK_INDEX = 0;
const MOCK_MAX = 10;
const MOCK_MIN = 0;
const MOCK_DEFAULT_INDEX = 0;
describe('DropdownKeyboardNavigation', () => {
let wrapper;
const defaultProps = {
index: MOCK_INDEX,
max: MOCK_MAX,
min: MOCK_MIN,
defaultIndex: MOCK_DEFAULT_INDEX,
};
const createComponent = (props) => {
wrapper = shallowMount(DropdownKeyboardNavigation, {
propsData: {
...defaultProps,
...props,
},
});
};
const helpers = {
arrowDown: () => {
document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: DOWN_KEY_CODE }));
},
arrowUp: () => {
document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: UP_KEY_CODE }));
},
tab: () => {
document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: TAB_KEY_CODE }));
},
};
describe('onInit', () => {
beforeEach(() => {
createComponent();
});
it('should $emit @change with the default index', () => {
expect(wrapper.emitted('change')[0]).toStrictEqual([MOCK_DEFAULT_INDEX]);
});
it('should $emit @change with the default index when max changes', async () => {
wrapper.setProps({ max: 20 });
await nextTick();
// The first @change`call happens on created() so we test for the second [1]
expect(wrapper.emitted('change')[1]).toStrictEqual([MOCK_DEFAULT_INDEX]);
});
});
describe('keydown events', () => {
beforeEach(() => {
createComponent();
});
it('onKeydown-Tab $emits @tab event', () => {
helpers.tab();
expect(wrapper.emitted('tab')).toHaveLength(1);
});
});
describe('increment', () => {
describe('when max is 0', () => {
beforeEach(() => {
createComponent({ max: 0 });
});
it('does not $emit any @change events', () => {
helpers.arrowDown();
// The first @change`call happens on created() so we test that we only have 1 call
expect(wrapper.emitted('change')).toHaveLength(1);
});
});
describe.each`
keyboardAction | direction | index | max | min
${helpers.arrowDown} | ${1} | ${10} | ${10} | ${0}
${helpers.arrowUp} | ${-1} | ${0} | ${10} | ${0}
`('moving out of bounds', ({ keyboardAction, direction, index, max, min }) => {
beforeEach(() => {
createComponent({ index, max, min });
keyboardAction();
});
it(`in ${direction} direction does not $emit any @change events`, () => {
// The first @change`call happens on created() so we test that we only have 1 call
expect(wrapper.emitted('change')).toHaveLength(1);
});
});
describe.each`
keyboardAction | direction | index | max | min
${helpers.arrowDown} | ${1} | ${10} | ${10} | ${0}
${helpers.arrowUp} | ${-1} | ${0} | ${10} | ${0}
`(
'moving out of bounds with cycle enabled',
({ keyboardAction, direction, index, max, min }) => {
beforeEach(() => {
createComponent({ index, max, min, enableCycle: true });
keyboardAction();
});
it(`in ${direction} direction does $emit correct @change event`, () => {
// The first @change`call happens on created() so we test that we only have 1 call
expect(wrapper.emitted('change')[1]).toStrictEqual([direction === 1 ? min : max]);
});
},
);
describe.each`
keyboardAction | direction | index | max | min
${helpers.arrowDown} | ${1} | ${0} | ${10} | ${0}
${helpers.arrowUp} | ${-1} | ${10} | ${10} | ${0}
`('moving in bounds', ({ keyboardAction, direction, index, max, min }) => {
beforeEach(() => {
createComponent({ index, max, min });
keyboardAction();
});
it(`in ${direction} direction $emits @change event with the correct index ${
index + direction
}`, () => {
// The first @change`call happens on created() so we test for the second [1]
expect(wrapper.emitted('change')[1]).toStrictEqual([index + direction]);
});
});
});
});
|
