(fix) use custom keyCodes or codes when provided to trigger options

Author: Jess

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

@@ -1,4 +1,5 @@
 import eventTypes from 'dom-event-types'
+import { throwError } from 'shared/util'
 
 const defaultEventType = {
   eventInterface: 'Event',
@@ -24,6 +25,37 @@ const modifiers = {
   pagedown: 34
 }
 
+/**
+ * Fixing a bug where we listen to what keyCode the user passes in.
+ * Previously the modifier's keyCode would win, or we would return "0"
+ * This puts us at risk to break users' tests, so we should detect and notify them.
+ * */
+function onModifierAndKeyCodeMismatch(type, modifier, finalKeyCode) {
+  if (!modifier || !finalKeyCode) { return } // can't mismatch if nothing is passed in
+  const fromModifiers = modifiers[modifier]
+  const keysAreDifferent = fromModifiers != finalKeyCode // this will be true if the user is using modifiers and mismatched keyCodes. Coerce.
+  if (fromModifiers && finalKeyCode && keysAreDifferent) {
+    throwError(`wrapper.trigger('${type}.${modifier}') was called ` +
+      `with options.code (or keyCode) of ${finalKeyCode}. ` +
+      `This does not match the modifier's code (${fromModifiers}). ` +
+      `Unable to decide which code to trigger. Please disambiguate.`)
+  }
+}
+
+function sanitizeOptions(type, modifier, { bubbles, cancelable }, options) {
+  const keyCode = options.code || options.keyCode || modifiers[modifier]
+  onModifierAndKeyCodeMismatch(type, modifier, keyCode)
+
+  const derivedOptions = { keyCode, code: keyCode }
+
+  return {
+    bubbles,
+    cancelable,
+    ...options, // What the user passed in as the second argument to #trigger
+    ...derivedOptions // Computed values, not necessarily the raw values that the user passed in
+  }
+}
+
 function createEvent(
   type,
   modifier,
@@ -35,14 +67,11 @@ function createEvent(
       ? window[eventInterface]
       : window.Event
 
-  const event = new SupportedEventInterface(type, {
+  const event = new SupportedEventInterface(type,
     // 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]
-  })
+    sanitizeOptions(type, modifier, { bubbles, cancelable }, options)
+  )
 
   return event
 }

test/specs/wrapper/trigger.spec.js

@@ -37,6 +37,47 @@ describeWithShallowAndMount('trigger', mountingMethod => {
     expect(keydownHandler.calledOnce).to.equal(true)
   })
 
+  it('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 the keyCodes.
+    // parseInt to normalize. I can't find a matcher here https://www.chaijs.com/api/bdd/
+    // that relies on (`==`) instead of strict equals (`===`)
+    expect(parseInt(keyboardEvent.keyCode, 10)).to.equal(65)
+    expect(parseInt(keyboardEvent.code, 10)).to.equal(65)
+  })
+
+  it('causes keydown handler to throw a sensible error when a modifier does not match the keyCode option', () => {
+    const keyCode = 404
+    const keyCodeFromModifiers = 13
+    const type = 'keydown'
+    const modifier = 'enter'
+
+    const message =
+      `[vue-test-utils]: wrapper.trigger('${type}.${modifier}') was called ` +
+      `with options.code (or keyCode) of ${keyCode}. ` +
+      `This does not match the modifier's code (${keyCodeFromModifiers}). ` +
+      `Unable to decide which code to trigger. Please disambiguate.`
+
+    const keydownHandler = sandbox.stub()
+    const wrapper = mountingMethod(ComponentWithEvents, {
+      propsData: { keydownHandler }
+    })
+
+    const fn = () =>
+      wrapper.find('.keydown').trigger(`${type}.${modifier}`, { keyCode })
+
+    expect(fn)
+      .to.throw()
+      .with.property('message', message)
+  })
+
   it('causes keydown handler to fire when wrapper.trigger("keydown.enter") is fired on a Component', () => {
     const keydownHandler = sandbox.stub()
     const wrapper = mountingMethod(ComponentWithEvents, {