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

import { mountDefault } from '../helpers'

describe('Scoped Slots', () => {
  it('receives an option object to the selected-option-container slot', () => {
    const Select = mountDefault(
      { value: 'one' },
      {
        scopedSlots: {
          'selected-option-container': `<span slot="selected-option-container" slot-scope="{option}">{{ option.label }}</span>`,
        },
      }
    )

    expect(Select.findComponent({ ref: 'selectedOptions' }).text()).toEqual(
      'one'
    )
  })

  describe('Slot: selected-option', () => {
    it('receives an option object to the selected-option slot', () => {
      const Select = mountDefault(
        { value: 'one' },
        {
          scopedSlots: {
            'selected-option': `<span slot="selected-option" slot-scope="option">{{ option.label }}</span>`,
          },
        }
      )

      expect(Select.find('.vs__selected').text()).toEqual('one')
    })

    it('opens the dropdown when clicking an option in selected-option slot', () => {
      const Select = mountDefault(
        { value: 'one' },
        {
          scopedSlots: {
            'selected-option': `<span class="my-option" slot-scope="option">{{ option.label }}</span>`,
          },
        }
      )

      Select.find('.my-option').trigger('mousedown')
      expect(Select.vm.open).toEqual(true)
    })
  })

  it('receives an option object to the option slot in the dropdown menu', async () => {
    const Select = mountDefault(
      { value: 'one' },
      {
        scopedSlots: {
          option: `<span slot="option" slot-scope="option">{{ option.label }}</span>`,
        },
      }
    )

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

    expect(Select.findComponent({ ref: 'dropdownMenu' }).text()).toEqual(
      'onetwothree'
    )
  })

  it('noOptions slot receives the current search text', async () => {
    const noOptions = jest.fn()
    const Select = mountDefault(
      {},
      {
        scopedSlots: { 'no-options': noOptions },
      }
    )

    Select.vm.search = 'something not there'
    Select.vm.open = true
    await Select.vm.$nextTick()

    expect(noOptions).toHaveBeenCalledWith({
      loading: false,
      search: 'something not there',
      searching: true,
    })
  })

  test('header slot props', async () => {
    const header = jest.fn()
    const Select = mountDefault(
      {},
      {
        scopedSlots: { header: header },
      }
    )
    await Select.vm.$nextTick()
    expect(Object.keys(header.mock.calls[0][0])).toEqual([
      'search',
      'loading',
      'searching',
      'filteredOptions',
      'deselect',
    ])
  })

  test('footer slot props', async () => {
    const footer = jest.fn()
    const Select = mountDefault(
      {},
      {
        scopedSlots: { footer: footer },
      }
    )
    await Select.vm.$nextTick()
    expect(Object.keys(footer.mock.calls[0][0])).toEqual([
      'search',
      'loading',
      'searching',
      'filteredOptions',
      'deselect',
    ])
  })

  test('list-header slot props', async () => {
    const header = jest.fn()
    const Select = mountDefault(
      {},
      {
        scopedSlots: { 'list-header': header },
      }
    )
    Select.vm.open = true
    await Select.vm.$nextTick()
    expect(Object.keys(header.mock.calls[0][0])).toEqual([
      'search',
      'loading',
      'searching',
      'filteredOptions',
    ])
  })

  test('list-footer slot props', async () => {
    const footer = jest.fn()
    const Select = mountDefault(
      {},
      {
        scopedSlots: { 'list-footer': footer },
      }
    )
    Select.vm.open = true
    await Select.vm.$nextTick()
    expect(Object.keys(footer.mock.calls[0][0])).toEqual([
      'search',
      'loading',
      'searching',
      'filteredOptions',
    ])
  })
})