Can't trigger a second click on a Vuetify checkbox.

[joshfoskett]

Version

1.0.0-beta.15

Reproduction link

https://codesandbox.io/s/8yypln8828

Steps to reproduce

File Editor > src > components > HelloWorld.spec.js

The spec includes:

• Test on a single Vuetify checkbox (passes).
• Test on a dynamic checkbox (passes).
• Test on a dynamic Vuetify checkbox (fails).

What is expected?

When a click event is triggered on the Vuetify checkbox, the related model should change from undefined to true. Then when the second click event is triggered on the same Vuetify checkbox, the related model should change from true to false.

What is actually happening?

When a click event is triggered on the Vuetify checkbox, the related model changes from undefined to true. However, when the second click event is triggered on the same Vuetify checkbox, the related model doesn't change from true to false like you'd expect.

---

I ran into this issue when upgrading from 1.0.0-beta.12 (where it worked as expected) to 1.0.0-beta.15. So my assumption is that this is at least in someway related to vue-test-utils, and maybe not a Vuetify specific issue. Or maybe there's a preferred way to accomplish this, and my method just so happened to work in 1.0.0-beta.12, but not anymore.

Here's the actual component:
https://github.com/vuetifyjs/vuetify/tree/dev/src/components/VCheckbox

[eddyerburgh]

This is a bug caused by setting watchers to sync. I'm looking into a fix, one solution is a change to Vue core—vuejs/vue#8200

The temporary solution is to use Vue.nextTick and set sync to false to make sure Vue is behaving correctly with updates:

test('use Vue.nextTick', (done) => {
  const wrapper = mount(TestComponent, { sync: false })
  wrapper.trigger('click')
  Vue.nextTick(() => {
    expect(wrapper.text()).toBe('updated')
    done()
  })
})