David Torres
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
Samuel Espinoza Figueroa
<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>
ALDO LORANCA MERITANO
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) })
