Ajouter la couverture de code dans un projet Angular avec Karma

Certains d’entre vous le savent peut être si vous me suivez sur Twitter, je suis en train de porter mon application de gestion de score de volley (qui utilise knockout JS) sous Angular JS (avec en prime de nouvelles fonctionnalités 🙂 .

J’utilise yeoman pour la gestion de mon application via le générateur pour angular.

Par défaut, le générateur utilise Karma pour la gestion des tests unitaires. Karma permet de tester votre code dans différents navigateurs.

Par défaut, vous n’avez pas d’information concernant la couverture de code des tests, métrique très importante afin de savoir quelle partie de votre code est couvert par les tests ou celle qui ne l’est pas. Voyons comment l’ajouter.

Mise en place de la couverture de code

La gestion de la couverture de code utilise le module karma-coverage (qui utilise le module istanbul) à installer via la commande (l’option –save-dev permet de rajouter le module en tant que dépendance de développement (devDependencies) dans le fichier package.json de votre application) :

npm install karma-coverage --save-dev

Il faut ensuite ajouter les lignes suivantes dans le fichier karma.conf.js :

//Code Coverage
reporters: ['progress', 'coverage'],
preprocessors: { 'app/scripts/**/*.js': ['coverage'] }

C’est tout !!

Utilisation

Le lancement de vos tests unitaires se fait toujours via la commande :

grunt test

Un dossier coverage est créé dans votre arborescence et contient un dossier par navigateur dans lequel vous avez testé votre application.
Ajout du dossier coverage
Dans ces dossier vous avez un fichier index.html. Lancez ce fichier dans votre navigateur et vous avez maintenant accès à la couverture de code de votre application. Vous naviguer dans l’arborescence de votre projet et consulter fichier par fichier la couverture de code.

Couverture de code de votre application

Couverture de code d'un fichier

Comme vous pouvez le voir, la couverture n’est pas complète mais j’y travaille 😉 .

Bonus : Pensez à rajouter le dossier coverage dans le fichier .gitignore.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *