Skip to content

Commit

Permalink
test: a11y improvement tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamberecz
adamberecz committed Sep 22, 2022
1 parent 6f47d56 commit f6ab54a
Show file tree
Hide file tree
Showing 7 changed files with 444 additions and 54 deletions.
52 changes: 42 additions & 10 deletions tests/unit/composables/useA11y.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,27 +141,59 @@ describe('useA11y', () => {
})
})

describe('ariaOptionLabel', () => {
it('should return option label', () => {
describe('ariaGroupId', () => {
it('should return value', () => {
const select = createSelect({
value: null,
options: [1,2,3],
mode: 'multiple',
value: [1],
groups: true,
options: [
{
label: 'First',
options: [1,2,3]
},
{
label: 'Second',
options: [4,5,6]
},
],
})

expect(select.vm.ariaOptionLabel({
value: 1, label: 1
})).toBe('1')
expect(select.vm.ariaGroupId(select.vm.fg[1])).toBe('multiselect-group-1')
})

it('should return option label with tick if selected', () => {
it('should return value with id', () => {
const select = createSelect({
value: 1,
mode: 'multiple',
value: [1],
groups: true,
options: [
{
label: 'First',
options: [1,2,3]
},
{
label: 'Second',
options: [4,5,6]
},
],
id: 'id'
})

expect(select.vm.ariaGroupId(select.vm.fg[1])).toBe('id-multiselect-group-1')
})
})

describe('ariaOptionLabel', () => {
it('should return option label', () => {
const select = createSelect({
value: null,
options: [1,2,3],
})

expect(select.vm.ariaOptionLabel({
value: 1, label: 1
})).toBe('✓ 1')
})).toBe('1')
})
})

Expand Down
297 changes: 297 additions & 0 deletions tests/unit/composables/useKeyboard.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,221 @@ describe('useKeyboard', () => {
expect(preventMock).toHaveBeenCalled()
})

it('should remove last tag if focused on enter', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [1,2,3],
}, {
attach: true,
})

keydown(select, 'left')
keydown(select, 'enter')

await nextTick()

expect(getValue(select)).toEqual([1,2])

destroy(select)
})

it('should put focus to multiselect when last tag removed on enter', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [1],
}, {
attach: true,
})

keydown(select, 'left')
keydown(select, 'enter')

await nextTick()

expect(getValue(select)).toEqual([])
expect(document.activeElement).toEqual(select.vm.$el)

destroy(select)
})

it('should put focus to input when last tag removed when searchable on enter', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [1],
searchable: true,
}, {
attach: true,
})

keydown(select, 'left')
keydown(select, 'enter')

await nextTick()

expect(getValue(select)).toEqual([])
expect(document.activeElement).toEqual(select.vm.input)

destroy(select)
})

it('should remove middle tag if focused on enter', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [1,2,3],
}, {
attach: true,
})

keydown(select, 'left')
keydown(select, 'left')
keydown(select, 'enter')

await nextTick()

expect(getValue(select)).toEqual([1,3])

destroy(select)
})

it('should remove first tag if focused on enter', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [1,2,3],
}, {
attach: true,
})

keydown(select, 'left')
keydown(select, 'left')
keydown(select, 'left')
keydown(select, 'enter')

await nextTick()

expect(getValue(select)).toEqual([2,3])

destroy(select)
})


it('should select pointer if there are no tags', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [],
}, {
attach: true,
})

select.vm.setPointer(select.vm.getOption(1))

keydown(select, 'left')
keydown(select, 'enter')

await nextTick()

expect(getValue(select)).toEqual([1])

destroy(select)
})

it('should select pointer if right is pressed', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [],
}, {
attach: true,
})

select.vm.setPointer(select.vm.getOption(1))

keydown(select, 'left')
keydown(select, 'enter')

await nextTick()

expect(getValue(select)).toEqual([1])

destroy(select)
})

it('should remove middle tag if navigated with right on enter', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [1,2,3],
}, {
attach: true,
})

keydown(select, 'left')
keydown(select, 'left')
keydown(select, 'left')
keydown(select, 'right')
keydown(select, 'enter')

await nextTick()

expect(getValue(select)).toEqual([1,3])

destroy(select)
})

it('should remove last tag if navigated with right on enter', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [1,2,3],
}, {
attach: true,
})

keydown(select, 'left')
keydown(select, 'left')
keydown(select, 'left')
keydown(select, 'right')
keydown(select, 'right')
keydown(select, 'enter')

await nextTick()

expect(getValue(select)).toEqual([1,2])

destroy(select)
})

it('should not remove anything and select pointer if navigated with right', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [],
}, {
attach: true,
})

select.vm.setPointer(select.vm.getOption(1))

keydown(select, 'left')
keydown(select, 'left')
keydown(select, 'left')
keydown(select, 'right')
keydown(select, 'right')
keydown(select, 'right')
keydown(select, 'enter')

await nextTick()

expect(getValue(select)).toEqual([1])

destroy(select)
})

it('should select pointer', async () => {
let select = createSelect({
value: 1,
Expand Down Expand Up @@ -201,6 +416,7 @@ describe('useKeyboard', () => {
attach: true,
})

select.vm.mouseClicked = true
select.element.focus()
expect(select.vm.isOpen).toBe(true)

Expand Down Expand Up @@ -899,6 +1115,87 @@ describe('useKeyboard', () => {
})
})

describe('left', () => {
it('should stay at the first item when first is selected and left is pressed', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [1],
}, {
attach: true,
})

keydown(select, 'left')
keydown(select, 'left')

await nextTick()

expect(document.activeElement).toEqual(select.vm.$el.querySelector('[data-tags] > *:first-of-type'))

destroy(select)
})
})

describe('right', () => {
it('should focus input when searchable and right is pressed on last element', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [1],
searchable: true,
}, {
attach: true,
})

keydown(select, 'left')
keydown(select, 'right')

await nextTick()

expect(document.activeElement).toEqual(select.vm.input)

destroy(select)
})

it('should focus multiselect when right is pressed on last element', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [1],
}, {
attach: true,
})

keydown(select, 'left')
keydown(select, 'right')

await nextTick()

expect(document.activeElement).toEqual(select.vm.$el)

destroy(select)
})

it('should keep focus on multiselect when right is pressed', async () => {
let select = createSelect({
mode: 'tags',
options: [1,2,3],
value: [1],
}, {
attach: true,
})

select.vm.$el.focus()
keydown(select, 'right')

await nextTick()

expect(document.activeElement).toEqual(select.vm.$el)

destroy(select)
})
})

describe('handleKeyup', () => {
it('should emit keyup event', async () => {
let select = createSelect({
Expand Down
Loading

0 comments on commit f6ab54a

Please sign in to comment.