test: 💍 add Vue tests for type, dblclick, selectoptions

[afontcu]

Hi! 👋 this is a PR to add additional tests for Vue.

• Add tests for dblclick
• Add tests for selectoptions
• Add tests for type
• (upstream) fix VTL so it doesn't mutate DOM Testing Library' fireEvent methods.
• Fix preventDefault test for type

I can't seem to find the way to make the preventDefault test pass (link). Any help would be greatly appreciated!

Apart from that, I've only noticed small differences from React tests:

• focus event isn't being emitted twice on selectoptions (link).
• input/change events (link).

I guess @calebeby might want to take a look at this, too :)

[codecov]

Codecov Report

Merging #153 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #153   +/-   ##
=======================================
  Coverage   96.58%   96.58%           
=======================================
  Files           1        1           
  Lines         117      117           
  Branches       27       27           
=======================================
  Hits          113      113           
  Misses          4        4

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c5df100...32aad7e. Read the comment docs.

[calebeby]

Yeah I can take a look this afternoon (PST)

[calebeby]

Sorry, I totally forgot to look at this, I finally remembered today!

I can't seem to find the way to make the preventDefault test pass

As far as I can tell this is because @testing-library/vue overrides @testing-library/dom's fireEvent.* methods, making them return Promise<void> rather than boolean. So whenever we import @testing-library/vue, user-event has no way of knowing whether the fired events were canceled via preventDefault()

Relevant @testing-library/vue code: https://github.com/testing-library/vue-testing-library/blob/master/src/vue-testing-library.js#L96

[calebeby]

It's frustrating that @testing-library/vue mutates the fireEvent provided by @testing-library/dom rather than leaving the original object alone and re-exporting its own modified copy. Maybe that change could be made to @testing-library/vue?

[afontcu]

Thank you for your insights. It makes sense. In order to test it out, I've awaited all fireEvent calls in user-event, and then awaited userEvent.type. It made the failing test pass.

I'm gonna open up a PR in VTL to propose the change you suggested. I just noticed that RTL is exporting its own version of fireEvent, instead of polluting the one from DTL.

Thanks! 🙌

---

Update: loading a non-modifying version of VTL into user-event also makes tests pass :)

---

Update 2: PR in VTL is here.

[afontcu]

Update: VTL 2.0 has been released, and after the update, preventDefault test started passing 🙌 huge props to @calebeby for pointing out the design flaw in VTL.

[Gpx]

Thank you both for this 🎉

[Gpx]

🎉 This PR is included in version 5.0.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀