Prueba de eventos emitidos entre múltiples componentes

Montando un componente

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

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

Prueba de eventos emitidos entre múltiples componentes

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?