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.

 $ 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 :

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

<form name="form">
   <input type="text" name="width" ng-pattern="/^[0-9]{1,7}(\.[0-9]+)?$/" />
   <input type="email" name="useremail" />
</form>

beforeEach

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.

it('should not allow an invalid width', function() 
{
  form.number.$setViewValue('BANANE');
  expect(form.number.$valid).toBeFalsy();
  expect(form.$pristine).toBeFalsy();
});

it('should allow a valid width', function() 
{
  form.number.$setViewValue(1213);
  expect(form.$valid).toBeTruthy();
});

it('should not allow an invalid email', function() {
  form.useremail.$setViewValue('noEmailHere');
  expect(form.useremail.$valid).toBeFalsy();
});

it('should allow a valid email', function() {
  form.useremail.$setViewValue('thisIsMyRealEmail@real.com');
  expect(form.useremail.$valid).toBeTruthy();
});

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 »]