feat: Add event modifiers (#590)

* feat: wip - added some modifiers

* Updated to use types with modifiers

* wip: added the correct modifiers

* fixed lint issues

Author: nandi95

src/baseWrapper.ts

@@ -2,7 +2,7 @@ import { textContent } from './utils'
 import type { TriggerOptions } from './createDomEvent'
 import { nextTick } from 'vue'
 import { createDOMEvent } from './createDomEvent'
-import { DomEventName } from './constants/dom-event-types'
+import { DomEventName, DomEventNameWithModifier } from './constants/dom-events'
 
 export default class BaseWrapper<ElementType extends Element> {
   private readonly wrapperElement: ElementType
@@ -66,7 +66,7 @@ export default class BaseWrapper<ElementType extends Element> {
   }
 
   async trigger(
-    eventString: DomEventName,
+    eventString: DomEventNameWithModifier,
     options?: TriggerOptions
   ): Promise<void>
   async trigger(eventString: string, options?: TriggerOptions): Promise<void>

src/constants/dom-event-types.ts renamed to src/constants/dom-events.ts

@@ -62,6 +62,50 @@ export interface DomEvent {
 
 export type DomEventName = keyof typeof domEvents
 
+export const ignorableKeyModifiers = [
+  'stop',
+  'prevent',
+  'self',
+  'exact',
+  'prevent',
+  'capture'
+]
+export const systemKeyModifiers = ['ctrl', 'shift', 'alt', 'meta'] as const
+export const mouseKeyModifiers = ['left', 'middle', 'right'] as const
+
+export const keyCodesByKeyName = {
+  backspace: 8,
+  tab: 9,
+  enter: 13,
+  esc: 27,
+  space: 32,
+  pageup: 33,
+  pagedown: 34,
+  end: 35,
+  home: 36,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  insert: 45,
+  delete: 46
+} as const
+
+export type KeyName = keyof typeof keyCodesByKeyName
+export type Modifier =
+  | typeof systemKeyModifiers[number]
+  | typeof mouseKeyModifiers[number]
+
+export type DomEventNameWithModifier =
+  | DomEventName
+  | `${DomEventName}.${typeof systemKeyModifiers[number]}`
+  | `click.${typeof mouseKeyModifiers[number]}`
+  | `click.${typeof systemKeyModifiers[number]}.${typeof mouseKeyModifiers[number]}`
+  | `${'keydown' | 'keyup'}.${keyof typeof keyCodesByKeyName}`
+  | `${
+      | 'keydown'
+      | 'keyup'}.${typeof systemKeyModifiers[number]}.${keyof typeof keyCodesByKeyName}`
+
 const domEvents = {
   abort: {
     eventInterface: 'Event',

src/createDomEvent.ts

@@ -1,36 +1,14 @@
 import domEvents, {
   DomEvent,
   DomEventName,
-  EventInterface
-} from './constants/dom-event-types'
-
-const keyCodesByKeyName = {
-  backspace: 8,
-  tab: 9,
-  enter: 13,
-  esc: 27,
-  space: 32,
-  pageup: 33,
-  pagedown: 34,
-  end: 35,
-  home: 36,
-  left: 37,
-  up: 38,
-  right: 39,
-  down: 40,
-  insert: 45,
-  delete: 46
-} as const
-
-// modifiers to keep an eye on
-const ignorableKeyModifiers = ['stop', 'prevent', 'self', 'exact']
-const systemKeyModifiers = ['ctrl', 'shift', 'alt', 'meta'] as const
-const mouseKeyModifiers = ['left', 'middle', 'right'] as const
-
-type KeyName = keyof typeof keyCodesByKeyName
-type Modifier =
-  | typeof systemKeyModifiers[number]
-  | typeof mouseKeyModifiers[number]
+  DomEventNameWithModifier,
+  KeyName,
+  Modifier,
+  ignorableKeyModifiers,
+  systemKeyModifiers,
+  mouseKeyModifiers,
+  keyCodesByKeyName
+} from './constants/dom-events'
 
 interface TriggerOptions {
   code?: String
@@ -40,7 +18,7 @@ interface TriggerOptions {
 }
 
 interface EventParams {
-  eventType: DomEventName | string
+  eventType: DomEventName
   modifiers: KeyName[]
   options?: TriggerOptions
 }
@@ -104,7 +82,7 @@ function getEventProperties(eventParams: EventParams) {
     }
   }
 
-  const meta: DomEvent = domEvents[eventType as DomEventName] || {
+  const meta: DomEvent = domEvents[eventType] || {
     eventInterface: 'Event',
     cancelable: true,
     bubbles: true
@@ -163,14 +141,14 @@ function createEvent(eventParams: EventParams) {
 }
 
 function createDOMEvent(
-  eventString: DomEventName | string,
+  eventString: DomEventNameWithModifier | string,
   options?: TriggerOptions
 ) {
-  // split eventString like `keydown.ctrl.shift.c` into `keydown` and array of modifiers
+  // split eventString like `keydown.ctrl.shift` into `keydown` and array of modifiers
   const [eventType, ...modifiers] = eventString.split('.')
 
   const eventParams: EventParams = {
-    eventType,
+    eventType: eventType as DomEventName,
     modifiers: modifiers as KeyName[],
     options
   }

src/vueWrapper.ts

@@ -4,7 +4,7 @@ import { ShapeFlags } from '@vue/shared'
 import pretty from 'pretty'
 
 import { config } from './config'
-import domEvents from './constants/dom-event-types'
+import domEvents from './constants/dom-events'
 import { DOMWrapper } from './domWrapper'
 import {
   FindAllComponentsSelector,

tests/trigger.spec.ts

@@ -171,6 +171,7 @@ describe('trigger', () => {
       expect(keydownHandler).toHaveBeenCalledTimes(2)
       expect(keydownHandler.mock.calls[1][0].key).toBe('Enter')
 
+      // is correctly parsed when using modifier
       await wrapper.trigger('keydown.enter')
       expect(keydownHandler).toHaveBeenCalledTimes(3)
       expect(keydownHandler.mock.calls[2][0].key).toBe('enter')