introducción a karma js

Introducción al test runner karma js

Lawrence Alma-Tadema

archivado en: JavaScript / 16 marzo, 2016 / taller:

karma js es un test runner, un lanzador de test, desarrollado por el equipo de angular, que nos permite automatizar algunas tareas de los frames de tests, como jasmine.

Al igual que ocurre con angular, se parte de una instalación básica muy sencilla que luego se va complicando según las necesidades particulares con plugins que cubren necesidades específicas. Aunque se puede integrar con algunos editores, en esta entrada me limitaré a explicar cómo funciona por consola y para eso empezamos instalando el armazón básico con el npm de node.

$ npm install karma --save-dev

Luego instalamos el cliente de consola de forma global con el flag -g.

$ npm install -g karma-cli

¡Ale op! Ya está todo preparado y para lanzarlo basta con escribir por consola:

$ karma start

Sin embargo, de momento no sucedería nada interesante, ya que nos faltan tres cosas fundamentales:

  1. Plugins complementarios
  2. El archivo de configuración
  3. Y, claro está, algún test que lanzar.

Para solucionar lo tercero, he subido un ejemplo a git de cosas que expliqué en el taller de jasmine. Para el resto, hay que leer lo que sigue :P.

Frameworks y navegadores

Lo primero que necesitamos es añadir al proyecto los frames de tests que vamos a lanzar con karma. Así, por ejemplo, instalaríamos el de jasmine.

$ npm install karma-jasmine --save-dev

Además, tenemos que instalar los navegadores sobre los que queremos probar los test. Hay tropecientos, pero los más importantes son:

// chrome

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

// firefox

$ npm install karma-firefox-launcher --save-dev

// safari

$ npm install karma-safari-launcher --save-dev

// phantom

$ npm install karma-phantomjs-launcher --save-dev

// opera

$ npm install karma-opera-launcher --save-dev

// explorer

$ npm install karma-ie-launcher --save-dev

El phantom js es un navegador que no tiene interfaz gráfica y se utiliza sobre todo para test y tareas similares.

Configuración

Una vez instaladas estas herramientas básicas, tenemos que preparar un archivo de configuración en el que definir las instrucciones que necesita karma para saber dónde guardar los archivos, cómo mostrar los errores, etcétera.

Podríamos llamar al archivo de configuración de cualquier manera y luego indicar su nombre como argumento cuando lanzamos el karma start...

$ karma start miArchivoFormidable.js

Sin embargo, es más cómodo utilizar el nombre por defecto, karma.conf.js, que es el que buscará karma si no le pasamos ninguno.

Este archivo, que guardaremos en la raíz del proyecto, es un módulo que exporta la configuración.

module.exports = function(config) {

config.set({

files: [

'src/js/**/*.js',

'./tests/appSpec.js'

],

// todo el mondongo de la configuración...

});

};

La configuración puede ser más o menos compleja en función de la cantidad de tareas que le vamos a pedir a karma, pero cuanto menos debería incluir estos parámetros:

files

Un array con los archivos que debe cargar, tanto los que forman parte de la aplicación -que se definen antes-, como los que se corresponden a los test. Lo normal es que para esto se usen los denominados wildcards, comodines, que en este caso son *. Así, por ejemplo, cargaríamos primero todos los archivos js que forman parte de una aplicación y luego todos los test.

files: [

'./src/js/**/*.js',

'./tests/**/*.js'

],

Los wildcards siguen un orden de carga alfabético, por lo que si una manera sencilla de controlar las dependencias, los archivos que deben cargarse antes que otros, es numerarlos cuando los nombramos: 00-modelos.js, 01-controladores.js... Esto, claro está, solo en producción, pues luego se supone que los tenemos todos bien compactadicos en un solo archivo.

exclude

Es un array igual que el anterior, pero sirve para definir los archivos que queremos excluir del test.

reporters

Karma muestra los informes en la consola, por lo que conviene añadir formatos más manejables. Para eso, hay que instalar el plugin del formato que queramos y luego añadirlo a los reporters. Por ejemplo, así añadimos el html-reporter,  que es muy parecido a los informes de jasmine:

npm install karma-html-reporter --save-dev

Luego hay que especificar la casuística del plugin.

htmlReporter: {

outputDir: 'karma_html',

templatePath: null,

focusOnFailures: true,

namedFiles: false,

pageTitle: null,

urlFriendlyName: false,

reportName: 'report-summary-filename',

}

Y finalmente añadirlo a los reportes junto a progress, que es la consola.

reporters: ['progress', 'html'],

frameworks

Aquí indicamos los frames que queremos lanzar (recordemos que debemos haber instalado antes).

frameworks: ['jasmine'],

basePath

La ruta base que, si está definida, se añade a las demás rutas.

browsers

Un array en el que indicamos los navegadores en los que queremos que se lancen los test.

browsers: ['Chrome', 'PhantomJS', 'Firefox', 'IE'],

preprocesors

Un objeto con los preprocesadores que necesita nuestro código fuente, el que no forma parte de los test, como podría ser coffe script. Aquí hay que se especifica también un procesador de coverage, de cobertura, que es fundamental, por lo que me detengo a explicarlo. En general, los clientes no piden solo que un proyecto vaya con test, sino que estos cubran un tanto por ciento del código, normalmente el 80 por ciento, por lo que, aunque solo sea por eso, debemos tener controladas el número de líneas que van sin cubrir.

Sin entrar en jaleos de integración continua, un tema del que ya hablaré en próximas entradas, para realizar esta tarea en karma existe un plugin, el karma-coverage, que se instala con el npm:

npm install karma karma-coverage --save-dev

Luego lo añadimos en los preprocesadores...

preprocesors: {'src/js/*.js': ['coverage']},

y entre los reporters:

reporters: ['progress', 'html', 'coverage'],

Por último, añadimos datos de configuración iniciales, un tema al que me remito a la documentación oficial si alguien está interesado en profundizar.

coverageReporter: {

type : 'html',

dir : 'coverage/'

}

autoWatch

Un valor booleano true o false para indicar si queremos o no que se lancen los test cuando cambiamos algo de archivos fuente.

Gulp

Bueno, me dejo algunas opciones de configuración menores por comentar, como el hostname o el puerto en el que se abrirán los navegadores, pero con lo dicho vale para esta introducción. Solo una cosa más antes de terminar.

Karma se puede integrar con gulp sin necesidad de instalar nada. Basta con incluir el task en el gulpfile.

var gulp = require('gulp');

var Server = require('karma').Server;

gulp.task('test', function (done) {

new Server({

configFile: __dirname + '/karma.conf.js',

singleRun: true

}, done).start();

});

gulp.task('tdd', function (done) {

new Server({

configFile: __dirname + '/karma.conf.js'

}, done).start();

});

gulp.task('default', ['tdd']);

|| Tags: , , , , ,

valoración de los lectores sobre introducción a karma js

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4.4 sobre 5 (5 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.