refactor: dispatch all UI events per one internal API (#838)

* refactor: centralize calls to createEvent

* refactor: centralize dispatching ui events

* refactor: apply event props in dispatcher

* refactor: inline paste implementation

Author: ph-fritsche

src/clipboard/copy.ts

@@ -1,4 +1,3 @@
-import {fireEvent} from '@testing-library/dom'
 import {Config, Instance} from '../setup'
 import {copySelection, writeDataTransferToClipboard} from '../utils'
 
@@ -12,7 +11,7 @@ export async function copy(this: Instance) {
     return
   }
 
-  fireEvent.copy(target, {
+  this.dispatchUIEvent(target, 'copy', {
     clipboardData,
   })
 

src/clipboard/cut.ts

@@ -1,4 +1,3 @@
-import {fireEvent} from '@testing-library/dom'
 import {Config, Instance} from '../setup'
 import {
   copySelection,
@@ -17,12 +16,12 @@ export async function cut(this: Instance) {
     return
   }
 
-  fireEvent.cut(target, {
+  this.dispatchUIEvent(target, 'cut', {
     clipboardData,
   })
 
   if (isEditable(target)) {
-    prepareInput('', target, 'deleteByCut')?.commit()
+    prepareInput(this[Config], '', target, 'deleteByCut')?.commit()
   }
 
   if (this[Config].writeToClipboard) {

src/clipboard/paste.ts

@@ -1,4 +1,3 @@
-import {fireEvent} from '@testing-library/dom'
 import {Config, Instance} from '../setup'
 import {
   createDataTransfer,
@@ -15,7 +14,7 @@ export async function paste(
   const doc = this[Config].document
   const target = doc.activeElement ?? /* istanbul ignore next */ doc.body
 
-  const data: DataTransfer =
+  const dataTransfer: DataTransfer =
     (typeof clipboardData === 'string'
       ? getClipboardDataFromString(clipboardData)
       : clipboardData) ??
@@ -25,21 +24,17 @@ export async function paste(
       )
     }))
 
-  return pasteImpl(target, data)
-}
-
-function pasteImpl(target: Element, clipboardData: DataTransfer) {
-  fireEvent.paste(target, {
-    clipboardData,
+  this.dispatchUIEvent(target, 'paste', {
+    clipboardData: dataTransfer,
   })
 
   if (isEditable(target)) {
-    const data = clipboardData
+    const textData = dataTransfer
       .getData('text')
       .substr(0, getSpaceUntilMaxLength(target))
 
-    if (data) {
-      prepareInput(data, target, 'insertFromPaste')?.commit()
+    if (textData) {
+      prepareInput(this[Config], textData, target, 'insertFromPaste')?.commit()
     }
   }
 }

src/document/index.ts

@@ -1,4 +1,5 @@
-import {fireEvent} from '@testing-library/dom'
+import {dispatchUIEvent} from '../event'
+import {Config} from '../setup'
 import {prepareSelectionInterceptor} from './selection'
 import {
   getInitialValue,
@@ -45,7 +46,7 @@ export function prepareDocument(document: Document) {
       const el = e.target as HTMLInputElement
       const initialValue = getInitialValue(el)
       if (typeof initialValue === 'string' && el.value !== initialValue) {
-        fireEvent.change(el)
+        dispatchUIEvent({} as Config, el, 'change')
       }
     },
     {

src/event/createEvent.ts

@@ -0,0 +1,98 @@
+import {createEvent as createEventBase} from '@testing-library/dom'
+import {eventMap} from '@testing-library/dom/dist/event-map.js'
+import {isMouseEvent} from './eventTypes'
+import {EventType, PointerCoords} from './types'
+
+export type EventTypeInit<K extends EventType> = SpecificEventInit<
+  FixedDocumentEventMap[K]
+>
+
+interface FixedDocumentEventMap extends DocumentEventMap {
+  input: InputEvent
+}
+
+type SpecificEventInit<E extends Event> = E extends InputEvent
+  ? InputEventInit
+  : E extends ClipboardEvent
+  ? ClipboardEventInit
+  : E extends KeyboardEvent
+  ? KeyboardEventInit
+  : E extends PointerEvent
+  ? PointerEventInit
+  : E extends MouseEvent
+  ? MouseEventInit
+  : E extends UIEvent
+  ? UIEventInit
+  : EventInit
+
+export function createEvent<K extends EventType>(
+  type: K,
+  target: Element,
+  init?: EventTypeInit<K>,
+) {
+  const eventKey = Object.keys(eventMap).find(
+    k => k.toLowerCase() === type,
+  ) as keyof typeof createEventBase
+
+  const event = createEventBase[eventKey](target, init) as DocumentEventMap[K]
+
+  // Can not use instanceof, as MouseEvent might be polyfilled.
+  if (isMouseEvent(type) && init) {
+    // see https://github.com/testing-library/react-testing-library/issues/268
+    assignPositionInit(event as MouseEvent, init)
+    assignPointerInit(event as PointerEvent, init)
+  }
+
+  return event
+}
+
+function assignProps(
+  obj: MouseEvent | PointerEvent,
+  props: MouseEventInit & PointerEventInit & PointerCoords,
+) {
+  for (const [key, value] of Object.entries(props)) {
+    Object.defineProperty(obj, key, {get: () => value})
+  }
+}
+
+function assignPositionInit(
+  obj: MouseEvent | PointerEvent,
+  {
+    x,
+    y,
+    clientX,
+    clientY,
+    offsetX,
+    offsetY,
+    pageX,
+    pageY,
+    screenX,
+    screenY,
+  }: PointerCoords & MouseEventInit,
+) {
+  assignProps(obj, {
+    /* istanbul ignore start */
+    x: x ?? clientX ?? 0,
+    y: y ?? clientY ?? 0,
+    clientX: x ?? clientX ?? 0,
+    clientY: y ?? clientY ?? 0,
+    offsetX: offsetX ?? 0,
+    offsetY: offsetY ?? 0,
+    pageX: pageX ?? 0,
+    pageY: pageY ?? 0,
+    screenX: screenX ?? 0,
+    screenY: screenY ?? 0,
+    /* istanbul ignore end */
+  })
+}
+
+function assignPointerInit(
+  obj: MouseEvent | PointerEvent,
+  {isPrimary, pointerId, pointerType}: PointerEventInit,
+) {
+  assignProps(obj, {
+    isPrimary,
+    pointerId,
+    pointerType,
+  })
+}

src/event/dom-events.d.ts

@@ -0,0 +1,9 @@
+declare module '@testing-library/dom/dist/event-map.js' {
+  import {EventType} from '@testing-library/dom'
+  export const eventMap: {
+    [k in EventType]: {
+      EventType: string
+      defaultInit: EventInit
+    }
+  }
+}

src/event/eventTypes.ts

@@ -0,0 +1,20 @@
+import {eventMap} from '@testing-library/dom/dist/event-map.js'
+
+const eventKeys = Object.fromEntries(
+  Object.keys(eventMap).map(k => [k.toLowerCase(), k]),
+) as {
+  [k in keyof DocumentEventMap]: keyof typeof eventMap
+}
+
+function getEventClass(type: keyof DocumentEventMap) {
+  return eventMap[eventKeys[type]].EventType
+}
+
+const mouseEvents = ['MouseEvent', 'PointerEvent']
+export function isMouseEvent(type: keyof DocumentEventMap) {
+  return mouseEvents.includes(getEventClass(type))
+}
+
+export function isKeyboardEvent(type: keyof DocumentEventMap) {
+  return getEventClass(type) === 'KeyboardEvent'
+}

src/event/index.ts

@@ -0,0 +1,30 @@
+import {Config} from '../setup'
+import {getUIEventModifiers} from '../utils'
+import {createEvent, EventTypeInit} from './createEvent'
+import {isKeyboardEvent, isMouseEvent} from './eventTypes'
+import {EventType, PointerCoords} from './types'
+import {wrapEvent} from './wrapEvent'
+
+export type {EventType, PointerCoords}
+
+export function dispatchUIEvent<K extends EventType>(
+  config: Config,
+  target: Element,
+  type: K,
+  init?: EventTypeInit<K>,
+) {
+  if (isMouseEvent(type) || isKeyboardEvent(type)) {
+    init = {
+      ...init,
+      ...getUIEventModifiers(config.keyboardState),
+    } as EventTypeInit<K>
+  }
+
+  const event = createEvent(type, target, init)
+
+  return wrapEvent(() => target.dispatchEvent(event), target)
+}
+
+export function bindDispatchUIEvent(config: Config) {
+  return dispatchUIEvent.bind(undefined, config)
+}

src/event/types.ts

@@ -0,0 +1,14 @@
+export type EventType = keyof DocumentEventMap
+
+export interface PointerCoords {
+  x?: number
+  y?: number
+  clientX?: number
+  clientY?: number
+  offsetX?: number
+  offsetY?: number
+  pageX?: number
+  pageY?: number
+  screenX?: number
+  screenY?: number
+}

src/event/wrapEvent.ts

@@ -0,0 +1,5 @@
+import {getConfig} from '@testing-library/dom'
+
+export function wrapEvent<R>(cb: () => R, _element: Element) {
+  return getConfig().eventWrapper(cb) as unknown as R
+}