Merge pull request #1378 from vuejs/fix/issue-1285-custom-keycodes-failing

fix: use the keyCodes provided in options from wrapper.trigger

Author: Dobromir Hristov

packages/test-utils/src/create-dom-event.js

@@ -24,36 +24,46 @@ const modifiers = {
   pagedown: 34
 }
 
-function createEvent(
-  type,
-  modifier,
-  { eventInterface, bubbles, cancelable },
-  options
-) {
+function getOptions(eventParams) {
+  const { modifier, meta, options } = eventParams
+  const keyCode = modifiers[modifier] || options.keyCode || options.code
+
+  return {
+    ...options, // What the user passed in as the second argument to #trigger
+
+    bubbles: meta.bubbles,
+    meta: meta.cancelable,
+
+    // Any derived options should go here
+    keyCode,
+    code: keyCode
+  }
+}
+
+function createEvent(eventParams) {
+  const { eventType, meta = {} } = eventParams
+
   const SupportedEventInterface =
-    typeof window[eventInterface] === 'function'
-      ? window[eventInterface]
+    typeof window[meta.eventInterface] === 'function'
+      ? window[meta.eventInterface]
       : window.Event
 
-  const event = new SupportedEventInterface(type, {
+  const event = new SupportedEventInterface(
+    eventType,
     // event properties can only be added when the event is instantiated
     // custom properties must be added after the event has been instantiated
-    ...options,
-    bubbles,
-    cancelable,
-    keyCode: modifiers[modifier]
-  })
+    getOptions(eventParams)
+  )
 
   return event
 }
 
-function createOldEvent(
-  type,
-  modifier,
-  { eventInterface, bubbles, cancelable }
-) {
+function createOldEvent(eventParams) {
+  const { eventType, modifier, meta } = eventParams
+  const { bubbles, cancelable } = meta
+
   const event = document.createEvent('Event')
-  event.initEvent(type, bubbles, cancelable)
+  event.initEvent(eventType, bubbles, cancelable)
   event.keyCode = modifiers[modifier]
   return event
 }
@@ -62,11 +72,13 @@ export default function createDOMEvent(type, options) {
   const [eventType, modifier] = type.split('.')
   const meta = eventTypes[eventType] || defaultEventType
 
+  const eventParams = { eventType, modifier, meta, options }
+
   // Fallback for IE10,11 - https://stackoverflow.com/questions/26596123
   const event =
     typeof window.Event === 'function'
-      ? createEvent(eventType, modifier, meta, options)
-      : createOldEvent(eventType, modifier, meta)
+      ? createEvent(eventParams)
+      : createOldEvent(eventParams)
 
   const eventPrototype = Object.getPrototypeOf(event)
   Object.keys(options || {}).forEach(key => {

test/specs/wrapper/trigger.spec.js

@@ -37,6 +37,26 @@ describeWithShallowAndMount('trigger', mountingMethod => {
     expect(keydownHandler.calledOnce).to.equal(true)
   })
 
+  describe('causes keydown handler to fire with the appropriate keyCode when wrapper.trigger("keydown", { keyCode: 65 }) is fired on a Component', () => {
+    const keydownHandler = sandbox.stub()
+    const wrapper = mountingMethod(ComponentWithEvents, {
+      propsData: { keydownHandler }
+    })
+
+    wrapper.find('.keydown').trigger('keydown', { keyCode: 65 })
+
+    const keyboardEvent = keydownHandler.getCall(0).args[0]
+
+    // Unfortunately, JSDom will give different types than PhantomJS for keyCodes (string vs number), so we have to use parseInt to normalize the types.
+    it('contains the keyCode', () => {
+      expect(parseInt(keyboardEvent.keyCode, 10)).to.equal(65)
+    })
+
+    itDoNotRunIf(isRunningPhantomJS, 'contains the code', () => {
+      expect(parseInt(keyboardEvent.code, 10)).to.equal(65)
+    })
+  })
+
   it('causes keydown handler to fire when wrapper.trigger("keydown.enter") is fired on a Component', () => {
     const keydownHandler = sandbox.stub()
     const wrapper = mountingMethod(ComponentWithEvents, {

yarn.lock

@@ -4498,10 +4498,10 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
-flow-bin@^0.111.0:
-  version "0.111.3"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.111.3.tgz#8653a413400ebc966097a47c81fb4e6b722a5921"
-  integrity sha512-Gn27aRTjSFicukZ/pq3raRERmSk9UWszhIK9eNtj6843L54YtK+jk2OkQWV70+VKi9LmWyfItCkhwoIVy7L2lA==
+flow-bin@^0.66.0:
+  version "0.66.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.66.0.tgz#a96dde7015dc3343fd552a7b4963c02be705ca26"
+  integrity sha1-qW3ecBXcM0P9VSp7SWPAK+cFyiY=
 
 flow-remove-types-no-whitespace@^1.0.3:
   version "1.0.5"