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

import { it, describe, expect } from 'vitest'
import { selectWithProps } from '@tests/helpers.js'
import { shallowMount } from '@vue/test-utils'
import vSelect from '@/components/Select.vue'

describe('Asynchronous Loading', () => {
  it('can toggle the loading class', () => {
    const Select = selectWithProps()

    Select.vm.toggleLoading()
    expect(Select.vm.mutableLoading).toEqual(true)

    Select.vm.toggleLoading(true)
    expect(Select.vm.mutableLoading).toEqual(true)
  })

  it('should trigger the search event when the search text changes', async () => {
    const Select = selectWithProps()

    Select.vm.search = 'foo'
    await Select.vm.$nextTick()

    const events = Select.emitted('search')

    expect(events).toContainEqual(['foo', Select.vm.toggleLoading])
    expect(events.length).toEqual(1)
  })

  it('should trigger the search event if the search text is empty', async () => {
    const Select = selectWithProps()

    Select.vm.search = 'foo'
    await Select.vm.$nextTick()
    Select.vm.search = ''
    await Select.vm.$nextTick()

    const events = Select.emitted('search')

    expect(events).toContainEqual(['', Select.vm.toggleLoading])
    expect(events.length).toEqual(2)
  })

  it('can set loading to false from the @search event callback', async () => {
    const Select = shallowMount(vSelect, {
      props: {
        onSearch: (search, loading) => {
          loading(false)
        },
      },
    })

    Select.vm.mutableLoading = true
    Select.vm.search = 'foo'
    await Select.vm.$nextTick()

    expect(Select.vm.mutableLoading).toEqual(false)
  })

  it('will sync mutable loading with the loading prop', async () => {
    const Select = selectWithProps({ loading: false })
    Select.setProps({ loading: true })
    await Select.vm.$nextTick()

    expect(Select.vm.mutableLoading).toEqual(true)
  })
})