fix(tests and events): resolves unsupported events and passing tests (#57)

* fix(tests and events): resolves unsupported events and passing tests

* Update src/pure.js

Co-authored-by: Jovi De Croock <[email protected]>

* Update src/file-event.js

Co-authored-by: Jovi De Croock <[email protected]>

* fix(tests and events): rename file

* Update src/fire-event.js

typo

Co-authored-by: Jovi De Croock <[email protected]>

Co-authored-by: Jovi De Croock <[email protected]>

Author: mikerob215

src/__tests__/events.js

@@ -125,15 +125,18 @@ const eventTypes = [
     type: 'Transition',
     events: ['transitionEnd'],
     elementType: 'div'
+  },
+  {
+    type: 'Pointer',
+    events: ['pointerEnter', 'pointerLeave'],
+    elementType: 'div'
   }
 ]
 
-eventTypes.forEach(({
-  type, events, elementType, init
-}) => {
+eventTypes.forEach(({ type, events, elementType, init }) => {
   describe(`${type} Events`, () => {
     events.forEach((eventName) => {
-      const eventProp = `on${eventName.toLowerCase()}`
+      const eventProp = `on${eventName[0].toUpperCase() + eventName.slice(1)}`
 
       it(`triggers ${eventProp}`, () => {
         const ref = createRef()
@@ -157,9 +160,9 @@ eventTypes.forEach(({
 test('onInput works', () => {
   const handler = jest.fn()
 
-  const { container: { firstChild: input } } = render(
-    (<input type="text" onInput={handler} />)
-  )
+  const {
+    container: { firstChild: input }
+  } = render(<input type="text" onInput={handler} />)
 
   expect(fireEvent.input(input, { target: { value: 'a' } })).toBe(true)
 
@@ -169,9 +172,9 @@ test('onInput works', () => {
 test('calling `fireEvent` directly works too', () => {
   const handler = jest.fn()
 
-  const { container: { firstChild: button } } = render(
-    (<button onClick={handler} />)
-  )
+  const {
+    container: { firstChild: button }
+  } = render(<button onClick={handler} />)
 
   expect(fireEvent(
     button,

src/fire-event.js

@@ -0,0 +1,18 @@
+import { fireEvent as domFireEvent, createEvent } from '@testing-library/dom'
+
+// 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
+export const fireEvent = (...args) => domFireEvent(...args)
+
+Object.keys(domFireEvent).forEach((key) => {
+  fireEvent[key] = (elem) => {
+    // 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))
+  }
+})

src/pure.js

@@ -1,6 +1,7 @@
 import { getQueriesForElement, prettyDOM, configure as configureDTL } from '@testing-library/dom'
 import { h, hydrate as preactHydrate, render as preactRender } from 'preact'
-import { act, setupRerender } from 'preact/test-utils'
+import { act } from 'preact/test-utils'
+import { fireEvent } from './fire-event'
 
 configureDTL({
   asyncWrapper: async cb => {
@@ -106,5 +107,7 @@ function cleanup () {
   mountedContainers.forEach(cleanupAtContainer)
 }
 
+// eslint-disable-next-line import/export
 export * from '@testing-library/dom'
-export { render, cleanup, act }
+// eslint-disable-next-line import/export
+export { render, cleanup, act, fireEvent }