Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 24, 2022
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions src/__tests__/events.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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)

Expand All @@ -169,9 +172,9 @@ test('onInput works', () => {
test('calling `fireEvent` directly works too', () => {
Copy link
Member

@JoviDeCroock JoviDeCroock May 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add a test specifically for the issue tagged here or is that one not intended to be solved by this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added those to the big list of tests, they should be covered, they were just missing before. With this bug they would have passing tests anyway.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The other related issue, I think the bottom issue in open was about events that were already covered in this test suite too. All passed.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated the description to link to the issue as that was missing

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be worth adding reverse tests? I dont know if if thats a thing but we could write tests that check 'onpointerenter' in dom and once they fail, we'd know we could delete these patches?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would leave them out for now

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Worth adding them in another pr? Like I said, looking for ways to contribute

const handler = jest.fn()

const { container: { firstChild: button } } = render(
(<button onClick={handler} />)
)
const {
container: { firstChild: button }
} = render(<button onClick={handler} />)

expect(fireEvent(
button,
Expand Down
18 changes: 18 additions & 0 deletions src/fire-event.js
Original file line number Diff line number Diff line change
@@ -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
// wae 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))
}
})
7 changes: 5 additions & 2 deletions src/pure.js
Original file line number Diff line number Diff line change
@@ -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 => {
Expand Down Expand Up @@ -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 }