Testing de UI: probando estados de la interfaz

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()
})

<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)
  })