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

import { mountDefault } from '../helpers';

describe('Custom Keydown Handlers', () => {

  it('can use the map-keydown prop to trigger custom behaviour', () => {
    const onKeyDown = jest.fn();
    const Select = mountDefault({
      mapKeydown: (defaults, vm) => ({...defaults, 32: onKeyDown}),
    });

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

    expect(onKeyDown.mock.calls.length).toBe(1);
  });

  it('selectOnKeyCodes should trigger a selection for custom keycodes', () => {
    const Select = mountDefault({
      selectOnKeyCodes: [32],
    });

    const spy = jest.spyOn(Select.vm, 'typeAheadSelect');

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

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

  it('even works when combining selectOnKeyCodes with map-keydown', () => {
    const onKeyDown = jest.fn();
    const Select = mountDefault({
      mapKeydown: (defaults, vm) => ({...defaults, 32: onKeyDown}),
      selectOnKeyCodes: [9],
    });

    const spy = jest.spyOn(Select.vm, 'typeAheadSelect');

    Select.find({ref: 'search'}).trigger('keydown.space');
    expect(onKeyDown.mock.calls.length).toBe(1);

    Select.find({ref: 'search'}).trigger('keydown.tab');
    expect(spy).toHaveBeenCalledTimes(1);
  });

  describe('CompositionEvent support', () => {

    it('will not select a value with enter if the user is composing', () => {
      const Select = mountDefault();
      const spy = jest.spyOn(Select.vm, 'typeAheadSelect');

      Select.find({ref: 'search'}).trigger('compositionstart');
      Select.find({ref: 'search'}).trigger('keydown.enter');
      expect(spy).toHaveBeenCalledTimes(0);

      Select.find({ref: 'search'}).trigger('compositionend');
      Select.find({ref: 'search'}).trigger('keydown.enter');
      expect(spy).toHaveBeenCalledTimes(1);
    });

    it('will not select a value with tab if the user is composing', () => {
      const Select = mountDefault({selectOnTab: true});
      const spy = jest.spyOn(Select.vm, 'typeAheadSelect');

      Select.find({ref: 'search'}).trigger('compositionstart');
      Select.find({ref: 'search'}).trigger('keydown.tab');
      expect(spy).toHaveBeenCalledTimes(0);

      Select.find({ref: 'search'}).trigger('compositionend');
      Select.find({ref: 'search'}).trigger('keydown.tab');
      expect(spy).toHaveBeenCalledTimes(1);
    });

  });

});