Karma l'exécuteur de tests Javascript

Après avoir vu pourquoi faire des tests en Javascript et comment écrire des tests en utilisant Jasmine, il est temps d'aborder Karma.

Le but de Karma est de fournir un environnement d'exécution de vos tests Javascript. Les navigateurs Internet ne sont pas conçus pour charger nativement des fichiers de tests en javascript, les exécuter et afficher un rapport d'exécution.

Karma a été créé pour répondre à cette problématique. Voici les principales fonctionnalités de cette librairie :

• Serveur web : il démarre un serveur web allégé pour lancer vos fichiers de tests. Ces fichiers peuvent être écrits à l'aide de différents framework (Jasmine, Qunit,Nunit, Mocha,...) 

• Runner : il fournit une page custom qui lancera les tests. Cette page est différente selon le framework de test utilisé. 

• Manager : il démarre un navigateur Internet (Client) pour charger cette page. Vous pouvez utiliser différents navigateurs comme Firefox, Chrome, IE, PhantomJS…

• Reporter : il génère des rapports d'exécution soit sous forme de fichiers, dans la console d'exécution…

• Watcher : Karam fournit des plugins pour analyser les changements sur le filesystem pour relancer automatiquement les tests...

Karma s'interface facilement avec vos serveurs d'intégration continue comme Jenkins ou Travis.

Pourquoi tester dans un navigateur

Pourquoi vouloir tester dans un navigateur alors que tout aurait pu être fait sur un moteur Javacript comme NodeJS ?  

Quand on vient du monde serveur la question est légitime. Mais quand on vient du monde Web, nous avons tous en tête les différences d'implémentation de Javascript ou même de la norme HTML5 dans les différents navigateurs (voir comparateur). C'est pourquoi il est important de pouvoir facilement tester vos scripts sur l'ensemble des navigateurs que vous visez.

Comment installer Karma

Avant de commencer vous devez au préalable avoir NodeJS installé sur votre machine. Karma est un module NodeJS et même un ensemble de modules. Il existe un module pour chaque plugins Karma.

Dans notre exemple nous allons tester notre code en écrivant des tests Jasmine et nous les exécuterons sur Chrome. La commande pour installer le module principal Karma et les plugins  est la suivante

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

Si vous utilisez Grunt pour gérer votre projet Angular vous pouvez ajouter les dépendances à votre fichier package.json

{
  "name": "javamind-karma",
  "version": "0.0.1",
  "description": "Javamind tests en Javascript",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",

    "grunt-karma": "~0.12.28",

    "karma": "~0.12.23",
    "karma-chrome-launcher": "~0.1.4",
    "karma-jasmine": "~0.3.0",
    "karma-notify-reporter": "^0.1.1",

    "jasmine-core": "~2.1.3"
  },
  "author": "Guillaume EHRET"

}

Comment configurer Karma

Karma fonctionne à l’aide de plugins. Nous devons préciser ceux que nous voulons utiliser dans un fichier de configuration. Pour ne pas faire d’erreur à l’initialisation nous pouvons utiliser l’application NodeJS nommé Karma que nous venons d’installer dans la phase précédente.

Pour initier ce fichier nous lancerons

./node_modules/karma/bin/karma init karma.conf.js

Karma vous demande de répondre à différentes questions

• Quel est le framework que vous utilisez pour écrire vos tests (Jasmine,...)
• Utilisez vous require.js pour charger vos dépendances Javascript (par défaut à non)
• Quels sont les navigateurs Internet que vous voulez utiliser dans vos tests
• Où sont vos fichiers de tests. Dans mon exemple mes sources sont définis par app/js/**/*.js et mes tests par test/spec/**/*.spec.js
• Voulez vous que Karma scrupte automatiquement les changements (par défaut oui mais pour la démo on indiquera non)

Votre configuration est maintenant terminée. Vous pouvez consulter le fichier généré (karma.conf.jas) pour voir son contenu

Au niveau des navigateurs Karma utilisent certains emplacements par défaut. Si l’exécutable n’est pas trouvé il vous affichera un message d’erreur comme quoi une variable d’environnement doit être définie. Cette variable d’environnement doit posséder le nom suivant [BROWSER]_BIN où [BROWSER] prendra les valeurs FIREFOX, CHROME, IE, PHANTOMJS…


Comment lancer Karma

Vous pouvez maintenant exécuter Karma en lançant la commande

karma start karma.conf.js


Les tests sont lancés dans les différents navigateurs paramétrés et vous pouvez visualiser le rapport dans votre console

ehret_g@GuiDesktop01:/media/ehret_g/workspacelinux/www/javamind-karma$ karma start karma.conf.js
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser Firefox
INFO [Firefox 34.0.0 (Ubuntu)]: Connected on socket qpgdEi6drk-GNoQSbKhF with id 98468089
Firefox 34.0.0 (Ubuntu): Executed 10 of 10 SUCCESS (0.007 secs / 0.005 secs)

Les preprocessors et les rapports

Les preprocessors dans Karma permettent d’effectuer des actions sur les fichiers avant qu’ils soient traités par le navigateur Internet. Par exemple vous pouvez

• écrire vos fichiers de tests en CoffeeScript pour être moins verbeux et demander à Karma de les convertir en javascript avant leur exécution.
• utiliser le plugin coverage pour vérifier la proportion du code couvert par les tests
• ...

Dans une application web, il est toujours intéressant de mettre en place des rapports similaires à ceux que l’on peut avoir pour une application côté serveur. Je vous laisse lire mon article sur le paramétrage de Karma pour sortir des rapports sur la plateforme d’intégration continue Jenkins.

La liste complète des plugins disponibles est disponible ici pour les préprocesseurs et ici pour les rapports.

Prenons tout de même un exemple simple pour voir le principe. Sous Linux il existe un système de notification que l’on peut invoquer via l’utilitaire notify-send. Pour l’installer

sudo apt-get install notify-osd

Si vous voulez le tester lancez la commande

notify-send Test "Hello World"

Elle permettra d’afficher ce message de notification





C'est bien connu nous avons toujours quelque chose de mieux à faire quand nous lançons les tests.... Regardons comment utiliser le plugin karma-notify-send-reporter pour être averti à la fin de l'exécution. Avant toute chose il faut l’installer via la commande

npm install karma-notify-reporter

Ouvrez le fichier de configuration de Karma et ajouter le nouveau “reporter”

     reporters: ['progress', 'notify']

Relancez les tests et vous obtenez une nouvelle notification





Voila maintenant à ce stade nous savons écrire des tests en Javascript à l’aide de Jasmine et nous sommes capables de les exécuter via Karma