Merge pull request #971 from sagalbot/fix-956-event-delegation

WIP Event delegation for #956

tests/unit/Keydown.spec.js

@@ -0,0 +1,74 @@
+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);
+    });
+
+  });
+
+});

tests/unit/Selectable.spec.js

@@ -4,7 +4,7 @@ describe("Selectable prop", () => {
   it("should select selectable option if clicked", () => {
     const Select = selectWithProps({
       options: ["one", "two", "three"],
-      selectable: (option) => option == "one"
+      selectable: (option) => option === "one"
     });
 
     Select.vm.$data.open = true;
@@ -16,7 +16,7 @@ describe("Selectable prop", () => {
   it("should not select not selectable option if clicked", () => {
     const Select = selectWithProps({
       options: ["one", "two", "three"],
-      selectable: (option) => option == "one"
+      selectable: (option) => option === "one"
     });
 
     Select.vm.$data.open = true;