Agrega pruebas de integración con Cypress

Para llevar a cabo pruebas de end-to-end testing necesitamos una herramienta que simule la interacción de los usuarios con el navegador. Afortunadamente, nuestro proyecto de Sapper ya incluye Cypress.

Antes de comenzar a correr las pruebas con Cypress, es necesario instalarlo con todas sus dependencias necesarias.

Nota: Si utilizas un Windows, te recomiendo utilizar WSL (Windows Subsystem for Linux) que te permite tener una instancia de Ubuntu en tu sistema operativo Windows y ejecutar comandos de GNU/Linux.

Instalación de Cypress:

sudo apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

Una vez instalado las dependencias necesarias debemos de instalar Cypress en nuestro proyecto:

npm install cypress --save-dev

Ahora ya estamos listos para ejecutar las pruebas por defecto que trae nuestro proyecto:

npm run test

Cómo hacer testing de nuestro proyecto

Para agregar más pruebas a nuestro proyecto debemos ubicar la carpeta y el archivo "cypress/integration/spec.js" donde corren las pruebas actuales. Edítalo y agrega tus pruebas.

Las pruebas escritas en Cypress están diseñadas para ser fáciles de leer y comprender. Agreguemos una nueva prueba para verificar que tenemos la sección de newsletter en el home de nuestro sitio. Para eso abrimos el archivo "cypress/integration/spec.js", comenzamos editando la línea número 6 y agregamos nuestra propia prueba.

it('Check Newsletter section', ()  =>  {
   cy.contains('h4', 'NEWSLETTER')
});

Ahora corremos nuestras pruebas con el comando:

npm run test

Si quieres aprender más acerca de Cypress y cómo agregar integraciones a tus proyectos para probar su flujo de trabajo, te recomiendo los cursos de End to End Testing con Cypress e Introducción a Selenium con Python que están disponibles con tu suscripción de Platzi.