Testing de UI: probando estados de la interfaz

Clase 12 de 14 • Curso de Unit Testing en Vue.js 3

Martín Gerardo Suárez Hernández

student•

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

David Torres

student•

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

student•

<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

student•

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

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

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

Testing de UI: probando estados de la interfaz

Introducción

¿Por qué hacer testing en Vue.js?

Tipos de testing en Vue.js

Proyecto del curso: QR Generator App

Montando un componente

¿Qué se debe testear en Vue.js? Vue App y Vue Test

Una caja de arena: tu primera prueba en Vue.js

Probando dependencias de Vue

Shallow mount vs. mount

Wrapper: probando elementos y estados

Acciones y mocks

Prueba de eventos: ejecutando acciones en el componente

Mocks en Vue.js: interceptando funciones

Prueba de eventos emitidos entre múltiples componentes

Testing de UI: probando estados de la interfaz

Un paso adicional

Vue Test Coverage

Cierre

¿Quieres más cursos de testing en Vue?