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.find({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.find({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',
    ]);
  });
});