Thanks to visit codestin.com
Credit goes to github.com

Skip to content

docs: click event without change event does not update checkbox value without attachTo: document.body #1470

@cefn

Description

@cefn

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.

image

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.21
  • Vue version: 3.2.31
  • node version: v16.14.2
  • npm (or yarn) version: pnpm --version is 6.32.10

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions