fix: fire event init (#63)

* test: assert event init is passed on to dom fireEvent

* fix: pass event init on to dom fireEvent

Co-authored-by: Victor Babel <[email protected]>

Author: vbabel

src/__tests__/events.js

@@ -152,6 +152,9 @@ eventTypes.forEach(({ type, events, elementType, init }) => {
         expect(fireEvent[eventName](ref.current, init)).toBe(true)
 
         expect(spy).toHaveBeenCalledTimes(1)
+        if (init) {
+          expect(spy).toHaveBeenCalledWith(expect.objectContaining(init))
+        }
       })
     })
   })
@@ -164,9 +167,17 @@ test('onInput works', () => {
     container: { firstChild: input }
   } = render(<input type="text" onInput={handler} />)
 
-  expect(fireEvent.input(input, { target: { value: 'a' } })).toBe(true)
+  const targetProperties = { value: 'a' }
+  const otherProperties = { isComposing: true }
+  const init = {
+    target: targetProperties,
+    ...otherProperties
+  }
+
+  expect(fireEvent.input(input, init)).toBe(true)
 
   expect(handler).toHaveBeenCalledTimes(1)
+  expect(handler).toHaveBeenCalledWith(expect.objectContaining(otherProperties))
 })
 
 test('calling `fireEvent` directly works too', () => {
@@ -176,14 +187,16 @@ test('calling `fireEvent` directly works too', () => {
     container: { firstChild: button }
   } = render(<button onClick={handler} />)
 
-  expect(fireEvent(
-    button,
-    new Event('MouseEvent', {
-      bubbles: true,
-      cancelable: true,
-      button: 0
-    })
-  )).toBe(true)
+  const event = new MouseEvent('click', {
+    bubbles: true,
+    cancelable: true,
+    button: 0
+  })
+
+  expect(fireEvent(button, event)).toBe(true)
+
+  expect(handler).toHaveBeenCalledTimes(1)
+  expect(handler).toHaveBeenCalledWith(event)
 })
 
 test('`fireEvent` returns false when prevented', () => {

src/fire-event.js

@@ -5,14 +5,14 @@ import { fireEvent as domFireEvent, createEvent } from '@testing-library/dom'
 export const fireEvent = (...args) => domFireEvent(...args)
 
 Object.keys(domFireEvent).forEach((key) => {
-  fireEvent[key] = (elem) => {
+  fireEvent[key] = (elem, init) => {
     // Preact registers event-listeners in lower-case, so onPointerStart becomes pointerStart
     // here we will copy this behavior, when we fire an element we will fire it in lowercase so
     // we hit the Preact listeners.
     const eventName = `on${key.toLowerCase()}`
     const isInElem = eventName in elem
     return isInElem
-      ? domFireEvent[key](elem)
-      : domFireEvent(elem, createEvent(key[0].toUpperCase() + key.slice(1), elem))
+      ? domFireEvent[key](elem, init)
+      : domFireEvent(elem, createEvent(key[0].toUpperCase() + key.slice(1), elem, init))
   }
 })