Añadiendo informe de cobertura de los tests ejecutados dentro de un contenedor Docker

Después de publicar el informe del resultado de los tests, en la siguiente iteración conseguimos añadir la cobertura de código a dicho informe. Para ello, lo primero que extendimos es la configuración del test runner “Karma” para añadir el plugin adecuado:

1
2
3
4
5
6
7
8
9
[...]
plugins: [
   [...]
   require('karma-coverage-istanbul-reporter')
],
coverageIstanbulReporter: {
    reports: ['html', 'lcov', 'cobertura'],
    fixWebpackSourcePaths: true
}

Además, tendremos que modificar el package.json para instalar el plugin de karma:

1
2
3
4
5
[...]
"devDependencies": {
   [...]
   "karma-coverage-istanbul-reporter": "^1.2.1"
}

Y añadir el parámetro –code-coverage al script npm de que ejecuta los tests:

1
2
3
4
5
[...]
"scripts": {
   "test": "ng test --code-coverage -sm=false --config ./karma.conf.js"
   [...]
}

Cuando se ejecuten los tests dentro de nuestro contenedor Docker, tendremos que copiar también la carpeta que genera el plugin de Karma (coverage) al path de salida de nuestros tests, donde previamente hemos montado el volumen. Modificamos nuestro Dockerfile:

1
2
3
[...]
COPY --from=build /build/coverage ./coverage
[...]

Dentro del pipeline de Azure DevOps, deberemos añadir la task correspondiente para publicar el informe de cobertura, simplemente referenciando el path donde se han generado los archivos en el paso anterior (dist/test/coverage):

Publish code coverage task

Como podéis observar, tuvimos que ejecutar un script antes de la tarea de publicación, porque el archivo principal que contiene la información de la cobertura (cobertura-coverage.xml), referencia a los distintos ficheros de código a partir de una ruta principal, desde la que luego monta las rutas relativas:

Cobertura coverage XML file

Como hemos ejecutado los tests dentro un contenedor Docker, la ruta que genera es errónea (/build), y tenemos que modificarla dentro de este archivo mediante un script bash para que apunte al directorio donde realmente tenemos nuestos ficheros de código:

1
2
currentPathEscapingSlashes=${PWD//'/'/'\/'}
sudo sed -i "s/\/build/${currentPathEscapingSlashes}/g" dist/test/coverage/cobertura-coverage.xml

En el script partimos de la ruta actual mediante la variable PWD, por lo que es importante especificar el path desde el que ejecutamos el script.

Y después de todo este proceso, por fin podremos visualizar el informe de cobertura:

Code coverage report