¿Cómo hacemos testing en Gob.pe?

Como programadores, en nuestro día a día, estamos dedicados un 50% a escribir líneas de código y otro 50% a probar lo que hemos hecho. Pasan los días y, de pronto, tenemos una aplicación con 50 comportamientos distintos. ¿Cómo hacemos para probar cada uno? ¿Cómo nos aseguramos que nada se “rompa” al implementar algo nuevo?

Resulta imperativo automatizar las pruebas de modo que, luego de cualquier nuevo cambio en el código, tengamos la seguridad de que nada se ha roto y que todo funciona como el usuario final espera.

Una de las herramientas que me tocó probar es Cypress. Se trata de una herramienta de código abierto que funciona en el navegador (Browser) y simula las interacciones entre el Usuario y nuestra aplicación. De hecho, sigue la misma secuencia de pasos como: entrar a la página, llenar datos de un formulario, enviarlo y esperar una respuesta, como se puede observar en la imagen:

Cypress ejecutándose

Iniciaremos instalando Cypress

Tienes 3 maneras de hacerlo:

• Vía npm
• Vía yarn
• Descargando desde aquí

En nuestro caso lo instalaremos desde yarn, a continuación la explicación:

1. Abre una ventana de tu terminal y navega hasta la ruta de tu proyecto (cd/tu-proyecto) y ejecuta el siguiente comando: yarn add cypress --dev.
2. Puedes revisar tu archivo package.json y verás agregado Cypress.
3. Ahora abriremos Cypress desde la terminal. Ten en cuenta que tu proyecto debe estar ejecutándose a la par: yarn run cypress open.
4. Ahora se abrirá una ventana del navegador Chrome con una lista de ejemplos que trae Cypress, puedes ejecutar el que desees o todos los ejemplos para conocer de qué tratan.

Ejemplos que vienen por defecto al usar Cypress

Configuraremos nuestra estructura de archivos

Cypress contiene las siguientes carpetas: integration, fixtures, plugins, screenshots y support.

Como mencionamos anteriormente, Cypress es una herramienta de test de extremo a extremo por lo tanto para un mejor entendimiento cambiaremos el nombre de nuestra carpeta integration a e2e.

• Para que Cypress sepa dónde encontrar nuestro test configuraremos nuestro archivo cypress.json, agregando las siguientes líneas de código:

{   
   "integrationFolder": "cypress/e2e" 
}

En nuestra carpeta e2e crearemos un nuevo archivo llamado forms.spec.js, para nuestro test de formularios y agregaremos las siguientes líneas de código:

describe('Forms', () => {   
   it('Register form1', () => {   
     cy.visit('http://localhost:3000/')
       .get('#complaint_institution_id')
       .select('1')
       .get('#complaint_description')
       .click()             
   }) 
})

.visit(): visitará una URL específica.

.get(): selecciona un elemento basado en una clase CSS.

.select(): selecciona una opción dentro de una selección.

Es posible que tengamos más de una URL a visitar, entonces para no repetirla en todos los casos, configuraremos nuestro archivo cypress.js que por ahora se encuentra vacío, definiendo una ruta base:

{   
   "baseUrl": "http://localhost:3000" 
}

Así establecemos una URL base para acceder mejor.

Ahora nuestro archivo forms.spec.js tendrá un pequeño cambio en la ruta:

describe('Forms', () => {   
   it('Register form1', () => {
     cy.visit('/')   
   }) 
})

Probaremos usando un plugin para nuestra carga de archivos

1. Primero lo instalamos: en tu terminal ejecuta el siguiente comando: npm install --save-dev cypress-file-upload.
2. Ahora importarlo a tu archivo command.js que se encuentra en la ruta cypress/support/commands.js: import 'cypress-file-upload';.
3. Para usarlo, agregamos el siguiente código:

const fileName = 'data.json';      cy.fixture(fileName).then(fileContent => {     
   cy.get('[data-cy="dropzone"]').upload(       
     { 
        fileContent,         
        fileName,          
        mimeType: 'application/json'        
     },       
     { subjectType: 'drag-n-drop' },     
   );   
});

Tenemos una lista detallada de plugins que nos pueden ayudar aquí.

Si ya tienes un proyecto con Cypress solo tienes que ejecutar desde tu terminal:

yarn install: para que se ejecute tu archivo package.json .

yarn run cypress open: para que se ejecute Cypress.

Ahora solo nos queda usarlo a la par con cada uno de nuestros proyectos y olvidarnos de las preocupaciones.

Gracias a Cristiam Castillo y Marieth Perez por las revisiones y correcciones de este artículo.