feat: prevent trigger on disabled items

Author: root

src/create-dom-event.ts

@@ -20,18 +20,13 @@ const keyCodesByKeyName = {
 
 function getEventProperties(eventParams) {
   const { modifier, meta, options } = eventParams
-  const keyCode =
-    keyCodesByKeyName[modifier] ||
-    options.key ||
-    options.keyCode ||
-    options.code
+  const keyCode = keyCodesByKeyName[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
-    key: keyCode,
     keyCode,
     code: keyCode
   }
@@ -95,6 +90,7 @@ export default function createDOMEvent(
     const canSetProperty = !(
       propertyDescriptor && propertyDescriptor.set === undefined
     )
+
     if (canSetProperty) {
       event[key] = options[key]
     }

src/dom-wrapper.ts

@@ -137,7 +137,35 @@ export class DOMWrapper<ElementType extends Element> implements WrapperAPI {
   }
 
   async trigger(eventString: string, options: Object = {}) {
-    if (this.element) {
+    if (options['target']) {
+      throw Error(
+        `[vue-test-utils]: you cannot set the target value of an event. See the notes section ` +
+          `of the docs for more details—` +
+          `https://vue-test-utils.vuejs.org/api/wrapper/trigger.html`
+      )
+    }
+
+    const isDisabled = () => {
+      const validTagsToBeDisabled = [
+        'BUTTON',
+        'COMMAND',
+        'FIELDSET',
+        'KEYGEN',
+        'OPTGROUP',
+        'OPTION',
+        'SELECT',
+        'TEXTAREA',
+        'INPUT'
+      ]
+      const hasDisabledAttribute = this.attributes().disabled !== undefined
+      const elementCanBeDisabled = validTagsToBeDisabled.includes(
+        this.element.tagName
+      )
+
+      return hasDisabledAttribute && elementCanBeDisabled
+    }
+
+    if (this.element && !isDisabled()) {
       const event = createDOMEvent(eventString, options)
       this.element.dispatchEvent(event)
     }

tests/trigger.spec.ts

@@ -77,43 +77,65 @@ describe('trigger', () => {
       const keydownHandler = jest.fn()
       const Component = {
         template: '<input @keydown="keydownHandler" />',
-        methods: {
-          keydownHandler
-        }
+        methods: { keydownHandler }
       }
       const wrapper = mount(Component, {})
-      await wrapper.trigger('keydown')
 
+      // is not fired when a diferent event is triggered
+      await wrapper.trigger('click')
+      expect(keydownHandler).not.toHaveBeenCalled()
+
+      // is called when 'keydown' is triggered
+      await wrapper.trigger('keydown')
       expect(keydownHandler).toHaveBeenCalledTimes(1)
+
+      // is called when 'keydown' is triggered with a modificator
+      await wrapper.trigger('keydown.enter')
+      expect(keydownHandler).toHaveBeenCalledTimes(2)
+
+      // is called when 'keydown' is triggered with an option
+      await wrapper.trigger('keydown', { key: 'K' })
+      expect(keydownHandler).toHaveBeenCalledTimes(3)
     })
 
     it('causes keydown handler to fire when "keydown.enter" is triggered', async () => {
       const keydownHandler = jest.fn()
       const Component = {
         template: '<input @keydown.enter="keydownHandler" />',
-        methods: {
-          keydownHandler
-        }
+        methods: { keydownHandler }
       }
       const wrapper = mount(Component, {})
-      await wrapper.trigger('keydown', { key: 'Enter' })
 
+      // is not called when key is not 'enter'
+      await wrapper.trigger('keydown', { key: 'Backspace' })
+      expect(keydownHandler).not.toHaveBeenCalled()
+
+      // is not called when key is uppercase 'ENTER'
+      await wrapper.trigger('keydown', { key: 'ENTER' })
+      expect(keydownHandler).not.toHaveBeenCalled()
+
+      // is called when key is lowercase 'enter'
+      await wrapper.trigger('keydown', { key: 'enter' })
       expect(keydownHandler).toHaveBeenCalledTimes(1)
+      expect(keydownHandler.mock.calls[0][0].key).toBe('enter')
+
+      // is called when key is titlecase 'Enter'
+      await wrapper.trigger('keydown', { key: 'Enter' })
+      expect(keydownHandler).toHaveBeenCalledTimes(2)
+      expect(keydownHandler.mock.calls[1][0].key).toBe('Enter')
     })
 
     it('causes keydown handler to fire with the appropiate keyCode when wrapper.trigger("keydown", { keyCode: 65 }) is fired', async () => {
       const keydownHandler = jest.fn()
       const Component = {
         template: '<input @keydown="keydownHandler" />',
-        methods: {
-          keydownHandler
-        }
+        methods: { keydownHandler }
       }
       const wrapper = mount(Component, {})
       await wrapper.trigger('keydown', { keyCode: 65 })
 
       expect(keydownHandler).toHaveBeenCalledTimes(1)
-      expect(keydownHandler.mock.calls[0][0]['keyCode']).toBe(65)
+      expect(keydownHandler.mock.calls[0][0].keyCode).toBe(65)
     })
 
     it('causes keydown handler to fire converting keyName in an apropiate keyCode when wrapper.trigger("keydown.${keyName}") is fired', async () => {
@@ -139,9 +161,7 @@ describe('trigger', () => {
 
       const Component = {
         template: '<input @keydown="keydownHandler" />',
-        methods: {
-          keydownHandler
-        }
+        methods: { keydownHandler }
       }
       const wrapper = mount(Component, {})
 
@@ -150,8 +170,113 @@ describe('trigger', () => {
         wrapper.trigger(`keydown.${keyName}`)
 
         const calls = keydownHandler.mock.calls
-        expect(calls[calls.length - 1][0].keyCode).toEqual(keyCode)
+        const currentCall = calls[calls.length - 1][0]
+
+        // expect(currentCall.key).toBe('')
+        expect(currentCall.keyCode).toBe(keyCode)
+        // expect(currentCall.code).toBe(keyCode.toString())
       }
     })
   })
+
+  describe('on disabled elements', () => {
+    it('does not fires when trigger is called on a valid disabled element', async () => {
+      const validElementsToBeDisabled = [
+        'button',
+        'fieldset',
+        'optgroup',
+        'option',
+        'select',
+        'textarea',
+        'input'
+      ]
+
+      for (let element of validElementsToBeDisabled) {
+        const clickHandler = jest.fn()
+        const Component = {
+          template: `<${element} disabled @click="clickHandler" />`,
+          methods: { clickHandler }
+        }
+        const wrapper = mount(Component, {})
+        await wrapper.trigger('click')
+
+        expect(clickHandler).not.toHaveBeenCalled()
+      }
+    })
+
+    it('is fired when trigger is called on a element set as disabled but who is invalid to be disabled', async () => {
+      const invalidElementsToBeDisabled = ['div', 'span', 'a']
+
+      for (let element of invalidElementsToBeDisabled) {
+        const clickHandler = jest.fn()
+        const Component = {
+          template: `<${element} disabled @click="clickHandler" />`,
+          methods: { clickHandler }
+        }
+        const wrapper = mount(Component, {})
+        await wrapper.trigger('click')
+
+        expect(clickHandler).toHaveBeenCalledTimes(1)
+      }
+    })
+  })
+
+  describe('event modifiers', () => {
+    const eventModifiers = [
+      'stop',
+      'prevent',
+      'capture',
+      'self',
+      'once',
+      'passive'
+    ]
+    for (let modifier of eventModifiers) {
+      it(`handles .${modifier}`, async () => {
+        const keydownHandler = jest.fn()
+        const Component = {
+          template: `<input @keydown.${modifier}="keydownHandler" />`,
+          methods: { keydownHandler }
+        }
+        const wrapper = mount(Component, {})
+
+        await wrapper.trigger('keydown')
+
+        expect(keydownHandler).toHaveBeenCalledTimes(1)
+      })
+    }
+  })
+
+  describe('custom data', () => {
+    it('adds custom data to events', () => {
+      const updateHandler = jest.fn()
+      const Component = {
+        template: '<div @update="updateHandler" />',
+        methods: { updateHandler }
+      }
+      const wrapper = mount(Component, {})
+
+      wrapper.trigger('update', { customData: 123 })
+      expect(updateHandler).toHaveBeenCalledTimes(1)
+      expect(updateHandler.mock.calls[0][0].customData).toBe(123)
+    })
+  })
+
+  describe('errors', () => {
+    it('throws error if options contains a target value', () => {
+      const expectedErrorMessage =
+        '[vue-test-utils]: you cannot set the target value of an event. See the notes section of the docs for more details—https://vue-test-utils.vuejs.org/api/wrapper/trigger.html'
+
+      const clickHandler = jest.fn()
+      const Component = {
+        template: '<div @click="clickHandler" />',
+        methods: { clickHandler }
+      }
+      const wrapper = mount(Component, {})
+
+      const fn = wrapper.trigger('click', { target: 'something' })
+      expect(fn).rejects.toThrowError(expectedErrorMessage)
+
+      expect(clickHandler).not.toHaveBeenCalled()
+    })
+  })
 })