feat: Added typings

Author: nandi95

src/baseWrapper.ts

@@ -1,10 +1,8 @@
 import { textContent } from './utils'
-import { createDOMEvent } from './createDomEvent'
 import type { TriggerOptions } from './createDomEvent'
 import { nextTick } from 'vue'
-import { DomEventName } from './constants/dom-event-types'
 
-export default class BaseWrapper<ElementType extends Element> {
+export default abstract class BaseWrapper<ElementType extends Element> {
   private readonly wrapperElement: ElementType
 
   get element() {
@@ -45,40 +43,28 @@ export default class BaseWrapper<ElementType extends Element> {
     return true
   }
 
-  async trigger(eventString: DomEventName | string, options?: TriggerOptions) {
-    if (options && 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
-    }
+  protected 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
+    )
 
-    if (this.element && !isDisabled()) {
-      const event = createDOMEvent(eventString, options)
-      this.element.dispatchEvent(event)
-    }
-
-    return nextTick()
+    return hasDisabledAttribute && elementCanBeDisabled
   }
+
+  abstract trigger(
+    eventString: string,
+    options?: TriggerOptions
+  ): ReturnType<typeof nextTick>
 }

src/domWrapper.ts

@@ -3,6 +3,9 @@ import { isElementVisible } from './utils/isElementVisible'
 import BaseWrapper from './baseWrapper'
 import { createWrapperError } from './errorWrapper'
 import WrapperLike from './interfaces/wrapperLike'
+import { DomEventName } from './constants/dom-event-types'
+import { createDOMEvent, TriggerOptions } from './createDomEvent'
+import { nextTick } from 'vue'
 
 export class DOMWrapper<ElementType extends Element>
   extends BaseWrapper<ElementType>
@@ -137,4 +140,21 @@ export class DOMWrapper<ElementType extends Element>
 
     return new DOMWrapper(parentElement).trigger('change')
   }
+
+  async trigger(eventString: DomEventName | string, options?: TriggerOptions) {
+    if (options && 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`
+      )
+    }
+
+    if (this.element && !this.isDisabled()) {
+      const event = createDOMEvent(eventString, options)
+      this.element.dispatchEvent(event)
+    }
+
+    return nextTick()
+  }
 }

src/vueWrapper.ts

@@ -17,6 +17,7 @@ import { mergeDeep } from './utils'
 import { emitted, recordEvent } from './emit'
 import BaseWrapper from './baseWrapper'
 import WrapperLike from './interfaces/wrapperLike'
+import { createDOMEvent, TriggerOptions } from './createDomEvent'
 
 export class VueWrapper<T extends ComponentPublicInstance>
   extends BaseWrapper<T['$el']>
@@ -257,6 +258,26 @@ export class VueWrapper<T extends ComponentPublicInstance>
 
     this.__app.unmount()
   }
+
+  async trigger(
+    eventString: Parameters<T['$emit']>[0],
+    options?: TriggerOptions
+  ) {
+    if (options && 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`
+      )
+    }
+
+    if (this.element && !this.isDisabled()) {
+      const event = createDOMEvent(eventString, options)
+      this.element.dispatchEvent(event)
+    }
+
+    return nextTick()
+  }
 }
 
 export function createWrapper<T extends ComponentPublicInstance>(

tests/emit.spec.ts

@@ -316,7 +316,7 @@ describe('emitted', () => {
     })
 
     const wrapper = mount(Foo)
-    await wrapper.trigger('click')
+    await wrapper.get('div').trigger('click')
     expect(wrapper.emitted('foo')).toHaveLength(1)
   })
 })

tests/props.spec.ts

@@ -110,7 +110,7 @@ describe('props', () => {
     })
 
     expect(wrapper.props('modelValue')).toBe(1)
-    await wrapper.trigger('click')
+    await wrapper.get('button').trigger('click')
     expect(wrapper.props('modelValue')).toBe(2)
   })
 
@@ -217,7 +217,7 @@ describe('props', () => {
 
     expect(wrapper.text()).toEqual('hello')
 
-    await wrapper.trigger('click')
+    await wrapper.get('div').trigger('click')
 
     expect(wrapper.text()).toEqual('hello')
   })

tests/trigger.spec.ts

@@ -314,10 +314,11 @@ describe('trigger', () => {
   describe('custom data', () => {
     it('adds custom data to events', () => {
       const updateHandler = jest.fn()
-      const Component = {
+      const Component = defineComponent({
         template: '<div @update="updateHandler" />',
-        methods: { updateHandler }
-      }
+        methods: { updateHandler },
+        emits: ['update']
+      })
       const wrapper = mount(Component, {})
 
       wrapper.trigger('update', { customData: 123 })