Dom-testing-library: Add fullscreenchange event support

[yordis]

Describe the feature you'd like:

I would like to use fire the fullscreenchange event.

import { fireEvent } from '@testing-library/react';

fireEvent.fullscreenchange(...);

Suggested implementation:

Describe alternatives you've considered:

I tried this

const event = new CustomEvent('fullscreenchange', {
    detail: {
      target: window.document.body,
    },
  });
document.dispatchEvent(event);

Maybe have some nice API for any custom event (beside supporting fullscreenchange) for future proof ❓

Teachability, Documentation, Adoption, Migration Strategy:

[eps1lon]

The fireEvent part needs to be added to https://github.com/testing-library/dom-testing-library/blob/60b65f577595b04fdfbfe35f9bf0094c56fb5f99/src/events.js#L1.

As to manually dispatching this element I'm not sure where the issue is. Could you add a codesandbox with manually dispatching this event in the browser vs. jsdom?

[yordis]

@eps1lon https://codesandbox.io/s/twilight-pond-5pxc5?fontsize=14&hidenavigation=1&theme=dark

I am trying to test that useFullscreen hook for a package that I wrote, but I got nowhere trying to fire off Fullscreen API.

I mocked fscreen dependency, but then I couldn't figure out how to fire up the event manually, which I am not sure if you can do that in the browser honestly.

[eps1lon]

Let's start with the browser case: I think you're better off writing an integration test here. Write a component that uses the hook as you envisioned it and then test that one. Then you don't need to fire these events manually and concern yourself with event system intricacies or if the event order is even possible in the real-world etc. https://codesandbox.io/s/naughty-mccarthy-39vs2 illustrates this.

I think there's also a dedicated library to testing hooks where you would call the methods imperatively. That would be closer to what you could consider a unit test.

Then you have to consider the common jest + jsdom case: jsdom does not implement the fullscreen API. If you're interested in testing this in jsdom you should open an issue there.

[kentcdodds]

Hi folks 👋 Thanks for the issue and discussion here.

I agree with @eps1lon. I think we'd be fine to add the event, so feel free to do that if you feel so inclined, but I don't know the best way to test this.

Maybe have some nice API for any custom event

I don't see any API we could make that would work in between dispatchEvent and fireEvent. In fact, we do have fireEvent(element, event) so you could use that 🤷‍♂️

Outside of that, I think we'll go ahead and close this issue. Thanks everyone :)