From 61ac9a72cbf75392b68cd5539058659b4aff1b13 Mon Sep 17 00:00:00 2001
From: DanielMaczak <daniel.maczak@proton.me>
Date: Sat, 13 Apr 2024 15:27:39 +0200
Subject: [PATCH 1/4] 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
---
 src/__tests__/events.js | 35 +++++++++++++++++++++++++++++++++--
 src/fire-event.js       | 12 ++++++++++--
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/events.js b/src/__tests__/events.js
index 3cea179..c722ef2 100644
--- a/src/__tests__/events.js
+++ b/src/__tests__/events.js
@@ -1,5 +1,6 @@
 import { createRef, h } from 'preact'
 import { fireEvent, render } from '..'
+import { forwardRef } from 'preact/compat'
 
 const eventTypes = [
   {
@@ -180,6 +181,30 @@ test('onInput works', () => {
   expect(handler).toHaveBeenCalledWith(expect.objectContaining(otherProperties))
 })
 
+test.only('calling `fireEvent` with `preact/compat` and onChange works too', () => {
+  const handler = jest.fn()
+
+  // forwardRef needs to be imported from preact/compat for this test to make sense.
+  // Preact behavior when using onChange is described here:
+  // https://preactjs.com/guide/v10/differences-to-react#use-oninput-instead-of-onchange
+  // We want to test if onChange event gets caught 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))
+})
+
 test('calling `fireEvent` directly works too', () => {
   const handler = jest.fn()
 
@@ -200,8 +225,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)
diff --git a/src/fire-event.js b/src/fire-event.js
index 161b2d6..b004d1b 100644
--- a/src/fire-event.js
+++ b/src/fire-event.js
@@ -11,8 +11,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. This is normally handled directly
+    // but when running 'preact/compat' this is done via custom JS which renames the event prop,
+    // making the event name out of sync.
+    // The problematic code is in: preact/compat/src/render.js > handleDomVNode()
+    const keyFiltered = key === 'change' ? 'input' : 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)
+      )
   }
 })

From 01e933688e5a49539abdf8d178eac48bf606ab4b Mon Sep 17 00:00:00 2001
From: DanielMaczak <daniel.maczak@proton.me>
Date: Sat, 13 Apr 2024 16:50:37 +0200
Subject: [PATCH 2/4] 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
---
 src/__tests__/events-compat.js | 27 +++++++++++++++++++++++++++
 src/__tests__/events.js        | 25 -------------------------
 src/fire-event.js              |  1 +
 3 files changed, 28 insertions(+), 25 deletions(-)
 create mode 100644 src/__tests__/events-compat.js

diff --git a/src/__tests__/events-compat.js b/src/__tests__/events-compat.js
new file mode 100644
index 0000000..916e88a
--- /dev/null
+++ b/src/__tests__/events-compat.js
@@ -0,0 +1,27 @@
+import { h } from 'preact' // required by render
+import { fireEvent, render } from '..'
+import { forwardRef } from 'preact/compat' // required for this test to make sense
+
+test('calling `fireEvent` with `preact/compat` and onChange works too', () => {
+  const handler = jest.fn()
+
+  // forwardRef needs to be imported from preact/compat for this test to make sense.
+  // Preact behavior when using onChange is described here:
+  // https://preactjs.com/guide/v10/differences-to-react#use-oninput-instead-of-onchange
+  // We want to test if onChange event gets caught 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))
+})
diff --git a/src/__tests__/events.js b/src/__tests__/events.js
index c722ef2..8fc2e65 100644
--- a/src/__tests__/events.js
+++ b/src/__tests__/events.js
@@ -1,6 +1,5 @@
 import { createRef, h } from 'preact'
 import { fireEvent, render } from '..'
-import { forwardRef } from 'preact/compat'
 
 const eventTypes = [
   {
@@ -181,30 +180,6 @@ test('onInput works', () => {
   expect(handler).toHaveBeenCalledWith(expect.objectContaining(otherProperties))
 })
 
-test.only('calling `fireEvent` with `preact/compat` and onChange works too', () => {
-  const handler = jest.fn()
-
-  // forwardRef needs to be imported from preact/compat for this test to make sense.
-  // Preact behavior when using onChange is described here:
-  // https://preactjs.com/guide/v10/differences-to-react#use-oninput-instead-of-onchange
-  // We want to test if onChange event gets caught 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))
-})
-
 test('calling `fireEvent` directly works too', () => {
   const handler = jest.fn()
 
diff --git a/src/fire-event.js b/src/fire-event.js
index b004d1b..1d2104c 100644
--- a/src/fire-event.js
+++ b/src/fire-event.js
@@ -16,6 +16,7 @@ Object.keys(domFireEvent).forEach((key) => {
     // making the event name out of sync.
     // The problematic code is in: preact/compat/src/render.js > handleDomVNode()
     const keyFiltered = key === 'change' ? 'input' : key
+
     return isInElem
       ? domFireEvent[keyFiltered](elem, init)
       : domFireEvent(

From 0d957cf5f85d0190f1342867f994e8f62a83ed22 Mon Sep 17 00:00:00 2001
From: Daniel Maczak <daniel.maczak@proton.me>
Date: Wed, 17 Apr 2024 08:02:57 +0200
Subject: [PATCH 3/4] refactor: simplify imports

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

Co-authored-by: Ryan Christian <33403762+rschristian@users.noreply.github.com>
---
 src/__tests__/events-compat.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/events-compat.js b/src/__tests__/events-compat.js
index 916e88a..31bc63f 100644
--- a/src/__tests__/events-compat.js
+++ b/src/__tests__/events-compat.js
@@ -1,14 +1,12 @@
 import { h } from 'preact' // required by render
 import { fireEvent, render } from '..'
-import { forwardRef } from 'preact/compat' // required for this test to make sense
+import from 'preact/compat'
 
 test('calling `fireEvent` with `preact/compat` and onChange works too', () => {
   const handler = jest.fn()
 
-  // forwardRef needs to be imported from preact/compat for this test to make sense.
-  // Preact behavior when using onChange is described here:
-  // https://preactjs.com/guide/v10/differences-to-react#use-oninput-instead-of-onchange
-  // We want to test if onChange event gets caught with fireEvent.change()
+  // 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} />)

From 68e5b9eda132eaebf6e8308631c274d82cc90ce4 Mon Sep 17 00:00:00 2001
From: DanielMaczak <daniel.maczak@proton.me>
Date: Wed, 17 Apr 2024 08:39:45 +0200
Subject: [PATCH 4/4] 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
---
 src/__tests__/events-compat.js |  2 +-
 src/__tests__/events.js        |  2 +-
 src/fire-event.js              | 20 +++++++++++++++++---
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/events-compat.js b/src/__tests__/events-compat.js
index 31bc63f..9687a4e 100644
--- a/src/__tests__/events-compat.js
+++ b/src/__tests__/events-compat.js
@@ -1,6 +1,6 @@
 import { h } from 'preact' // required by render
 import { fireEvent, render } from '..'
-import from 'preact/compat'
+import 'preact/compat'
 
 test('calling `fireEvent` with `preact/compat` and onChange works too', () => {
   const handler = jest.fn()
diff --git a/src/__tests__/events.js b/src/__tests__/events.js
index 8fc2e65..f2ece94 100644
--- a/src/__tests__/events.js
+++ b/src/__tests__/events.js
@@ -30,7 +30,7 @@ const eventTypes = [
   },
   {
     type: 'Focus',
-    events: ['input', 'invalid'],
+    events: ['input', 'invalid', 'change'],
     elementType: 'input'
   },
   {
diff --git a/src/fire-event.js b/src/fire-event.js
index 1d2104c..217462e 100644
--- a/src/fire-event.js
+++ b/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,11 +26,10 @@ 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. This is normally handled directly
-    // but when running 'preact/compat' this is done via custom JS which renames the event prop,
+    // 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 = key === 'change' ? 'input' : key
+    const keyFiltered = !isCompat ? key : renameEventCompat(key)
 
     return isInElem
       ? domFireEvent[keyFiltered](elem, init)