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
|
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 }));
},
};
afterEach(() => {
wrapper.destroy();
});
describe('onInit', () => {
beforeEach(() => {
createComponent();
});
it('should $emit @change with the default index', async () => {
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} | ${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]);
});
});
});
});
|
