Tests unitaires pour votre formulaire Angular

Niveau intermédiaire

Oui, il existe une manière de tester vos formulaires Angular grâce à des tests unitaires. Plutôt que de sortir l’artillerie lourde et d’utiliser Protractor, vous pouvez demeurez rapide et agile, comme un Ninja, avec Karma et Jasmine.

Cet article vous présente une solution afin de réaliser cet exploit pour développeur Angular. Voici les étapes à réaliser :

  • Installer le module Html2Js.
  • Configurer Html2Js dans votre fichier de configuration Karma.
  • Créer un nouveau fichier de tests Jasmine.
  • Configurer les tests avec la fonction beforeEach.
  • Écrire le code afin de tester votre formulaire Angular.

Installer Html2Js

Html2Js est un préprocesseur qui lit vos fichiers HTML et les convertit en modules Angular qui seront pré-chargés par $templateCache.

https://github.com/karma-runner/karma-ng-html2js-preprocessor

Configurer Html2Js

Une fois l’installation de Html2Js terminée, il faut modifier la configuration de Karma qui est située dans le fichier kama.conf.js.

Voici les sections importantes du fichier de configuration, des explications suivront :

files

  • La section files indique les fichiers que Karma doit charger pour exécuter votre application.
    Assurez-vous que les fichiers .html sont bien chargés.

preprocessors

  • La section preprocessors spécifie les préprocesseurs à charger. Dans le cas présent, tous les fichiers .html seront analysés par Html2Js.

ngHtml2JsPreprocessor

  • Finalement, on applique les configurations pertinentes pour Html2Js.
  • stripPrefix: ‘client/’ : nous indique de supprimer le préfixe client/ du nom de chemin généré par Html2Js.
  • moduleName: ‘templates’ : permet de spécifier le nom du module où seront chargés les .html convertis.
    Ce module devra être chargé dans les tests Jasmine.

Exemple de test unitaire avec Jasmine et Karma

La vue

La vue contient 2 champs, le premier avec un ng-pattern n’accepte que des nombres.
Le deuxième champ accepte un courriel valide.

/app/formulaire/formulaire.html

Le contrôleur

Le contrôleur est vide pour ce test.

Le test Jasmine

Avant de pouvoir écrire des tests, il faut mettre en place tous les services nécessaires. La fonction beforeEach est détaillée dans le bloc suivant :

beforeEach

 

it

Maintenant que l’environnement est mis en place, il est possible d’écrire des tests unitaires afin de vérifier le bon fonctionnement de votre formulaire Angular.

Conclusion

Il n’est pas simple de configurer l’environnement qui vous permettra d’écrire des tests unitaires pour votre formulaire Angular. Par contre, une fois l’environnement mis en place, c’est tout de même facile d’utiliser les attributs ($valid, $pristine, …) afin d’écrire les validations.

Si des erreurs sont lancées lors de l’exécution de vos tests, penser à utiliser console.log ou les autres outils qui s’offrent à vous pour déboguer vos applications Angular JS.

Cette façon de procéder pour tester des formulaires pourrait sûrement être modifiée afin de tester les expressions de vos vues.

 

Comments

Comments

comments

0 réponses

Répondre

Want to join the discussion?
Feel free to contribute!

Laisser un commentaire

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