Prueba de eventos: ejecutando acciones en el componente

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

Emilio Bonmatí

student•

Hola! Hice el test pata el button increment with value y este fue my resultado:

it('button incrementWith clicked should increment the state and it should be rendered with the input value', async () => {
    const wrapper = shallowMount(HelloWorld)

    const component = wrapper.find('#but-increment-value');

    const input =wrapper.find('#input-increment')
    input.setValue(5)

    await component.trigger('click')

    expect(wrapper.find('#header-counter').text()).toBe('counter: 5')
    expect(wrapper.vm.inputValue).toBe("5")
  })

Carlos Falconi

student•

Mi aporte, hay que entender bien el funcionamiento del contador para realizar la prueba; entonces el incremento con valor hará que el contador empiece en 0 y siga sumando según el valor propuesto, en este caso como ejemplo se coloca un 5, al hacer el primer clic el valor será 5, después 10 y así sucesivamente de 5 en 5.

La prueba lleva dos eventos de clic para verificar que llegue al 10.

describe('test on button value increment on hello world', ()=>{ it('check value input setting and its click event', async()=>{ const wrapper = shallowMount(HelloWorldVue); const component = wrapper.find('#but-increment-value'); const inputComponent = wrapper.find('#input-increment'); inputComponent.setValue(5); expect(wrapper.vm.inputValue).toBe('5'); await component.trigger('click'); await component.trigger('click'); expect (wrapper.find('#header-counter').text()).toBe('counter: 10'); expect(wrapper.vm.counter).toBe(10); }) })

Prueba de eventos: ejecutando acciones en el componente

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?