CODEWITHSUNDEEP
unit-testingvue.jsvuetify.js
user2850652
user2850652

Reputation: 179

unit testing vuetify component v-checkbox

I wanted to test v-checkbox component. Calling once trigger click will change the checkbox status checked.

  const flag = wrapper.find('.input-group--selection-controls__ripple')[0]
  flag.trigger('click')

Calling twice trigger click will not change checkbox status unchecked. How to implement?

  const flag = wrapper.find('.input-group--selection-controls__ripple')[0]
  flag.trigger('click')
  flag.trigger('click')

Upvotes: 0

Views: 3197

Answers (3)

amir karami
amir karami

Reputation: 29

Try this:

//in the component
<v-checkbox data-test="select-number"/>

//in the test use this 
const selectInput = wrapper.get('[data-test="select-number"]')
expect(selectInput.vnode.elm.checked).toBe(true)

Upvotes: 0

adamvaul
adamvaul

Reputation: 11

In order to get my test to work I also had to find the specific element below, but I did not need flushPromises(). Finding the right element with the class="input-group--selection-controls__ripple" was the key using the class selector below. That allowed the click event to update the binding I was trying to test. Simply finding the 

<v-checkbox class-"my-checkbox"/>

was not correct, as the click event didn't work on that element.

it('Does uncheck', async() => {
    // We need to drill down to the .input-group--selection-controls__ripple element so the click works
    const myCheckbox = wrapper.find('.my-checkbox').find('.input-group--selection-controls__ripple');
    myCheckbox.trigger('click');
    expect(wrapper.vm.someField).toEqual(false);
});

Upvotes: 1

tlbignerd
tlbignerd

Reputation: 1114

Try this:

const wrapper = shallowMount(Component)
// If data is loaded asynchronously, use flush-promises to wait for the data to load.
await flushPromises()
 // Find the delete button for the first to-do item and trigger a click event on it.
$emit('.input-group--selection-controls__ripple', event.target.checked)

Check out the Vue Test Utils guide and specifically the async behavior. Additionally, A gentle introduction to testing Vue applications is excellent.

Upvotes: 0

Related Questions