Integrar un proyecto Angular con codecov

En el artículo para configurar la integración continua de un proyecto en GitHub actions mencioné codecov.io, y en el presente artículo pretendo dar un poco de luz sobre esta herramienta y de cómo la pueden utilizar en vuestros proyectos.

¿Qué es codecov?

Codecov es una herramienta que permite integrar repositorios desde GitHub, GitLab o Bitbucket y a su vez hacer un seguimiento detallado de el coverage de los mismos, así como provee de funcionalidades para alertarnos sobre posibles problemas o decrecimientos alarmantes del coverage en el proyecto.

Esta herramienta se integra activamente con los proyectos de manera que ante cualquier alarma puede dejar comentarios en los Merge Requests. Otro uso interesante para el cual es también utilizado es para compartir en el README.md del proyecto un badge con el coverage actual.

Codecov es completamente gratis si es utilizada en proyectos opensource. Para proyectos privados o pequeños equipos, tienen otras ofertas que pueden ser encontradas en este link.

Por otra parte, codecov soporta una gran variedad de lenguajes de programación, por lo que los pasos que se describirán en el presente artículo de cómo integrar un proyecto Angular con codecov, pueden ser perfectamente replicados a otros proyectos.

Crear un proyecto y configurar pruebas

Con vistas a enfocar el artículo más a el tema de la integración con codecov, que en la creación de un proyecto nuevo, se creará un proyecto por defecto de Angular. Crear un proyecto en Angular es relativamente fácil ejecutando en el terminal el siguiente comando:

ng new codecov-example

Creado el proyecto, agreguemos al package.json el comando para generar el reporte de los test:

{
  ...
  "scripts": {
    ...
    "test:cov": "ng test --code-coverage --no-watch --no-progress --browsers=ChromeHeadlessCI"
  },
  ...
}

Faltaría configurar que en el reporte del coverage se genere también el coverage en formato lcov. En el caso de karma es tan sencillo como adicionar a los reports los siguiente

module.exports = function (config) {
  config.set({
    ...
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/codecov-example'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' },
        { type: 'lcov' }, // agregar esta línea
      ]
    },
    browsers: ['Chrome', 'ChromeHeadless', 'ChromeHeadlessCI'], // agregar ChromeHeadlessCI
    ...
  });
};

Hecho esto, ya todo está listo para integrar el proyecto a codecov.

Integrar las pruebas del proyecto con codecov

Para integrar vuestros proyectos a codecov lo primero que necesitan es hacerse una cuenta en el mismo. Para esto pueden hacerlo por medio de vuestra cuenta de github.

Codecov automáticamente sincronizará todos vuestros repositorios en la plataforma. Dentro de la pantalla inicial pueden ir al apartado de los repositorios no configurados y seleccionar el proyecto que creamos anteriormente en github (en mi caso wil92/codecov-example).

Y con esto ya podemos subir de manera manual, el primer coverage del proyecto a codecov, solo necesitamos copiar el token que nos brinda codecov justo luego de agregar el repositorio.

En este punto lo que quedaría, es ejecutar el siguiente comando utilizando el token brindado por codecov, y el script hará la magia.

npm run test:cov
CODECOV_TOKEN=************* codecov

Nota: Recuerda que antes de ejecutar el comando anterior, necesitas subir los últimos cambios al github y para ejecutar el script debes instalarlo de la siguiente manera: npm install -g codecov.

Integrar GitHub action con codecov

Si en el paso anterior lograste correctamente subir tu primer coverage, pues ahora necesitas hacer exactamente lo mismo pero desde un pipeline en github. A diferencia del método anterior, donde necesitas tener el script de codecov y ejecutarlo de manera local, ahora esto se ejecutará automáticamente cuando subas el código a github.

Lo primero que necesitas, es crear el archivo .github/workflows/pipelines.yml. Puedes utilizar la configuración siguiente:

name: Run test-coverage

on: [ push]

jobs:

  test:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js 14.x
        uses: actions/setup-node@v2
        with:
          node-version: 14.x

      - name: Install codecov dependency
        run: npm install -g codecov

      # pipeline actions
      - run: npm run test:cov
      - run: codecov
        env:
          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

Adicionar coverage a nuestro README

Ya integrado el proyecto con codecov pues podemos agregar el badge del coverage en el README. Esto es sencillo de hacer dado que el mismo codecov brinda esta imagen.

Agrega el link del badge en el README.md y ya puedes en tiempo real, mostrar el coverage de tu proyecto en la descripción del mismo.

Enlaces

wil92/codecov-example: Repositorio en github de referencia.
codecov.io

Conclusiones

Listos para configurar todos sus proyectos con codecov. Pues espero que así como yo lo hago, utilicen esta increíble herramienta en todos sus repositorios opensource. En no más de 20 minutos puedes parecer un poquito más profesional al agregar coverage en tus proyectos y hacer pensar a los demás desarrolladores que realmente escribes tests. Pero serio, espero les sea útil este artículo.