Hello, little update form my side:
I have found out how to set the new value inside inside the q-input: you need to find a regular input instead of a q-input instance:
it('sets a value correctly', async () => {
const input = wrapper.find('input[type=text]')
input.setValue('test 1')
expect(wrapper.vm.value).toBe('test 1')
}
This actually sets the text inside the q-input and also trigger the input event. Problems: if the q-input manages a prop directly (as in the example above), the test will pass, but Vue will complain with a:
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.
To avoid this, I have tried using data inside the q-input v-model instead of props directly:
<template>
<div>
<q-input v-model="text" @input="update()"></q-input>
</div>
</template>
<script>
export default {
name: 'QINPUT',
props: [ 'value' ],
data () {
return {
text: this.value
}
},
methods: {
update () {
this.$emit('input', this.text)
}
}
}
</script>
Note that here v-model=“text” instead of value. The effect is that the warning disappears, but after calling setValue(), the change is not propagated to wrapper.vm.value, even if I use await wrapper.vm.$nextTick()
and the test fails.
So I haven’t found a way to properly test components that modify an input. This is a pity because most of my components are actually editors of some type of information. This guide here doesn’t help either.