Hola, soy nuevo en broma y pruebas unitarias. Quiero preguntar cómo establecer la entrada de texto de valor usando vue test utils.
en breve tengo un componente personalizado para la entrada de texto, es mi código
<input v-model="local_value" @keyup.enter="submitToParent" :class="input_class" :id="id" :disabled="is_disabled" :maxlength="max_length" :placeholder="placeholder" :autocomplete="(is_autocomplete) ? 'on' : 'off'" :name="id" :ref="id" />y es mi prueba
it("type something on field", async () => { const wrapper = shallowMount(TextInput, { propsData: { id: "my_input", } }) // find component (its work properly) and I want to try inserting some text const input = wrapper.findComponent({ref: "my_input"}) input.element.value = "sample text" input.setValue("sample text") // the value still empty string (""), idk what happens with my code console.log(wrapper.vm.local_value) expect(wrapper.vm.local_value).toBe("sample text")por favor dígame si conoce la solución para este problema, gracias por su tiempo
Hasta donde yo sé, setValue es asíncrono, por lo que es posible que deba configurarlo con await input.setValue('sample text')
Si está configurando el valor local_value de vm, querrá configurarlo como:
const wrapper = shallowMount(TextInput) await wrapper.setData({ local_value: 'sample text' }) .... si el local_value se declara en data() , o:
const wrapper = shallowMount(TextInput) await wrapper.setProps({ local_value: 'sample text' }) ... si local_value se declara en props() en su componente.
Luego compruébalo con:
expect(wrapper.vm.local_value).toBe('sample text')Aunque ese es solo el valor de vm y no el valor representado en DOM.
Si desea verificar la inclusión del valor representado, primero debe declarar el value de la propiedad en su componente para que sea comprobable:
<input v-model="local_value" // ... rest of the properties :value="local_value" />y probarlo con:
const input = await wrapper.findComponent({ ref: "my_input" }) expect(input.attributes('value').toBe('sample text')Idealmente, su prueba se verá así:
it('should have input value' async () => { const wrapper = shallowMount(TextInput) await wrapper.setProps({ local_value: 'sample text' }) const input = await wrapper.findComponent({ ref: 'my_input' }) expect(wrapper.vm.local_value).toBe('sample text') expect(input.attributes('value').toBe('sample text') })👍 Un consejo:
Puede verificar la entrada de atributos representados comentando todos los expect y put:
expect(input.attributes('').toBe('random chars here to force an error')La consola mostrará los errores con la salida de atributos esperada