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

import { mount, shallowMount } from '@vue/test-utils'
import VueSelect from '../../src/components/Select'
import { mountDefault } from '../helpers'

describe('Reset on options change', () => {
  it('should not reset the selected value by default when the options property changes', () => {
    const Select = shallowMount(VueSelect, {
      propsData: { options: ['one'] },
    })

    Select.vm.$data._value = 'one'

    Select.setProps({ options: ['four', 'five', 'six'] })
    expect(Select.vm.selectedValue).toEqual(['one'])
  })

  describe('resetOnOptionsChange as a function', () => {
    it('will yell at you if resetOnOptionsChange is not a function or boolean', () => {
      const spy = jest.spyOn(console, 'error').mockImplementation(() => {})

      mountDefault({ resetOnOptionsChange: 1 })
      expect(spy.mock.calls[0][0]).toContain(
        'Invalid prop: custom validator check failed for prop "resetOnOptionsChange"'
      )

      mountDefault({ resetOnOptionsChange: 'one' })
      expect(spy.mock.calls[1][0]).toContain(
        'Invalid prop: custom validator check failed for prop "resetOnOptionsChange"'
      )

      mountDefault({ resetOnOptionsChange: [] })
      expect(spy.mock.calls[2][0]).toContain(
        'Invalid prop: custom validator check failed for prop "resetOnOptionsChange"'
      )

      mountDefault({ resetOnOptionsChange: {} })
      expect(spy.mock.calls[3][0]).toContain(
        'Invalid prop: custom validator check failed for prop "resetOnOptionsChange"'
      )
    })

    it('should receive the new options, old options, and current value', async () => {
      let resetOnOptionsChange = jest.fn((option) => option)
      const Select = mountDefault({
        resetOnOptionsChange,
        options: ['bear'],
        value: 'selected',
      })

      Select.setProps({ options: ['lake', 'kite'] })
      await Select.vm.$nextTick()

      expect(resetOnOptionsChange).toHaveBeenCalledTimes(1)
      expect(resetOnOptionsChange).toHaveBeenCalledWith(
        ['lake', 'kite'],
        ['bear'],
        ['selected']
      )
    })

    it('should allow resetOnOptionsChange to be a function that returns true', async () => {
      let resetOnOptionsChange = () => true
      const Select = shallowMount(VueSelect, {
        propsData: { resetOnOptionsChange, options: ['one'], value: 'one' },
      })
      const spy = jest.spyOn(Select.vm, 'clearSelection')

      Select.setProps({ options: ['one', 'two'] })
      await Select.vm.$nextTick()

      expect(spy).toHaveBeenCalledTimes(1)
    })

    it('should allow resetOnOptionsChange to be a function that returns false', () => {
      let resetOnOptionsChange = () => false
      const Select = shallowMount(VueSelect, {
        propsData: { resetOnOptionsChange, options: ['one'], value: 'one' },
      })
      const spy = jest.spyOn(Select.vm, 'clearSelection')

      Select.setProps({ options: ['one', 'two'] })
      expect(spy).not.toHaveBeenCalled()
    })

    it('should reset the options if the selectedValue does not exist in the new options', async () => {
      let resetOnOptionsChange = (options, old, val) =>
        val.some((val) => options.includes(val))
      const Select = shallowMount(VueSelect, {
        propsData: { resetOnOptionsChange, options: ['one'], value: 'one' },
      })
      const spy = jest.spyOn(Select.vm, 'clearSelection')

      Select.setProps({ options: ['one', 'two'] })
      await Select.vm.$nextTick()

      expect(Select.vm.selectedValue).toEqual(['one'])

      Select.setProps({ options: ['two'] })
      await Select.vm.$nextTick()

      expect(spy).toHaveBeenCalledTimes(1)
    })
  })

  it('should reset the selected value when the options property changes', async () => {
    const Select = shallowMount(VueSelect, {
      propsData: { resetOnOptionsChange: true, options: ['one'] },
    })

    Select.vm.$data._value = 'one'

    Select.setProps({ options: ['four', 'five', 'six'] })
    await Select.vm.$nextTick()

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

  it('should return correct selected value when the options property changes and a new option matches', async () => {
    const Select = shallowMount(VueSelect, {
      propsData: {
        value: 'one',
        options: [],
        reduce(option) {
          return option.value
        },
      },
    })

    Select.setProps({ options: [{ label: 'oneLabel', value: 'one' }] })
    await Select.vm.$nextTick()

    expect(Select.vm.selectedValue).toEqual([
      { label: 'oneLabel', value: 'one' },
    ])
  })

  it('clearSearchOnBlur returns false when multiple is true', () => {
    const Select = mountDefault({})
    let clearSearchOnBlur = jest.spyOn(Select.vm, 'clearSearchOnBlur')
    Select.findComponent({ ref: 'search' }).trigger('click')
    Select.setData({ search: 'one' })
    Select.findComponent({ ref: 'search' }).trigger('blur')

    expect(clearSearchOnBlur).toHaveBeenCalledTimes(1)
    expect(clearSearchOnBlur).toHaveBeenCalledWith({
      clearSearchOnSelect: true,
      multiple: false,
    })
    expect(Select.vm.search).toBe('')
  })

  it('clearSearchOnBlur accepts a function', () => {
    let clearSearchOnBlur = jest.fn(() => false)
    const Select = mountDefault({ clearSearchOnBlur })

    Select.findComponent({ ref: 'search' }).trigger('click')
    Select.setData({ search: 'one' })
    Select.findComponent({ ref: 'search' }).trigger('blur')

    expect(clearSearchOnBlur).toHaveBeenCalledTimes(1)
    expect(Select.vm.search).toBe('one')
  })
})