-
Notifications
You must be signed in to change notification settings - Fork 267
Description
Describe the bug
A click() on an input[type="checkbox"]
in @vue/test-utils
doesn't seem conformant with Chrome. It doesn't cause a change to the vm instance's boolean ref, which is bound by v-model
. A watcher of that ref gets no update notification when the checkbox gets a click.
The expected behaviour (that 'click' changes the ref, hence triggers a watcher) CAN be proven interactively in Chrome with this component mounted in a Vite app. It can be proven by either clicking the input or calling .click()
on the element from the console. In the Vite-hosted App.vue the selectionHandler
watcher of the bound boolean is simply console.log
and behaves as expected - reporting the boolean value on every click.
To Reproduce
See the repro at cefn/vite-reactive-repro#3 based off the automated Vue3+Typescript scaffolding created by an out-of-the-box Vite project. You can observe the correct behaviour in Chrome by running pnpm install
then pnpm run dev
and experiment interactively in the browser. You can observe the broken @vue/test-utils
behaviour by running pnpm run test
.
Expected behavior
I expected the @vue/test-utils
test at bad0970 to pass. I expected to be able to call just await containerCheckbox.trigger("click")
in order for a v-model bound boolean variable change to propagate to the watcher. I didn't expect to need to explicitly call await containerCheckbox.trigger("change")
to double-announce the change.
The missing change
event is likely a regression as I discovered this when migrating components and their tests from Vue2, so it could be an obstacle for those upgrading and who assume click
will cause change
.
We need to port lots of components and having @vue/test-utils
align with the behaviour of the previous version will help us with migration.
Related information:
@vue/test-utils
version: 2.0.0-rc.21Vue
version: 3.2.31node
version: v16.14.2npm
(oryarn
) version:pnpm --version is 6.32.10