Archives mensuelles : mars 2014

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.

Présentation de Yeoman

Aprés Grunt et Bower, je vais aujourd’hui vous présenter yeoman.

Yeoman est un « générateur » de projet.

Il est basé sur node.js et npm et utilise git pour la récupération des dépendances. Ces outils doivent donc être installés sur votre poste.

Installation

L’installation se fait via la commande suivante (avec l’option -g pour avoir la commande en global)

npm install -g yo

Bower et Grunt sont automatiquement installés.

Il faut également installer les générateurs que vous voulez utiliser. Vous pouvez trouver la liste des générateurs disponible ici. Pour notre exemple, nous allons installer le générateur pour angular via la commande suivante :

npm install -g generator-angular

Utilisation

Il suffit d’appeler ensuite la commande yo avec le générateur de votre choix :

yo angular

Quelques questions vous seront posées (voulez-vous utiliser sass, twitter bootstrap, ….,). Ces questions détermineront ce qui sera installé.Une fois les questions répondues, yeoman va se charger de télécharger toutes les dépendances du projet.

Création d'un projet angular via Yeoman

Comme je vous le disais, yeoman intègre grunt et bower. Des fichiers Gruntfile.js et bower.js seront donc déjà présent et configurés suivant le générateur utilisé. Pratique !!

Les générateurs peuvent également être utilisé pour créer des nouveaux fichiers comme dans le cas du générateur angular qui permet de créer des services, factory, controller, directives,  ….

Astuces

Pour connaître les générateurs installés, il faut lancer l’aide via la commande suivante :

yo -h

Liste des générateurs yoeman installésVous pouvez voir la liste des générateurs disponibles pour le seul angular. Notez également la présence de karma. En effet, le template de projet d’angular inclut Karma (anciennement Testacular), un lanceur de test multi-navigateur créé par l »équipe d’angular,  et permet donc d’initier un projet Karma .

Liens

Conclusion

Yeoman est très pratique pour démarrer rapidement un projet avec une bonne architecture et les bonnes pratiques d’un framework (tests unitaires, arborescence projet, …). Vous avez bien entendu la possibilité de générer votre propre générateur pour vos projets et les partager.