Aunque Polymer incluye la librería Web Component Tester para facilitarnos la tarea de desarrollar tests, no incluye la función de cobertura de los mismos. Sin embargo, existe una versión de Web Component Tester que integra Istanbul.
En esta guía muestro cómo instalar y configurar dicha librería.
Instalación
Instalamos el plugin de Istanbul y el web-component-tester modificado para funcionar con el plugin:
npm i -g t2ym/web-component-tester#wct6-plugin npm i -g t2ym/web-component-tester-istanbul#0.10.1-wct6.1
Por último, instalamos el web-component-tester modificado como dependencia bower:
bower i --save-dev t2ym/web-component-tester#wct6-plugin
Configuración
Web-component-tester-istanbul no proporciona cobertura sobre ficheros html, por lo que será necesario extraer el código javascript de nuestros componentes a un fichero javascript.
Creamos un fichero con el nombre wct.conf.js en el directorio raíz del componente y con el siguiente formato:
module.exports = {
verbose: true,
plugins: {
local: {
browsers: ['chrome', 'firefox', 'safari']
},
istanbul: {
dir:'./coverage',
reporters: ['text-summary', 'lcov'],
include: ['**/*.js'],
exclude: ['/!(nuestro-componente)/**/*.js'],
thresholds: {
global: {
statements:80,
branches: 80,
lines: 80,
functions: 80
}
}
}
}
}
La parte que nos interesa es la referente al plugin de istanbul:
dir
Directorio en el cuál se almacenarán los ficheros resultado del reporte.
reporters
Listado de formatos que queremos utilizar a la hora de mostrar el resultado de los tests. El valor por defecto es ‘text‘. Nosotros añadiremos ‘text-summary‘, que además del resultado de los tests en formato texto, nos mostrará el porcentaje de cobertura y ‘lcov‘, el cuál nos generará un reporte más detallado en html.
include
Listado de ficheros a incluir en los tests. Incluimos todos los ficheros javascript, después excluiremos los que no nos interesen.
exclude
Listado de ficheros a excluir de los tests. En el ejemplo excluimos todos los ficheros javascript que no estén en el directorio raíz de nuestro componente.
thresholds
Nos permitirá determinar el umbral mínimo a partir del cuál consideramos que la cobertura de los tests es suficiente.
Ejecución de los tests
Tras la instalación y configuración solo nos queda ejecutar los tests. Para ello, basta con lanzar el comando wct desde el directorio de nuestro componente y deberíamos ver algo como lo siguiente:
Si queremos ver el resultado de los tests con más detalle, accedemos al directorio que indicamos en la configuración para guardar el reporte, en nuestro caso «coverage«. Dentro de éste, abrimos el fichero «lcoverage-report/index.html» en el navegador y nos mostrará lo siguiente:
Podemos navegar entre los directorios y ficheros para llegar al que nos interesa, que es el fichero javascript de nuestro componente. Aquí podremos ver qué sentencias, ramas, líneas y funciones no se han ejecutado:
Y esto es todo. Happy testing!
