.type doesn't work with vue-testing-library

[afontcu]

Hi! First of all, thank you for your work on this repo!

I wanted to highlight that the current implementation of .type() isn't working when used with vue-testing-library.

Not quite sure why yet thou, I believe it has something to do with using fireEvent.change instead of fireEvent.input here. I have passing tests using fireEvent.input, and the minute I change them to use .change, they start failing. Is there any reason to prefer change event over input?

Thanks!

[Gpx]

Hi, user-event is only tested with React at the moment for the simple reason that it's what I use at work. I would be keen to add tests that cover other frameworks.

I think the difference between input and change is that in React you have two separate handlers for them: onInput and onChange. I also never seen anyone using onInput.

I don't really know how it works in Vue-land. Is it possible that you have this distinction too?

[afontcu]

Hi! Thanks for answering.

Vue also maps native events such as Input and Change. However, input is the most widely used in Vue world. It is even used in the built-in v-model feature, which is just syntax sugar to create a two-way binding of an input value.

[Gpx]

Since we're trying to simulate a browser I think we should fire both events instead of replacing it.
Right now type is firing keydown -> change -> keyup. We should change it to be keydown -> input -> change -> keyup

[afontcu]

AFAIK (and correct me if I'm wrong), change should only be emitted after moving away from the input.

Note: The input event is fired every time the value of the element changes. This is unlike the change event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like. (source)

If that's the case, would it make sense send an input event for every char, and then send a change event with the whole string?

keydown
input "h"
keyup
keydown
input "i"
keyup
change "hi"

[Gpx]

AFAIK (and correct me if I'm wrong), change should only be emitted after moving away from the input.

That's what happens for native HTML but not in React. I think in React change and input are behaving the same except React will fire both of them

[afontcu]

Oh wow you're right, I didn't know that, thanks.

I feel Vue works similary to native HTML (see demo) so yeah, an input event would do the trick :)

I'll happily submit a PR if you feel that that's the apropiate change (no pun intended).

[Gpx]

You man a PR to replace the vent or to add it?

[afontcu]

(sorry for the late response!)

Whatever works best in both frameworks. I guess we could add it, so the workflow would be keydown -> input -> change -> keyup.

[Gpx]

Do you think you could add tests for Vue? Basically, porting the ones we have but render Vue components instead of React. I think we need to have those in place before we start thinking about cross-library support

[afontcu]

Makes total sense! Will work on that :)

[Gpx]

Thank you 👍

[calebeby]

Whatever works best in both frameworks. I guess we could add it, so the workflow would be keydown -> input -> change -> keyup.

Can I open a PR to add this? It doesn't look like anyone else got to it yet 👀

[afontcu]

Hi @calebeby! As @Gpx suggested, I opened a (draft) PR to add Vue tests #129 to user-event, which will create a solid starting point to develop cross-library features :)

[calebeby]

@afontcu Awesome! I have local changes that make the input and change events fire like they do when a user types, so I'll pull in your new tests soon!

I might also add tests for vanilla JS. I'm using Preact, which, unlike React, actually adds a change event listener when you use onChange. So AFAIK Preact will work the same as Vue does ✔️

I think we need to have those in place before we start thinking about cross-library support

LOL I missed this line while I was skimming through this issue 🙈

I was able to modify this library locally to make onInput work correctly in Preact (tests on master still pass ✅):

• Replace fireEvent.change references with fireEvent.input within the type function
• At the end of the type method after all the letters are typed in, attach a blur listener to the element. When that fires, call fireEvent.change. This slightly differs from native browser behavior because it fires regardless of whether the contents are different.

[mxstbr]

@calebeby I am also using Preact, any chance that PR is somewhere? 🙏

[calebeby]

@Gpx do you think you could review my 4 open PR's pretty soon? I'd love to continue moving forward with making user-event compatible with all libraries 🎉

@mxstbr Opened PR for that just now ✔️ #141

[afontcu]

I guess this can be closed now :)

[dilraj-vidyard]

I am still having issues typing things into inputs and editiblecontents.

I made a comment here: #141 (comment)

These are the packages I'm using to do typing and to render my component:

import userEvent from '@testing-library/user-event';
import { mount } from '@vue/test-utils';