Skip to content

Commit f6ab54a

Browse files
adambereczadamberecz
committed
test: a11y improvement tests
1 parent 6f47d56 commit f6ab54a

File tree

7 files changed

+444
-54
lines changed

7 files changed

+444
-54
lines changed

‎tests/unit/composables/useA11y.spec.js‎

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -141,27 +141,59 @@ describe('useA11y', () => {
141141
})
142142
})
143143

144-
describe('ariaOptionLabel', () => {
145-
it('should return option label', () => {
144+
describe('ariaGroupId', () => {
145+
it('should return value', () => {
146146
const select = createSelect({
147-
value: null,
148-
options: [1,2,3],
147+
mode: 'multiple',
148+
value: [1],
149+
groups: true,
150+
options: [
151+
{
152+
label: 'First',
153+
options: [1,2,3]
154+
},
155+
{
156+
label: 'Second',
157+
options: [4,5,6]
158+
},
159+
],
149160
})
150161

151-
expect(select.vm.ariaOptionLabel({
152-
value: 1, label: 1
153-
})).toBe('1')
162+
expect(select.vm.ariaGroupId(select.vm.fg[1])).toBe('multiselect-group-1')
154163
})
155164

156-
it('should return option label with tick if selected', () => {
165+
it('should return value with id', () => {
157166
const select = createSelect({
158-
value: 1,
167+
mode: 'multiple',
168+
value: [1],
169+
groups: true,
170+
options: [
171+
{
172+
label: 'First',
173+
options: [1,2,3]
174+
},
175+
{
176+
label: 'Second',
177+
options: [4,5,6]
178+
},
179+
],
180+
id: 'id'
181+
})
182+
183+
expect(select.vm.ariaGroupId(select.vm.fg[1])).toBe('id-multiselect-group-1')
184+
})
185+
})
186+
187+
describe('ariaOptionLabel', () => {
188+
it('should return option label', () => {
189+
const select = createSelect({
190+
value: null,
159191
options: [1,2,3],
160192
})
161193

162194
expect(select.vm.ariaOptionLabel({
163195
value: 1, label: 1
164-
})).toBe('✓ 1')
196+
})).toBe('1')
165197
})
166198
})
167199

‎tests/unit/composables/useKeyboard.spec.js‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,221 @@ describe('useKeyboard', () => {
104104
expect(preventMock).toHaveBeenCalled()
105105
})
106106

107+
it('should remove last tag if focused on enter', async () => {
108+
let select = createSelect({
109+
mode: 'tags',
110+
options: [1,2,3],
111+
value: [1,2,3],
112+
}, {
113+
attach: true,
114+
})
115+
116+
keydown(select, 'left')
117+
keydown(select, 'enter')
118+
119+
await nextTick()
120+
121+
expect(getValue(select)).toEqual([1,2])
122+
123+
destroy(select)
124+
})
125+
126+
it('should put focus to multiselect when last tag removed on enter', async () => {
127+
let select = createSelect({
128+
mode: 'tags',
129+
options: [1,2,3],
130+
value: [1],
131+
}, {
132+
attach: true,
133+
})
134+
135+
keydown(select, 'left')
136+
keydown(select, 'enter')
137+
138+
await nextTick()
139+
140+
expect(getValue(select)).toEqual([])
141+
expect(document.activeElement).toEqual(select.vm.$el)
142+
143+
destroy(select)
144+
})
145+
146+
it('should put focus to input when last tag removed when searchable on enter', async () => {
147+
let select = createSelect({
148+
mode: 'tags',
149+
options: [1,2,3],
150+
value: [1],
151+
searchable: true,
152+
}, {
153+
attach: true,
154+
})
155+
156+
keydown(select, 'left')
157+
keydown(select, 'enter')
158+
159+
await nextTick()
160+
161+
expect(getValue(select)).toEqual([])
162+
expect(document.activeElement).toEqual(select.vm.input)
163+
164+
destroy(select)
165+
})
166+
167+
it('should remove middle tag if focused on enter', async () => {
168+
let select = createSelect({
169+
mode: 'tags',
170+
options: [1,2,3],
171+
value: [1,2,3],
172+
}, {
173+
attach: true,
174+
})
175+
176+
keydown(select, 'left')
177+
keydown(select, 'left')
178+
keydown(select, 'enter')
179+
180+
await nextTick()
181+
182+
expect(getValue(select)).toEqual([1,3])
183+
184+
destroy(select)
185+
})
186+
187+
it('should remove first tag if focused on enter', async () => {
188+
let select = createSelect({
189+
mode: 'tags',
190+
options: [1,2,3],
191+
value: [1,2,3],
192+
}, {
193+
attach: true,
194+
})
195+
196+
keydown(select, 'left')
197+
keydown(select, 'left')
198+
keydown(select, 'left')
199+
keydown(select, 'enter')
200+
201+
await nextTick()
202+
203+
expect(getValue(select)).toEqual([2,3])
204+
205+
destroy(select)
206+
})
207+
208+
209+
it('should select pointer if there are no tags', async () => {
210+
let select = createSelect({
211+
mode: 'tags',
212+
options: [1,2,3],
213+
value: [],
214+
}, {
215+
attach: true,
216+
})
217+
218+
select.vm.setPointer(select.vm.getOption(1))
219+
220+
keydown(select, 'left')
221+
keydown(select, 'enter')
222+
223+
await nextTick()
224+
225+
expect(getValue(select)).toEqual([1])
226+
227+
destroy(select)
228+
})
229+
230+
it('should select pointer if right is pressed', async () => {
231+
let select = createSelect({
232+
mode: 'tags',
233+
options: [1,2,3],
234+
value: [],
235+
}, {
236+
attach: true,
237+
})
238+
239+
select.vm.setPointer(select.vm.getOption(1))
240+
241+
keydown(select, 'left')
242+
keydown(select, 'enter')
243+
244+
await nextTick()
245+
246+
expect(getValue(select)).toEqual([1])
247+
248+
destroy(select)
249+
})
250+
251+
it('should remove middle tag if navigated with right on enter', async () => {
252+
let select = createSelect({
253+
mode: 'tags',
254+
options: [1,2,3],
255+
value: [1,2,3],
256+
}, {
257+
attach: true,
258+
})
259+
260+
keydown(select, 'left')
261+
keydown(select, 'left')
262+
keydown(select, 'left')
263+
keydown(select, 'right')
264+
keydown(select, 'enter')
265+
266+
await nextTick()
267+
268+
expect(getValue(select)).toEqual([1,3])
269+
270+
destroy(select)
271+
})
272+
273+
it('should remove last tag if navigated with right on enter', async () => {
274+
let select = createSelect({
275+
mode: 'tags',
276+
options: [1,2,3],
277+
value: [1,2,3],
278+
}, {
279+
attach: true,
280+
})
281+
282+
keydown(select, 'left')
283+
keydown(select, 'left')
284+
keydown(select, 'left')
285+
keydown(select, 'right')
286+
keydown(select, 'right')
287+
keydown(select, 'enter')
288+
289+
await nextTick()
290+
291+
expect(getValue(select)).toEqual([1,2])
292+
293+
destroy(select)
294+
})
295+
296+
it('should not remove anything and select pointer if navigated with right', async () => {
297+
let select = createSelect({
298+
mode: 'tags',
299+
options: [1,2,3],
300+
value: [],
301+
}, {
302+
attach: true,
303+
})
304+
305+
select.vm.setPointer(select.vm.getOption(1))
306+
307+
keydown(select, 'left')
308+
keydown(select, 'left')
309+
keydown(select, 'left')
310+
keydown(select, 'right')
311+
keydown(select, 'right')
312+
keydown(select, 'right')
313+
keydown(select, 'enter')
314+
315+
await nextTick()
316+
317+
expect(getValue(select)).toEqual([1])
318+
319+
destroy(select)
320+
})
321+
107322
it('should select pointer', async () => {
108323
let select = createSelect({
109324
value: 1,
@@ -201,6 +416,7 @@ describe('useKeyboard', () => {
201416
attach: true,
202417
})
203418

419+
select.vm.mouseClicked = true
204420
select.element.focus()
205421
expect(select.vm.isOpen).toBe(true)
206422

@@ -899,6 +1115,87 @@ describe('useKeyboard', () => {
8991115
})
9001116
})
9011117

1118+
describe('left', () => {
1119+
it('should stay at the first item when first is selected and left is pressed', async () => {
1120+
let select = createSelect({
1121+
mode: 'tags',
1122+
options: [1,2,3],
1123+
value: [1],
1124+
}, {
1125+
attach: true,
1126+
})
1127+
1128+
keydown(select, 'left')
1129+
keydown(select, 'left')
1130+
1131+
await nextTick()
1132+
1133+
expect(document.activeElement).toEqual(select.vm.$el.querySelector('[data-tags] > *:first-of-type'))
1134+
1135+
destroy(select)
1136+
})
1137+
})
1138+
1139+
describe('right', () => {
1140+
it('should focus input when searchable and right is pressed on last element', async () => {
1141+
let select = createSelect({
1142+
mode: 'tags',
1143+
options: [1,2,3],
1144+
value: [1],
1145+
searchable: true,
1146+
}, {
1147+
attach: true,
1148+
})
1149+
1150+
keydown(select, 'left')
1151+
keydown(select, 'right')
1152+
1153+
await nextTick()
1154+
1155+
expect(document.activeElement).toEqual(select.vm.input)
1156+
1157+
destroy(select)
1158+
})
1159+
1160+
it('should focus multiselect when right is pressed on last element', async () => {
1161+
let select = createSelect({
1162+
mode: 'tags',
1163+
options: [1,2,3],
1164+
value: [1],
1165+
}, {
1166+
attach: true,
1167+
})
1168+
1169+
keydown(select, 'left')
1170+
keydown(select, 'right')
1171+
1172+
await nextTick()
1173+
1174+
expect(document.activeElement).toEqual(select.vm.$el)
1175+
1176+
destroy(select)
1177+
})
1178+
1179+
it('should keep focus on multiselect when right is pressed', async () => {
1180+
let select = createSelect({
1181+
mode: 'tags',
1182+
options: [1,2,3],
1183+
value: [1],
1184+
}, {
1185+
attach: true,
1186+
})
1187+
1188+
select.vm.$el.focus()
1189+
keydown(select, 'right')
1190+
1191+
await nextTick()
1192+
1193+
expect(document.activeElement).toEqual(select.vm.$el)
1194+
1195+
destroy(select)
1196+
})
1197+
})
1198+
9021199
describe('handleKeyup', () => {
9031200
it('should emit keyup event', async () => {
9041201
let select = createSelect({

0 commit comments

Comments
 (0)