Pruebas de integración con Cypress

Se usa Cypress para ejecutar pruebas de integración. A diferencia de las pruebas unitarias en el frontend, estas pruebas se ejecutan sobre un navegador real (actualmente Chrome) e interactúan con la aplicación de forma similar a un usuario (esto es, haciendo clic en botones, escribiendo con un teclado simulado y revisando si el elemento X es visible en la página).

Abajo se muestra un único testcase, con anotaciones. El testcase simula las llamadas API, de forma que no es necesario tener todo el servidor en ejecución. El testcase selecciona un elemento, verifica que contenga un cierto texto, busca un botón dentro del elemento, hace clic en el botón y verifica que la nueva ventana que se muestra contenga cierto texto (en este caso, partes de información que deben aparecer en un Vuelo completo).

Ejecución de las pruebas

Las pruebas de integración pueden ejecutarse con npm run test:e2e en la carpeta app/frontend. Esto inicia el servidor de Vue y abre una ventana de Cypress. Desde esta ventana, se puede ejecutar un único archivo de pruebas, para mayor velocidad, o todas las pruebas. Los tests se ejecutan automáticamente cada vez que se cambia un archivo, de forma que es posible editar el código en paralelo con las pruebas.

Estructura de las pruebas

Cypress organiza los tests en test suites, cada uno para una funcionalidad específica. Las partes principales de una suite son:

• Una función beforeEach, que contiene el código que debe ejecutarse antes de cada prueba. En la mayoría de los casos contendrá una invocación a cy.login("admin"), que visita la página de login e inicia sesión.
• Varios casos de prueba en invocaciones a it("test case description", () => { body(); });. Cada uno de los casos de prueba, a su vez, tendrá las siguientes partes:
  • Configuración de URLs simuladas, de forma que los requests que normalmente se envían al backend sigan funcionando. Si uno de estos requests retorna JSON, se pueden usar fixtures para no escribir todo el JSON en el test, y reusar la misma respuesta entre varios tests.
  • (Opcional) Aserciones sobre el estado inicial de la página: Aquí hay una lista de aserciones comunes, y aquí hay información sobre la forma de seleccionar los elementos.
  • Interactuar con la página: por ejemplo, seleccionar y hacer clic en un botón con .click(), o rellenar un formulario con .type("whatever") y hacer clic en el botón para enviarlo.
  • Esperar a que las llamadas a la API mas importantes se resuelvan
  • Realizar aserciones sobre el estado final de la página: por ejemplo, verificar que el nombre del vuelo retornado por la API esté visible en la página.
  • Realizar aserciones sobre las llamadas a la API: por ejemplo, verificar que los headers contengan la información de autenticación necesaria, o que el JSON enviado en el cuerpo del request contenga los datos escritos en el formulario.