Tester vos appels Ajax avec $httpBackend

Nous sommes maintenant convaincus que l’écriture des tests est un élément essentiel à la qualité logicielle. La méthodologie agile en fait aussi un élément important du succès d’un projet.

Dans cet article, nous verrons comment vérifier que les appels GET à un API REST sont bien exécutés et comment simuler un serveur API REST grâce au service $httpBackend offert par AngularJS.

$httpBackend pour les tests unitaires

L’avantage d’utiliser $httpBackend est qu’il n’est pas nécessaire de mettre en place un vrai serveur API Rest. Normalement, il faudrait mettre en place un API Rest fonctionnel, y injecter des données de test (fixtures) et ensuite faire un appel Ajax à cet API, attendre la réponse et vérifier les résultats obtenus.

Mettre en place un environnement de test complet demande un effort considérable et ajoute une dépendance externe à notre projet complexifiant ainsi les tests automatisés.

Afin de simplifier et d’accélérer les tests unitaires, il sera possible de les exécuter directement dans le navigateur grâce au service $httpBackend.

$httpBackend

$htpBackend simule (fake) un serveur HTTP. Il est utilisé dans les tests unitaires afin de vérifier le comportement du service $http. $httpBackend est un service de ngMock.

L’objectif est d’exécuter des tests rapidement sans avoir à envoyer de vraies requêtes AJAX (XHR) à un vrai serveur. Dans ces tests, nous vérifieront que les bonnes requêtes sont envoyées ou non. Il sera possible de répondre aux requêtes grâce à des réponses statiques ou dynamiques et finalement de vérifier les résultats attendus.

Deux options complémentaires sont offertes pour réaliser les tests : expect et when.

$httpBackend.expect – Request expectation

Une méthode qui défini les requêtes qui devraient être exécutées par l’application.

$httpBackend.when – Backend definition

Une méthode qui défini ce que doit retourner le fake API REST lorsqu’une requête est envoyée par l’application

Tableau comparatif entre expect() et when()

Le tableau suivant présente les différences entre les deux méthodes :

Request expectations

Backend definitions

Syntaxe

.expect(…).respond(…) .when(…).respond(…)

Usage typique

Tests unitaires stricte Tests unitaires (black-box)

Complète plusieurs requêtes

NON OUI

L’ordre des requêtes est important

OUI NON

Requête requise

OUI NON

Réponse requise

Optionnel OUI

Tiré de la documentation AngularJS – $httpBackend

https://docs.angularjs.org/api/ngMock/service/$httpBackend

Exemple de code avec $httpBackend.expectGET

Dans l’exemple suivant, on vérifie que le contrôleur appelle bien l’URL /auth avec une requête GET. Les méthodes expectGET et flush du service $httpBackend sont utilisées :

Dans l’exemple précédent, si le contrôleur ne fait pas pas d’appel GET à l’adresse /auth, le test échouera suite à l’appel flush().

Exemple de code avec $httpBackend.when

Dans l’exemple suivant, une réponse à retourner est configurée avec when. Donc, quand l’URL /auth est appelé une réponse 401 (401 est le code HTTP pour Unauthorized) est retournée.

Injection des dépendances

Afin d’utiliser $httpBackend dans vos tests unitaires, vous devez l’injecter. Plusieurs façon d’injecter les dépendances sont disponibles. Dans l’exemple suivant, le service $injector est utilisé.

https://docs.angularjs.org/api/auto/service/$injector

Requêtes restantes?

Après chaque test il est possible de vérifier s’il existe des requêtes latentes (non exécutées) ou si des vérification (expect) n’ont pas été réalisées. Les méthodes verifyNoOutstandingExpectation et verifyNoOutstandingRequest sont ajoutés à la fonction afterEach, exécutée automatiquement après chaque test.

Exemple complet

Conclusion

Grâce à $httpBackend.when, il est possible de simuler un API REST, il n’est donc pas nécessaire de mettre en place un vrai serveur REST.

Avec la méthode $httpBackend.expect, on peut vérifier si nos appels à cet API sont bien envoyés.

Il est maintenant temps de mettre en pratique ces nouvelles notions afin d’améliorer vos tests unitaires.

Références

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 *