mercredi 3 avril 2019

el-checkbox cannot be set checked with jest or at least no change on v-model

I'm setting up some tests for my vuejs website. I'm using element-ui. I'm trying jest on my connection page. I have a checkbox linked to a "remember me". I'd to check it and check if the value of the v-model changed.

Unfortunately, it doesn't.

In my connection file, I've the checkbox :

...
  <el-checkbox v-model="connectionForm.rememberme"></el-checkbox>
...

And the rememberme variable :

...
  data() {
    return {
      connectionForm: {
        ...
        rememberme: false
      },
...

My test file :


describe('Connection', () => {
  const wrapper = mount(Connection)

  it('checkbox click', () => {
    expect(wrapper.vm.connectionForm.rememberme).toBe(false)

    expect(wrapper.contains('el-checkbox')).toBe(true)
    const elCheckbox = wrapper.find('el-checkbox')

    elCheckbox.element.selected = true;
    elCheckbox.setChecked(true)
    expect(wrapper.vm.connectionForm.rememberme).toBe(true)
  })
})


 FAIL  frontend/components/user/sessions/New.test.js
  Connexion
    ✓ has a el-button (4ms)
    ✕ checkbox click (10ms)

  ● Connexion › checkbox click

    [vue-test-utils]: wrapper.setChecked() cannot be called on this element

      25 | 
      26 |     elCheckbox.element.selected = true;
    > 27 |     elCheckbox.setChecked(true)
         |                ^
      28 |     expect(wrapper.vm.connexionForm.rememberme).toBe(true)
      29 |   })
      30 | })


doc checkbox

So, I changed the setChecked(true) with a .trigger('click'), still nothing. So, I changed 'click' to 'change', but still not working...

 FAIL  frontend/components/user/sessions/New.test.js
  Connexion
    ✓ has a el-button (4ms)
    ✕ checkbox click (10ms)
  ● Connexion › checkbox click

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      26 |     elCheckbox.element.selected = true;
      27 |     elCheckbox.trigger('change')
    > 28 |     expect(wrapper.vm.connectionForm.rememberme).toBe(true)
         |                                                  ^
      29 |   })
      30 | })
      31 | 





Aucun commentaire:

Enregistrer un commentaire