Publié le 06/14/2017, rédigé par Chloé MAHALIN

Karma

Comment changer le navigateur de test ou choisir un navigateur embarqué ?

Prérequis, set-up de Karma au sein du projet.

Les navigateurs disponibles pour le lancement des tests

Pour jouer des tests unitaires avec NPM, on choisi généralement de passer par Karma (en tous cas, si l'on fait du Angular, la question se pose peu).

Karma est un moteur de test unitaire assez souple et extrèmement configurable. On appréciera énormément la souplesse dont il fait preuve au quotidien (Bref, on like !).

Des connecteurs pour tous les navigateurs ont été créés pour jouer les tests unitaires. Pour ne citer que les plus connus :

Je vous invite à vous rendre sur cette page et sur cette page pour plus d'infos !

Une grande majorité de ces launchers ne sont que des connecteurs et nécessitent que vous disposiez d'une installation du browser sur votre ordinateur. Cela peut devenir problématique si vous souhaitez lancer les tests unitaires sur votre plateforme d'intégration continue ou si vous n'êtes pas maître de votre machine niveau installation de logiciels.

Passer à un navigateur headless pour les tests

C'est là qu'intervient PhantomJS !!

Cette dépendance NPM contient un navigateur dit headless (sans aucun écran), uniquement le moteur.

Pour profiter de ce petit joujou :

  1. Ajoutez la dépendance dans votre fichier de conf package.json :
npm install --save-dev karma-phantomjs-launcher
  1. Modifiez votre fichier de conf Karma.conf.js avec la déclaration de votre nouveau browser de test :
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-phantomjs-launcher'),          <==== On ajoute le plugin ici !
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    browsers: ['PhantomJS'],                        <==== Et on déclare le browser de test ici ! Vous pouvez en mettre plusieurs, c'est une liste !
    phantomjsLauncher: {
      // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
      exitOnResourceError: true                     <==== Personnellement, je rajoute cette property aussi pour forcer la fermeture de l'instance de mon browser phantomJS
    }
  });
};
  1. On s'assure que tout a bien été récupéré sur le réseau et installé :
npm install

Changer de navigateur pour les tests

Et pour changer de navigateur, c'est tout pareil, mais avec une autre dépendance.

Et nous pouvons lancer les tests !