vue-select/tests/unit/Selectable.spec.js

import { selectWithProps } from '../helpers'

describe('Selectable prop', () => {
  it('should select selectable option if clicked', async () => {
    const Select = selectWithProps({
      options: ['one', 'two', 'three'],
      selectable: (option) => option === 'one',
    })

    Select.vm.$data.open = true
    await Select.vm.$nextTick()

    Select.find('.vs__dropdown-menu li:first-child').trigger('mousedown')

    await Select.vm.$nextTick()
    expect(Select.vm.selectedValue).toEqual(['one'])
  })

  it('should not select not selectable option if clicked', async () => {
    const Select = selectWithProps({
      options: ['one', 'two', 'three'],
      selectable: (option) => option === 'one',
    })

    Select.vm.$data.open = true
    await Select.vm.$nextTick()

    Select.find('.vs__dropdown-menu li:last-child').trigger('mousedown')
    await Select.vm.$nextTick()

    expect(Select.vm.selectedValue).toEqual([])
  })

  it('should skip non-selectable option on down arrow keyDown', () => {
    const Select = selectWithProps({
      options: ['one', 'two', 'three'],
      selectable: (option) => option !== 'two',
    })

    Select.vm.typeAheadPointer = 1

    Select.find({ ref: 'search' }).trigger('keydown.down')

    expect(Select.vm.typeAheadPointer).toEqual(2)
  })

  it('should skip non-selectable option on up arrow keyDown', () => {
    const Select = selectWithProps({
      options: ['one', 'two', 'three'],
      selectable: (option) => option !== 'two',
    })

    Select.vm.typeAheadPointer = 2

    Select.find({ ref: 'search' }).trigger('keydown.up')

    expect(Select.vm.typeAheadPointer).toEqual(0)
  })
})