Contenido del curso
Montando un componente
Acciones y mocks
Un paso adicional
Cierre
Prueba de eventos emitidos entre múltiples componentes
Uriel Solis Salinas
EstudianteContenido del curso
Prueba de eventos emitidos entre múltiples componentes
Uriel Solis Salinas
EstudianteCódigo de la clase con apuntes:
describe('triggers and mocks', () => { describe('triggers click in qr code button and the event it is called', () => { const spySendQRCode = jest.spyOn(QRCodeInput.methods, 'sendQRCode') // Se crea un spy para el método sendQRCode. const wrapper = shallowMount(QRCodeInput) // Se crea el componente. const txtComponent = wrapper.find('#txt-qr-code') // Se busca el elemento con ese id. const qrCode = 'www.platzi.com' // Se crea un valor para el input. txtComponent.setValue(qrCode) // Se le asigna un valor al input. it('the send qr code function it is beign called', async () => { const btnComponent = wrapper.find('#btn-generate') // Se busca el elemento con ese id. await btnComponent.trigger('click') // Se dispara el evento click en el botón. expect(spySendQRCode).toHaveBeenCalledTimes(1) // Se comprueba que el método se llamó una vez. // toHaveBeenCalledTimes(n) comprueba que el método se llamó n veces. expect(wrapper.emitted()).toHaveProperty('qrCodeInput') // Se comprueba que el método se llamó con el parámetro qrCodeInput. // wrapper.emitted() devuelve un objeto con los eventos que se dispararon en el componente. // toHaveProperty('qrCodeInput') comprueba que el objeto tiene la propiedad qrCodeInput. expect(wrapper.emitted('qrCodeInput')).toHaveLength(1) // Se comprueba que el evento qrCodeInput se llamó una vez. // wrapper.emitted('qrCodeInput') devuelve un array con los parámetros que se le pasaron al evento qrCodeInput. // toHaveLength(n) comprueba que el array tiene n elementos. expect(wrapper.emitted('qrCodeInput')[0]).toStrictEqual([qrCode]) // Se comprueba que el evento qrCodeInput se llamó con el parámetro qrCode. // wrapper.emitted('qrCodeInput')[0] devuelve el primer elemento del array. // toStrictEqual([qrCode]) comprueba que el array tiene el elemento qrCode. }) }) })