added fireEvent util

[jomaxx]

What: added fireEvent utility

Why: #5

How: src/events.js

Checklist:

• Documentation
• Tests
• Ready to be merged
• Added myself to contributors table

[kentcdodds]

Wow! This is so great!

Looks like this is missing some coverage

If you could open coverage/lcov-report/index.html locally and see what we're missing then add some tests to cover those that'd be super. Thank you!

[kentcdodds]

This code is very similar throughout the test file. Could we extract it to a "testEvent" function?

function testEvent({eventName, elementType}) {
  const node = document.createElement(elementType)
  const spy = jest.fn()
  node.addEventListener(eventName.toLowerCase(), spy)
  fireEvent[eventName](node)
  expect(spy).toHaveBeenCalledTimes(1)
}

Then most of the tests could be dramatically simplified to something like:

describe('Clipboard Events', () => {
  ;['copy', 'paste'].forEach(
    eventName => {
      it(`fires ${eventName}`, () => {
        testEvent({eventName, elementType: 'input'})
      })
    },
  )
})

Alternatively it may even not be a bad idea to abstract it further:

const eventTypes = [
  {type: 'Clipboard', events: ['copy', 'paste'], elementType: 'input'},
  {
    type: 'Composition',
    events: ['compositionEnd', 'compositionStart', 'compositionUpdate'],
    elementType: 'input',
  },
  // etc...
]

eventTypes.forEach(({type, events, elementType}) => {
  describe(`${type} Events`, () => {
    events.forEach(eventName => {
      it(`fires ${eventName}`, () => {
        const node = document.createElement(elementType)
        const spy = jest.fn()
        node.addEventListener(eventName.toLowerCase(), spy)
        fireEvent[eventName](node)
        expect(spy).toHaveBeenCalledTimes(1)
      })
    })
  })
})

I think doing this will make it easier to add cases and know which tests are for one-off situations 👍 It will also make this file shorter probably :)

[kentcdodds]

Whoops, meant that review to be "Request changes" 😅

[sompylasar]

Is this okay to be done in the module scope rather than in a function?

[jomaxx]

i'll move the document.body.appendChild call to mount

[sompylasar]

And also add the mirroring removeChild to unmount then?

[sompylasar]

const Event = global.Event missing?

[kentcdodds]

Also, we should probably do:

const g = typeof window === 'undefined' ? global : window

And then reference g instead. That way this runs in the browser properly as well.

[antsmartian]

May be we need to have these test cases in react-testing-library? I'm just wondering because, anyway people are gonna use dom-testing-library for several frameworks (angular,preact,vue etc), do we have to add those frameworks testing here in future too?

[antsmartian]

Also by moving it to react-testing-library, I guess people have good chance of looking at these test cases and understanding how to test events with react. Want to see, what others think..

[sompylasar]

Also moving it to react-testing-library will move the respective package dependencies that don't make sense in just the dom-testing-library

[antsmartian]

Yes, also what we have created in src/__tests__/helpers/react.js is already part of react-testing-library (render,unmount).

[kentcdodds]

Personally I think it'd be better if we could avoid react in here and have a simple render method that creates DOM nodes manually. It doesn't need to be complicated.

[jomaxx]

makes sense, i can open a PR to react-testing-library as well. there are a couple events we'll need to fallback to triggering synthetic events for (change, select, mouseenter, mouseleave) so I'll add that logic there

[kentcdodds]

Perfect. Thanks a bunch @jomaxx. This is so great!

[sompylasar]

there are a couple events we'll need to fallback to triggering synthetic events for (change, select, mouseenter, mouseleave) so I'll add that logic there

@jomaxx Could you please clarify about synthetic events? How does Cypress handles these events from within the browser?

[jomaxx]

@sompylasar let's move discussion about synthetic events to testing-library/react-testing-library#48

[kentcdodds]

This is awesome! Thanks so much for adding this!

[kentcdodds]

Thanks so much for your help! I've added you as a collaborator on the project. Please make sure that you review the other/MAINTAINING.md and CONTRIBUTING.md files (specifically the bit about the commit messages and the git hooks) and familiarize yourself with the code of conduct (we're using the contributor covenant). You might also want to watch the repo to be notified when someone files an issue/PR. Please continue to make PRs as you feel the need (you can make your branches directly on the repo rather than your fork if you want). Thanks! And welcome to the team :)

[kentcdodds]

🎉 This PR is included in version 1.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀