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.
|
1 |
$ npm install karma-ng-html2js-preprocessor --save-dev |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
files: [ 'client/{app,components}/**/*.html' ], preprocessors: { '**/*.html': 'ng-html2js', }, ngHtml2JsPreprocessor: { stripPrefix: 'client/', moduleName: 'templates' }, |
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
|
1 2 3 4 |
<form name="form"> <input type="text" name="width" ng-pattern="/^[0-9]{1,7}(\.[0-9]+)?$/" /> <input type="email" name="useremail" /> </form> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
describe('Controller: FormCtrl', function () { beforeEach(module('fsNomDeVotreApp')); // Charge le module template défini par ng-html2js dans karma.conf.js beforeEach(module('templates')); var scope, form, ctrl; beforeEach(inject(function ($rootScope, $controller, $templateCache, $compile) { scope = $rootScope.$new(); ctrl = $controller('FormCtrl', { $scope: scope }); // Récupère le formulaire à tester var templateHtml = $templateCache.get('app/formulaire/formulaire.html'); // Encapsule le formulaire // Wraps a raw DOM element or HTML string as a jQuery element. var formElem = angular.element("<div>" + templateHtml + "</div>"); // Compile le formulaire en template et le lie avec le scope $compile(formElem)(scope); // Donne accès au formulaire pour tous les tests form = scope.form; // $apply met a jour les bindings et appelle $digest // $apply() is used to execute an expression in angular from outside of the angular framework. // https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply scope.$apply(); })); }) |
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.
|
1 2 3 4 5 6 |
it('should not allow an invalid width', function() { form.number.$setViewValue('BANANE'); expect(form.number.$valid).toBeFalsy(); expect(form.$pristine).toBeFalsy(); }); |
|
1 2 3 4 5 |
it('should allow a valid width', function() { form.number.$setViewValue(1213); expect(form.$valid).toBeTruthy(); }); |
|
1 2 3 4 |
it('should not allow an invalid email', function() { form.useremail.$setViewValue('noEmailHere'); expect(form.useremail.$valid).toBeFalsy(); }); |
|
1 2 3 4 |
it('should allow a valid email', function() { form.useremail.$setViewValue('thisIsMyRealEmail@real.com'); expect(form.useremail.$valid).toBeTruthy(); }); |
|
1 2 3 4 |
it('should allow an empty email', function() { form.useremail.$setViewValue(''); expect(form.useremail.$valid).toBeTruthy(); }); |
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.
[fbcomments url= » » width= »375″ count= »off » num= »5″ countmsg= »commentaires »]
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!