Refrescando los apuntes de testing automático en SAPUI5 (Parte 4) – Karma

Ahora que ya tenemos el servidor local a pleno rendimiento, que podemos ejecutar test unitarios y integrados a demanda, vamos a desvincularnos del navegador.

Bien, esta afirmación no es 100% cierta… ya que el navegador lo necesitaremos igual, pero vamos a ejecutar una version «light» del navegador.

Aunque esta entrada pretende hacer una ejecución en fondo, también podemos utilizar Karma para realizar test con diferentes navegadores para verificar la compatibilidad de nuestra aplicación con distintos navegadores.

Como las entradas anteriores, esta es una actualización de la antigua serie de testing:

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

Empezamos como siempre con los preparativos.

Preparando el proyecto

Vamos a instalar las librerías necesarias para ejecutar Karma, las instalaremos en modo local ya que no las necesitamos para entornos productivos. Pero antes, tendremos que instalar el «cliente» de karma.

Para ello, ejecutamos este comando:

npm install --global karma-cli

Una vez instalado, procedemos con la instalación de las librerías que necesitamos en desarrollo:

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

Tambien añadiremos unas cuantas librerías de soporte de Karma:

npm install karma-coverage --save-dev

Por último instalamos el navegador:

npm install chromium

Ya tenemos el entorno apunto para poder lanzar los test, ahora solo nos falta añadir el fichero de configuración y el script.

Añadiendo la configuración

Ahora vamos a añadir la configuración, que también se simplificará respecto a la anterior entrada.

Lo primero sera añadir en la raíz del proyecto el fichero karma-ci.conf.js :

En este fichero añadiremos el siguiente código:

module.exports = function(config) {
	config.set({
  
      reporters: ['progress','coverage'],
      


	  frameworks: ["ui5"],
	  browsers: ['ChromeHeadless'],
  
	  ui5: {
        configPath: 'ui5-local.yaml'//,
        //testpage: 'webapp/test/integration/opaTests.qunit.html' // Solo OPA
	  },
   
      browserConsoleLogOptions: {
        level: 'error'
      }
	  
  });
};

Fijaros que he dejado comentado el parámetro «testpage» que sirve por si solo queremos ejecutar OPA / Qunit. Al estar comentado ejecutará todas las pruebas.

Tambien añadimos la configuración para utilizar la aplicación en modo local, sobre todo para la carga de librerías y datos de backend.

Otro parámetro importante es browsers: [‘ChromeHeadless’], que nos permitirá seleccionar el navegador. En este caso hemos puesto Chromium (chrome) en modo background.

Adicionalmente también crearemos el fichero por si queremos ejecutar Karma en cliente sin parametros, añadiremos el fichero karma.conf.js en la raiz del proyecto

module.exports = function(config) {
	config.set({
  
	  frameworks: ["ui5"],
  
	  ui5: {
		url: "https://ui5.sap.com"
	  },
   
	  browsers: ["Chrome"]
	  
	  });
	};

Ejecutando test

Vamos a ejecutar los test. Para hacerlo primero ejecutaremos directamente el cliente de Karma para ver sinos funciona el disparador de test y si el fichero de configuración es correcto.

Ejecutaremos uno de estos dos comandos:

karma start --single-run --browsers ChromeHeadless
karma start karma-ci.conf.js --single-run --browsers ChromeHeadless

Para este test he forzado algunos errores, este será el resultado:

Ahora añadiremos el script en NPM para poder ejecutar dentro de los comandos de NPM. Este paso no es 100% necesario, ya que con el cliente de Karma y como hemos visto, podríamos ejecutar directamente el comando. Pero es una manera de tener todo ordenado.

En el fichero package.json:

    "test": "npm run karma-ci",
    "test-auto": "karma start karma-ci.conf.js --single-run --browsers ChromeHeadless"

Tendremos dos scripts, uno para ejecutar el cliente de karma directamente, y el otro que utilizaremos para añadir a la automatización final de test.

---

Ya tenemos toda la automatización creada. Solo nos queda el paso para añadir un control en las acciones en GIT, esto nos permitirá evitar que el código llegue al repositorio sin un control mínimo.

Como siempre suscribete, dale a la campanita de notificaciones y comparte en redes ayudarme a llegar a más personas.