fix: onchange event with preact/compat enabled (#72)

* fix: fireEvent doesnt mirror onChange behavior when using preact/compat

this fix aligns this library with testing-library for React where fireEvent.change() works as expected

* refactor: move onChange test to separate file

onChange test requires import from preact/compat which affects other tests in the same test file so I moved it to separate file

* refactor: simplify imports

replace unnecessary forwardRef import with general preact/compat; improve commentary

Co-authored-by: Ryan Christian <[email protected]>

* fix: apply aliasing only when preact/compat is used

prevent applying aliasing when compat library is not used; add change event to basic event tests to ensure both cases work

---------

Co-authored-by: Ryan Christian <[email protected]>

Author: DanielMaczak

src/__tests__/events-compat.js

@@ -0,0 +1,25 @@
+import { h } from 'preact' // required by render
+import { fireEvent, render } from '..'
+import 'preact/compat'
+
+test('calling `fireEvent` with `preact/compat` and onChange works too', () => {
+  const handler = jest.fn()
+
+  // Preact only matches React's aliasing of `onChange` when `preact/compat` is used
+  // This test ensures this is supported properly with `fireEvent.change()`
+  const {
+    container: { firstChild: input }
+  } = render(<input type="text" onChange={handler} />)
+
+  const targetProperties = { value: 'a' }
+  const otherProperties = { isComposing: true }
+  const init = {
+    target: targetProperties,
+    ...otherProperties
+  }
+
+  expect(fireEvent.change(input, init)).toBe(true)
+
+  expect(handler).toHaveBeenCalledTimes(1)
+  expect(handler).toHaveBeenCalledWith(expect.objectContaining(otherProperties))
+})

src/__tests__/events.js

@@ -30,7 +30,7 @@ const eventTypes = [
   },
   {
     type: 'Focus',
-    events: ['input', 'invalid'],
+    events: ['input', 'invalid', 'change'],
     elementType: 'input'
   },
   {
@@ -200,8 +200,14 @@ test('calling `fireEvent` directly works too', () => {
 })
 
 test('`fireEvent` returns false when prevented', () => {
-  const { container: { firstChild: button } } = render(
-    (<button onClick={(e) => { e.preventDefault() }} />)
+  const {
+    container: { firstChild: button }
+  } = render(
+    <button
+      onClick={(e) => {
+        e.preventDefault()
+      }}
+    />
   )
 
   expect(fireEvent.click(button)).toBe(false)

src/fire-event.js

@@ -1,4 +1,19 @@
 import { fireEvent as domFireEvent, createEvent } from '@testing-library/dom'
+import { options } from 'preact'
+
+let isCompat = false
+
+//  Detects if preact/compat is used
+const oldHook = options.vnode
+options.vnode = (vnode) => {
+  if (vnode.$$typeof) isCompat = true
+  if (oldHook) oldHook(vnode)
+}
+
+//  Renames event to match React (preact/compat) version
+const renameEventCompat = (key) => {
+  return key === 'change' ? 'input' : key
+}
 
 // Similar to RTL we make are own fireEvent helper that just calls DTL's fireEvent with that
 // we can that any specific behaviors to the helpers we need
@@ -11,8 +26,16 @@ Object.keys(domFireEvent).forEach((key) => {
     // we hit the Preact listeners.
     const eventName = `on${key.toLowerCase()}`
     const isInElem = eventName in elem
+    // Preact changes all change events to input events when running 'preact/compat',
+    // making the event name out of sync.
+    // The problematic code is in: preact/compat/src/render.js > handleDomVNode()
+    const keyFiltered = !isCompat ? key : renameEventCompat(key)
+
     return isInElem
-      ? domFireEvent[key](elem, init)
-      : domFireEvent(elem, createEvent(key[0].toUpperCase() + key.slice(1), elem, init))
+      ? domFireEvent[keyFiltered](elem, init)
+      : domFireEvent(
+        elem,
+        createEvent(keyFiltered[0].toUpperCase() + keyFiltered.slice(1), elem, init)
+      )
   }
 })