Tester son application Angular avec Karma et Jasmine

Karma

Karma est un outil de terminal JavaScript qui permet le lancement de navigateurs web. Une fois le navigateur lancé, Karma y charge le code de l'application et exécute vos tests.

Il est possible d'utiliser Karma afin de lancer votre application sur plusieurs navigateurs (Chrome, Safari, IE, PhantomJS, …). Cela vous permet de vérifier que votre application fonctionne bien partout!

Lors de l’exécution de vos tests, les résultats sont affichés directement dans votre terminal.

karma-terminal

 

On the AngularJS team, we rely on testing and we always seek better tools to make our life easier. That's why we created Karma - a test runner that fits all our needs.

Angular Team

Quand utiliser Karma?

  • Lorsqu'on veut exécuter notre application dans de vrais navigateurs.
  • Lorsqu'on veut tester notre application dans plusieurs navigateurs (bureau, mobile et tablette).
  • Lorsque vous voulez exécuter vos tests localement, lors du développement.
  • Lorsque vous désirez exécuter vos tests sur un serveur d'intégration continue.
  • Lorsque vous voulez exécuter vos tests automatiquement quand vous sauvegardez un fichier.

Vidéo d'introduction à Karma

Testacular (now Karma) - JavaScript Test Runner - YouTube

  • Introduction à Karma
  • Configuration avec WebStorm

Configuration de Karma

La configuration de Karma se trouve dans le fichier karma.conf.js. Voici un exemple de configuration documenté :

Karma init

Si votre projet n'est pas configuré avec Karma, vous pouvez utiliser la commande suivante. On vous guidera afin de créer votre fichier de configuration.

Exécuter vos tests dansplusieurs navigateurs

Il est simple d'exécuter vos tests dans plusieurs navigateurs.
Vous n'avez qu'à ajouter le nom du navigateur supporté à votre tableau browsers :

Et lancer vos tests :

BDD avec Jasmine

Jasmine est un cadriciel de tests JavaScript BDD (behavior driven development) devenu le choix le plus populaire pour tester des applications Angular. Jasmine offre des fonctionnalités qui vous aident à structurer vos tests et a exécuter des vérifications (assert).

Describe et it

Avec Jasmine, la fonction describe décrit un groupe de tests.

Chaque test individuel appelle la fonction it.

Avec describe et it, il est possible de garder vos tests structurés et bien documentés.

Vérifications avec Jasmine

Finalement, une gamme de vérificateurs (matchers) sont disponibles afin de faire vos vérifications. Dans l'exemple suivant, toEqual est utilisé :

Le module karma-jasmine est utilisé afin de permettre le bon fonctionnement entre Karma et Jasmine.

Exemples de matchers avec Jasmine

  • expect(true).toBe(true);
  • expect(message).toMatch(/quux/);
  • expect(a.bar).toBeDefined();
  • expect(foo).toBeTruthy();
  • expect(foo).toBeFalsy();
  • expect(a).toContain('bar');
  • expect(e).toBeLessThan(pi);
  • expect(pi).toBeGreaterThan(e);
  • expect(pi).toBeCloseTo(e, 0);
  • expect(bar).toThrow();

http://jasmine.github.io/1.3/introduction.html#section-Matchers

Inverser la condition avec .not.

.not peut être ajouté afin d'inverser le résultat attendu d'un test.

  • expect(pi).not.toBeCloseTo(e, 2);
  • expect(pi).toBeCloseTo(e, 0);
  • expect(true).toBe(true);
  • expect(false).not.toBe(true);

Tester un contrôleur Angular JS

Voici le code d'un contrôleur Angular qui comporte une fonction de vérification de fiabilité d'un mot de passe :

Voici le code Jasmine qui permet de tester la fonction du contrôleur :

Exécuter vos tests Jasmine

Avec le générateur Fullstack, il est possible d'exécuter vos tests facilement à partir du terminal.

Exécute tous les tests (client, serveur, end to end) :

Exécute les tests unitaires côté client :

Exécute les tests en continue (voir la prochaine section) pour la recette :

Exécuter vos tests Jasmine automatiquement lors de la modification d'un fichier (autoWatch)

Il est simple d'ajouter une tâche grunt qui vérifie les changements sur vos fichiers et qui exécute les tests automatiquement.

Dans votre fichier Gruntfile.js, identifier la section karma: et sous unit:, ajouter une nouvelle tâche loop: avec la configuration suivante :

De cette manière, vous pouvez lancer la tâche grunt et vos tests seront exécutés automatiquement lors de la modification d'un fichier.

Afficher des informations de débogage dans la console

Vous connaissez bien la fonction console.log() qui permet l'écriture dans la console de votre navigateur.

Lors de l'exécution des tests à partir de votre ligne de commande, il devient difficile de vérifier ce qui est écrit dans la console de votre navigateur. La solution : dump(obj).

Affiche Bonjour dans la console de votre navigateur :

Affiche Bonjour dans votre terminal :

Exercice

Configurer Karma et Jasmine pour votre projet Angular.

Modifier le fichier Gruntfile.js afin de permettre l'autoWatch.

Lancer vos tests en continu.

Écrire votre premier test (dans le fichier projet.spec.js). Il doit tester la fonction setProgressColor(percent). Cette fonction permet de mettre à jour une variable du $scope qui sera utilisée pour modifier la couleur de la barre de progrès fournie par Twitter Bootstrap.

  • Si le progrès du projet est supérieur ou égal à 80 %, la barre devra être verte.
  • Si le progrès du projet est inférieur ou égal à 20 %, la barre devra être rouge.
  • Autrement, la barre est bleue.

Lorsque tous vos tests sont verts, soumettre votre code avec Git :

Conclusion

  • Karma vous aide à lancer et tester votre application dans un ou plusieurs navigateurs.
  • Jasmine est un cadriciel de tests TDD qui permet la vérification de votre code Angular.
  • La qualité de vos tests est aussi importante que la qualité de votre code !

Références

AngularJS: Developer Guide: Unit Testing

https://docs.angularjs.org/guide/unit-testing

Karma - Spectacular Test Runner for Javascript

https://karma-runner.github.io/0.13/index.html

Karma - Configuration

https://karma-runner.github.io/latest/intro/configuration.html

Step 8: Test with Karma and Jasmine | Yeoman

http://yeoman.io/codelab/write-unit-tests.html

Testing With AngularJS Part 3: Karma and Grunt

https://www.credera.com/blog/technology-insights/java/testing-angularjs-part-3-karma-grunt/

karma-runner/karma: Spectacular Test Runner for JavaScript

https://github.com/karma-runner/karma

Comments

comments