Gitlab CI: Añade tests a tus pipelines y obtén un reporte de la cobertura

Recientemente he estado trabajando en diferentes proyectos mejorando sus tests unitarios y de aceptación, por lo que decidí mostrar el reporte de coverage en el CI de Gitlab. Los badges creo que son una funcionalidad muy interesante, ya que da visibilidad al porcentaje de cobertura que tienen nuestros tests en cada proyecto.

Por defecto Gitlab muestra este porcentaje en cada pipeline o merge request (MR), pero puedes crear tu propio badge y añadirlo al README o a la descripción del proyecto.

En mi caso tengo un Gitlab CE (Community Edition) en un servidor privado, pero este tutorial sirve para cualquier versión. Vamos a ver cómo se hace 😉

1. Actualiza tu .gitlab-ci.yml

El primer paso es activar el CI/CD en tu proyecto. Para ello tienes que crear el fichero .gitlab-ci.yml en el directorio raíz del proyecto. Si quieres puedes ponerlo en otra ubicación, pero tendrás que actualizar la configuración general del proyecto.

Como ejemplo voy a utilizar una etapa de tests para un proyecto en Node + Jest, pero realmente puedes utilizar cualquier otro lenguaje o biblioteca de testing. Simplemente tienes que reemplazar los comandos que se ejecutan por los que necesites.

stages:

- test

test-api:
stage: test
image: node:12.13-alpine
services: - name: mongo:3.6
alias: mongodb
script: - cd api - npm ci - npm run test:coverage
coverage: /All files[^|]_\|[^|]_\s+([\d\.]+)/

Explicación

El primer paso es definir las etapas de nuestro pipeline en Gitlab CI. Cada etapa agrupará una serie de jobs. Las etapas se ejecutan de forma secuencial, mientras que los jobs se ejecutan en paralelo.

El nombre del job encargado de ejecutar los tests es test-api. La sección script contiene los comandos, que se ejecutan dentro de una imagen de Docker definida con image: node:12.13-alpine. Esto es así ya que configuré un runner de Gitlab con soporte para Docker.

En este caso los tests necesitan una base de datos MongoDB para los tests de integración. Con Gitlab CI puedes levantar servicios utilizando la sección services, donde name es el nombre de la imagen de Docker, y alias es el nombre del host con el que conectarnos.

Por último, dentro de la sección script ejecuto una serie de comandos: me muevo al directorio api, instalo las dependencias necesarias para el proyecto y finalmente ejecuto los tests (npm run tests:coverage es un alias para npx jest --verbose --coverage).

La parte más importante es el atributo coverage, que define una expresión regular con la que extraer la cobertura del reporte de los tests. En mi caso está configurada para usar Jest, pero puedes utilizar cualquier otra.

Con estos simples pasos puedes tener tu propio reporte de cobertura en Gitlab.

2. Actualiza tu README.md

Puedes añadir un badge a tu README que muestre el porcentaje de cobertura de los tests, lo que hace que quede mucho más pro. Lo primero que tienes que hacer es añadir el reporte de cobertura a tu CI, tal y como hemos visto en el paso anterior. Una vez listo, es tan sencillo como añadir la siguiente URL a tu README.

![coverage](https://<gitlab server>/<project namespace>/<project>/badges/<branch>/coverage.svg)

Esto mostrará un badge con la media de los valores de todos los jobs que tengan el atributo coverage configurado. En mi caso, prefiero que se muestre el porcentaje de cobertura de un job en particular. La solución es tan sencilla como añadir el parámetro ?job=<job name> a la URL anterior, por ejemplo:

![coverage](https://mygitlab.com/pirobtumen/pirobits/badges/master/coverage.svg?job=test-api)

¡Fácil!

3. Actualiza la configuración del proyecto

Otro sitio donde podemos añadir este badge es en los metadatos del proyecto. Para que salga en esta sección, simplemente tenemos que ir a "Settings -> General -> Badges" y rellenar los datos que pide:

Que básicamente son:

• El nombre del badge.
• El enlace al que llevará el badge si clickamos.
• La URL de la imagen (aquí va el enlace generado anteriormente).

Por ejemplo:

https://<gitlab server>/<project namespace>/<project>/badges/<branch>/coverage.svg

Por último, no olvides de leer la documentación oficial de Gitlab CI.