QUnit/OPA/Karma – Vol 2 – Automatización de test

Introducción

Segundo volumen, así que no nos vamos andar con rodeos y vamos a ver como lanzamos QUnit de manera automática. Hoy os presento Karma, un test runner que nos ayudará con nuestras aplicaciones UI5.

Si no sabes como crear test unitarios usando QUnit no te preocupes, la entrada anterior lo explica: qunit opa karma vol 1 test unitarios de ui5

Mediante Karma podemos ejecutar de manera automática test mediante QUnit o OPA. No es exclusivo para estas dos tecnologías pero nos centraremos en ellas.

Como veis dejaré para el final la parte de test automáticos usando OPA para mantener la emoción hasta el final.

Vamos a ver como configurar el entorno de manera rápida y fácil.

Instalando las dependencias

Lo primero para utilizar Karma es instalar sus dependencias, esto se puede hacer de manera manual utilizando NPM o de manera «automatica» utilizando el fichero de configuracion package.json de nuestro proyecto (que también utilizará NPM).

Así que lo primero es asumir que tenemos NPM instalado en nuestra máquina, sino es así, a pocos clics lo puedes tener https://nodejs.org/es/download/

Instalación manual

Lo primero es instalar el cliente de karma que nos permitirá importar frameworks e instrucciones

npm install --global karma-cli

Una vez instalado nos vamos a nuestro proyecto (a la raiz) y instalamos las dependencias:

npm install karma
npm install karma-ui5
npm install karma-chrome-launcher

La primera es el core de Karma, la segunda instalación permite tener la personalización para SAPUI5 y la tercera nos permite tener el lanzador automático para chrome.

La última que vamos a instalar es una extra para poder ejecutar los test sin tener que abrir el navegador. Esto será útil para ejecutar los test en fondo (por ejemplo desde Jenkins)

npm install chromium
-- o también puedes usar en linux
npm install puppeteer

Todo listo para el siguiente paso (si has decidido instalar de manera manual el próximo punto lo tendrás ya hecho, aunque es mas recomendable que este.

Instalación automática

Lo mismo que en el punto anterior lo podemos hacer de manera «automática» mediante el fichero de configuración package.json. Lo primero es crear el fichero package.json (si ya lo tienes puedes ahorrarte este paso)

npm init --yes

Una vez realizado, puedes instalar como antes las librerias

npm install --save-dev karma
npm install --save-dev karma-ui5
npm install --save-dev karma-chrome-launcher

o añadirlas a tu fichero package.json:

"devDependencies": {
...
	"karma": "^4.4.1",
	"karma-chrome-launcher": "^3.1.0",
	"karma-coverage": "^2.0.2",
	"karma-ui5": "^2.2.0",
	"rimraf": "^3.0.2",
...
}

--------- y una vez añadidas ejecutar el comando
npm install

Acuerdate, como en el caso anterior que si quieres ejecutar los test en fondo lo mejor es instalar:

npm install chromium
-- o también puedes usar en linux
npm install puppeteer

Ahora si, todo instalado. vamos a montar el fichero de Karma y a ejecutar el test construido en el post anterior.

Configurando Karma

EL mundo de Karma es bastante completo, aquí veremos la configuración basica para ejecutar los test de QUnit y OPA.

Lo que vamos a hacer es crear un fichero en la raiz de nuestro proyecto llamado «karma.conf.js»

En el fichero añadiremos la configuración básica:

module.exports = function(config) {
	"use strict";

	var chromeFlags = [
		"--window-size=1280,1024"
	];

	config.set({

		frameworks: ["ui5"],

		browsers: ["ChromeHeadless"],

		browserConsoleLogOptions: {
			level: "error"
		},

		customLaunchers: {
			CustomChrome: {
				base: "Chrome",
				flags: chromeFlags
			},
			CustomChromeHeadless: {
				base: "ChromeHeadless",
				flags: chromeFlags
			}
		},

	});
};

Básicamente lo que hemos hecho es añadir las configuraciones necesarias para ejecutar Karma, entre ellas destaca:

• chromeFlags: Permite fijar la resolución de pantalla (útil para entornos responsive donde quieres que aparezcan o no campos en función de la longitud).
• frameworks: Aquí añadimos que Karma utilice el framework de UI5.
• browsers: Podemos ejecutar en varios navegadores nuestros test para ver la compatibilidad, en este caso hemos puesto solo chrome sin interfaz gráfica.

Una vez creado el fichero de configuraciones vamos a por el fichero que indica donde se encuentran los test. En la misma raíz del proyecto crearemos un nuevo fichero llamado karma-ci.conf.js

module.exports = function(config) {
	"use strict";

	require("./karma.conf")(config);
	config.set({

		preprocessors: {
			"{webapp,webapp/!(test)}/*.js": ["coverage"]
		},

		coverageReporter: {
			includeAllSources: true,
			reporters: [
				{
					type: "html",
					dir: "coverage"
				},
				{
					type: "text"
				}
			],
			check: {
				each: {
					statements: 100,
					branches: 100,
					functions: 100,
					lines: 100
				}
			}
		},

		reporters: ["progress", "coverage"],

		browsers: ["CustomChromeHeadless"],

		singleRun: true

	});
};

En este fichero nos fijamos sobre todo en preprocessors donde se indica el patrón a utilizar para encontrar nuestros juegos de prueba. En nuestro caso vamos con todo y ejecutamos todos los test QUnit y OPA.

Nos queda un último punto que nos ayudará posteriormente a la ejecución de los test. En nuestro fichero package.json añadiremos la siguiente instrucción:

"scripts": {
...
	"karma-ci": "rimraf coverage && karma start karma-ci.conf.js",
	"test": "npm run karma-ci",
...

Esto permitirá ejecutar las sentencias de test de manera cómoda. El primer comando «rimraf» nos será útil para limpiar las carpetas generadas por la prueba.

Ejecutando Karma

Ahora si, ha llegado el momento de ejecutar nuestro comando mágico, en nuestra consola ejecutaremos

npm test

Tan fácil como esto, y ya tendremos nuestro resultado de los test

Un tema interesante es ver el grado de cobertura de nuestros test. En este caso, de nuestros dos controladores, solo he ejecutado los test para uno de ellos, ¿podéis adivinar cuál?

Esto lo conseguimos gracias a las opciones activadas de «coverage».

---

Hasta aquí la explicación de cómo funciona Karma, como veis, empezamos a tener algo con bastante entidad. Lo próximo será integrar OPA para las pruebas integradas así cerraremos el ciclo del testing.

Como siempre suscribete y comparte en redes para ayudar este blog. Como ves, he añadido publicidad en el Blog, ha sido una cosa muy meditada, pero me ayudará a sufragar parte del coste del hosting.