No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Prep谩rate para tu pr贸ximo empleo comprando hoy a precio especial

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

7 D铆as
19 Hrs
59 Min
56 Seg

Testing de UI: probando estados de la interfaz

12/14
Recursos

Aportes 3

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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=鈥渂tn-generate鈥 :disable=鈥渜rCodeInput === 鈥樷欌 :class=鈥渜rCodeInput !== 鈥樷 ? 鈥榖g-indigo-600 m-4 p-2 rounded-md text-white text-sm鈥 : 鈥榖g-white-600 m-4 p-2 rounded-md text-black text-sm鈥欌 v-on:click=鈥渟endQRCode()鈥>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)
  })