fix: create MouseEvents per createEvent (#781)

Author: ph-fritsche

src/utils/index.ts

@@ -32,6 +32,5 @@ export * from './misc/wait'
 export * from './misc/hasPointerEvents'
 export * from './misc/hasFormSubmit'
 
-export * from './pointer/fakeEvent'
 export * from './pointer/firePointerEvents'
 export * from './pointer/mouseButtons'

src/utils/pointer/dom-events.d.ts

@@ -0,0 +1,3 @@
+declare module '@testing-library/dom/dist/event-map' {
+  export const eventMap: Record<string, unknown>
+}

src/utils/pointer/fakeEvent.ts

@@ -1,12 +1,7 @@
-import {fireEvent} from '@testing-library/dom'
+import {createEvent, fireEvent} from '@testing-library/dom'
+import {eventMap} from '@testing-library/dom/dist/event-map'
 import type {pointerState} from '../../pointer/types'
 import type {keyboardState} from '../../keyboard/types'
-import {
-  FakeMouseEvent,
-  FakePointerEvent,
-  FakePointerEventInit,
-  PointerCoords,
-} from './fakeEvent'
 import {getMouseButton, getMouseButtons, MouseButton} from './mouseButtons'
 
 export function firePointerEvent(
@@ -32,19 +27,14 @@ export function firePointerEvent(
     clickCount?: number
   },
 ) {
-  const Event =
-    type === 'click' || type.startsWith('mouse')
-      ? FakeMouseEvent
-      : FakePointerEvent
-
-  const init: FakePointerEventInit = {
+  const init: MouseEventInit & PointerEventInit = {
     ...coords,
     altKey: keyboardState.modifiers.alt,
     ctrlKey: keyboardState.modifiers.ctrl,
     metaKey: keyboardState.modifiers.meta,
     shiftKey: keyboardState.modifiers.shift,
   }
-  if (Event === FakePointerEvent || type === 'click') {
+  if (type === 'click' || type.startsWith('pointer')) {
     init.pointerId = pointerId
     init.pointerType = pointerType
   }
@@ -61,9 +51,80 @@ export function firePointerEvent(
         .map(p => p.keyDef.button ?? 0),
     )
   }
-  if (['mousedown', 'mouseup', 'click'].includes(type)) {
+  if (['mousedown', 'mouseup', 'click', 'dblclick'].includes(type)) {
     init.detail = clickCount
   }
 
-  return fireEvent(target, new Event(type, init))
+  const eventKey = Object.keys(eventMap).find(k => k.toLowerCase() === type)
+  const event = createEvent[eventKey as keyof typeof createEvent](target, init)
+
+  // see https://github.com/testing-library/react-testing-library/issues/268
+  assignPositionInit(event as MouseEvent, init)
+  assignPointerInit(event as PointerEvent, init)
+
+  return fireEvent(target, event)
+}
+
+export interface PointerCoords {
+  x?: number
+  y?: number
+  clientX?: number
+  clientY?: number
+  offsetX?: number
+  offsetY?: number
+  pageX?: number
+  pageY?: number
+  screenX?: number
+  screenY?: number
+}
+
+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,
+) {
+  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/utils/pointer/firePointerEvents.ts

@@ -1,6 +1,6 @@
 /* eslint-disable testing-library/no-node-access */
 import {eventMap} from '@testing-library/dom/dist/event-map'
-import {isElementType} from '#src/utils'
+import {isElementType, MouseButton} from '#src/utils'
 // this is pretty helpful:
 // https://codesandbox.io/s/quizzical-worker-eo909
 
@@ -134,15 +134,22 @@ const eventLabelGetters = {
       .trim()
   },
   MouseEvent(event: MouseEvent) {
-    // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-    const mouseButtonMap: Record<number, string> = {
-      0: 'Left',
-      1: 'Middle',
-      2: 'Right',
-      3: 'Browser Back',
-      4: 'Browser Forward',
+    if (
+      [
+        'click',
+        'dblclick',
+        'mousedown',
+        'mouseup',
+        'pointerdown',
+        'pointerup',
+      ].includes(event.type)
+    ) {
+      const buttonName = Object.keys(MouseButton).find(
+        k => MouseButton[k as keyof typeof MouseButton] === event.button,
+      )
+      // const buttonName = Object.keys(MouseButton).find(k => MouseButton[k as keyof typeof MouseButton] === event.button)
+      return buttonName ?? `button${event.button}`
     }
-    return `${mouseButtonMap[event.button]} (${event.button})`
   },
 } as const
 

tests/_helpers/utils.ts

@@ -15,13 +15,13 @@ test('clears text', () => {
     input[value="hello"] - pointermove
     input[value="hello"] - mousemove
     input[value="hello"] - pointerdown
-    input[value="hello"] - mousedown
+    input[value="hello"] - mousedown: primary
     input[value="hello"] - focus
     input[value="hello"] - focusin
     input[value="hello"] - select
     input[value="hello"] - pointerup
-    input[value="hello"] - mouseup
-    input[value="hello"] - click
+    input[value="hello"] - mouseup: primary
+    input[value="hello"] - click: primary
     input[value="hello"] - select
     input[value="hello"] - select
     input[value="hello"] - keydown: Delete (46)
@@ -59,13 +59,13 @@ test('does not clear text on readonly inputs', () => {
     input[value="hello"] - pointermove
     input[value="hello"] - mousemove
     input[value="hello"] - pointerdown
-    input[value="hello"] - mousedown
+    input[value="hello"] - mousedown: primary
     input[value="hello"] - focus
     input[value="hello"] - focusin
     input[value="hello"] - select
     input[value="hello"] - pointerup
-    input[value="hello"] - mouseup
-    input[value="hello"] - click
+    input[value="hello"] - mouseup: primary
+    input[value="hello"] - click: primary
     input[value="hello"] - select
     input[value="hello"] - select
     input[value="hello"] - keydown: Delete (46)