Testing de UI: probando estados de la interfaz
Contenido del curso
Montando un componente
Acciones y mocks
Un paso adicional
Cierre
Testing de UI: probando estados de la interfaz
Testing de UI: probando estados de la interfaz
Contenido del curso
Quedaria de la siguiente manera:
it('the button is disabled by default', async () => { const wrapper = shallowMount(QRCodeInput) const btnComponent = wrapper.find('#btn-generate') // Se revisa que el componente no tiene el atributo expect(!btnComponent.attributes().disabled).toBeDefined() btnComponent.trigger('click') // Luego de hacer click con el trigger el componente ya tienen el atributo por el cambio en la variable qrCodeInput expect(btnComponent.attributes().disabled).toBeDefined() })
No se VUE pero siguiendo el patrón que vi del disabled, escribí esto y me funciono
:class="qrCodeInput == '' ? 'bg-red-900 m-4 p-2 rounded-md text-white text-sm' : 'bg-indigo-600 m-4 p-2 rounded-md text-white text-sm'"
y el testing fue muy parecido al ejemplo de la clase solo que llame a toContain() y le di la clase del bg-red
<button id="btn-generate" :disable="qrCodeInput === ''" :class="qrCodeInput !== '' ? 'bg-indigo-600 m-4 p-2 rounded-md text-white text-sm' : 'bg-white-600 m-4 p-2 rounded-md text-black text-sm'" v-on:click="sendQRCode()">Generar QR</button>
Sería algo asi:
it('the button is disabled by default and then change it to not disabled because there is some value on input', async() => { const wrapper = shallowMount(QRCodeInput) // Se busca el boton y se checa que la propiedad // disabled este definida además de que este bloqueada 'true' const btnComponent = wrapper.find('#btn-generate') expect(btnComponent.attributes().disabled).toBeDefined() expect(btnComponent.element.disabled).toEqual(true) // Se busca el input y se coloca un texto y se verifica que si exista el texto // en el input const urlText = "www.platzi.com" const inputComponent = wrapper.find('#txt-qr-code') inputComponent.setValue(urlText) expect(wrapper.vm.qrCodeInput).toBe('www.platzi.com') // Revisamos que el boton ahora ya esta habilidado 'false' await wrapper.vm.$nextTick() expect(btnComponent.element.disabled).toEqual(false) })