Vue-test-utils: Add setChecked and setValue methods

[eddyerburgh]

What problem does this feature solve?

Changing the value so that the v-model is updated can be confusing:

const input = wrapper.find('input[type="text"]')
input.element.value = 'some value' // input element value is changed, v-model is not
input.trigger('input') // v-model updated

const radioInput = wrapper.find('input[type="radio"]')
radioInput.element.checked = true // input element value is changed, v-model is not
radioInput.trigger('input') // v-model not updated
radioInput.trigger('change') // v-model updated

What does the proposed API look like?

const input = wrapper.find('input[type="text"]')
input.setValue('some value')
const radioInput = wrapper.find('input[type="radio"]')
radioInput.setChecked()
const option = wrapper.find('option')
option.setSelected()

[14nrv]

Hi, you should take a look to mwangaben-vthelpers which provides some helpers for vue-test-utils like b.type(text, selector) :

type(text, input) {
  let node = this.find(input)
  node.element.value = text
  node.trigger('input')
}

[38elements]

IMHO,
Since type reminds keydown-event, I think that type is not appropriate.

[beyersito]

@eddyerburgh are you working on this? If not I believe I can do it

[eddyerburgh]

@beyersito I'm not currently working on it, it would be great if you could :)

[beyersito]

@eddyerburgh Will do then, I'll start with setValue

[beyersito]

I've started with setValue, I would be great if you could check if I started correctly.

I have a few doubts:

1. setValue could work on the following inputs: text like inputs (text, email, ...), select, checkbox. The triggered event will follow v-model source.

2. setChecked could work on radios and in checkboxes receiving a boolean parameter.

3. Should it validate that the wrapper is compatible with the method?

4. What to do if the wrapper is a component

Sorry to bother this much

Thanks!

[eddyerburgh]

1. I think it should work on all text control inputs, although I've only tested text and email. Can you check which elements it works on? Here's a full list of input types—https://html.spec.whatwg.org/multipage/input.html#attr-input-type-keywords

2. Yes, setChecked should take a boolean

3. Yes, it should throw an error if the wrapper element won't be affected

4. A component wrapper always contains an element, so it should behave the same way.