Feature request: PopStateEvent (and maybe WindowEventHandlers?)

[maisano]

Describe the feature you'd like:

In creating a custom router, I was adding some tests around popstate events, and reached for this in dom-testing-library, but noticed popstate was missing. I ended up doing this natively, but was wondering if you would accept a PR adding PopStateEvent. Optionally, we could add other WindowEventHandlers.

Suggested implementation:

Adding them is as simple as updating the eventsMap object in src/events. Testing them would require a bit of new code as they all emit from the window object, in lieu of arbitrary DOM nodes.

Describe alternatives you've considered:

Not doing this at all and instead using window.dispatchEvent(new window.PopStateEvent('popstate')); in my test.

Teachability, Documentation, Adoption, Migration Strategy:

This change would not require any large changes, but perhaps some additional documentation around availability.

[kentcdodds]

HI @maisano,

Sure! Any and all standard events are welcome. Honestly, we really should have them all in this map and if we don't then that can be considered a bug.

Would you like to make a pull request?

[bochap]

Hi @kentcdodds ,

I am wondering in the implementation will be a case of adding to the code

  // history events
  popState: {
    EventType: 'PopStateEvent',
    defaultInit: {bubbles: false, cancelable: false},
  },

after

dom-testing-library/src/events.js

Lines 337 to 340 in a2c3472

	lostPointerCapture: {
	EventType: 'PointerEvent',
	defaultInit: {bubbles: false, cancelable: false},
	},

and for the test will it be adding a test similar to

test('fires events on Window', () => {
  const messageSpy = jest.fn()
  window.addEventListener('message', messageSpy)
  fireEvent(window, new window.MessageEvent('message', {data: 'hello'}))
  expect(messageSpy).toHaveBeenCalledTimes(1)
  window.removeEventListener('message', messageSpy)
})

I will be happy to take this up if no one else is taking this. I wish to add the StorageEvent for the window as well and I will add file another issue for it.

Regards,
Darren

[bochap]

@kentcdodds

I was working on this and tried adding the following tests to check for the new event but it appears that it works fine without even adding the new event into the map . And I doing things wrong?

https://github.com/seetdev-opensource/dom-testing-library/blob/7dd4901dbfddb59db7a3408ad1d27fec16f762ec/src/__tests__/events.js#L330-L342

test('fires history event on Window', () => {
  const popStateSpy = jest.fn()
  window.addEventListener('popstate', popStateSpy)
  fireEvent(
    window,
    new window.PopStateEvent('popstate', {
      location: 'http://www.example.com/?page=1',
      state: {page: 1},
    }),
  )
  expect(popStateSpy).toHaveBeenCalledTimes(1)
  window.removeEventListener('popstate', popStateSpy)
})

[kentcdodds]

Yes, that's already supported. I think all that's left is making this work:

test('fires history event on Window', () => {
  const popStateSpy = jest.fn()
  window.addEventListener('popstate', popStateSpy)
  fireEvent.popState(
    window,
    {
      location: 'http://www.example.com/?page=1',
      state: {page: 1},
    },
  )
  expect(popStateSpy).toHaveBeenCalledTimes(1)
  window.removeEventListener('popstate', popStateSpy)
})

I'm not sure how necessary it is, but if you want to make it even easier than it is already, then adding popState to the events map would be welcome :)

[bochap]

Yes, that's already supported. I think all that's left is making this work:

test('fires history event on Window', () => {
  const popStateSpy = jest.fn()
  window.addEventListener('popstate', popStateSpy)
  fireEvent.popState(
    window,
    {
      location: 'http://www.example.com/?page=1',
      state: {page: 1},
    },
  )
  expect(popStateSpy).toHaveBeenCalledTimes(1)
  window.removeEventListener('popstate', popStateSpy)
})

I'm not sure how necessary it is, but if you want to make it even easier than it is already, then adding popState to the events map would be welcome :)

Thanks I was firing my event in the tests the wrong way. I was going fireEvent(window, instead of fireEvent.popState. Thanks for the pointers.

[kentcdodds]

🎉 This issue has been resolved in version 6.12.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[maisano]

Thanks y'all! @kentcdodds I might piggyback on this addition and add the rest of the events provided by WindowEventHandlers (hashchange, beforeunload, &c.) sometime soon.