AngularJS+Jasmine: $httpBackend ne fonctionne pas comme prévu
Je suis en utilisant Jasmin avec Karma pour tester mon application construite sur Angulaire.
J'ai tester un service qui charge les données de l'utilisateur et je suis en utilisant $httpBackend de se moquer des réponses.
Cependant, lorsque je lance le test, j'ai fait deux erreurs:
- D'erreur: Aucune demande en attente de chasse!
- Erreur: pas satisfait à la demande: OBTENIR des https://api.github.com/users/wilk
Module:
'use strict';
app.service ('UserService', ['$resource', '$q', 'GITHUB_API_URL', function ($resource, $q, GITHUB_API_URL) {
var userResource = $resource (GITHUB_API_URL + '/users/:user', {user: '@user'}) ,
userModel = {};
return {
data: function () {
return userModel;
} ,
populate: function (user) {
var deferred = $q.defer () ,
userRequest = userResource.get ({user: user});
$q
.when (userRequest.$promise)
.then (function (data) {
userModel = data;
deferred.resolve (data);
});
return deferred.promise;
}
};
}]);
Test:
'use strict';
describe ('Service: UserService', function () {
beforeEach (module ('myApp'));
var $appInjector = angular.injector (['myApp']) ,
UserService = $appInjector.get ('UserService') ,
GITHUB_API_URL = $appInjector.get ('GITHUB_API_URL') ,
GITHUB_USER = $appInjector.get ('GITHUB_USER') ,
$httpBackend;
beforeEach (inject (function ($injector) {
$httpBackend = $injector.get ('$httpBackend');
$httpBackend
.when ('GET', GITHUB_API_URL + '/users/' + GITHUB_USER)
.respond ({
login: GITHUB_USER ,
id: 618009
});
}));
afterEach (function () {
$httpBackend.verifyNoOutstandingExpectation ();
$httpBackend.verifyNoOutstandingRequest ();
});
describe ('when populate method is called', function () {
it ('should returns user data', function () {
$httpBackend.expectGET (GITHUB_API_URL + '/users/' + GITHUB_USER);
UserService.populate (GITHUB_USER);
$httpBackend.flush ();
expect(UserService.data ()).toEqual ({
login: GITHUB_USER ,
id: 618009
});
});
});
});
Supposons que GITHUB_API_URL est égal à 'https://api.github.com/' et GITHUB_USER est égal à 'wilk'.
Je suis l'exécution de ce test avec Karma-Jasmin 0.1.5 et AngularJS 1.2.6 (Angulaire se moque de Scénario et 1.2.6).
Quel est le problème avec ce code?
- J'ai créé un Plunker script avec ton code, mais je ne sais pas ce que GITHUB_USER est. Auriez-vous l'esprit la mise à jour il?
- C'est une constante, et comme je l'ai mentionné est égale à la chaîne "wilk'.
- Mon mauvais. Ne pas le remarquer.
Vous devez vous connecter pour publier un commentaire.
Parlons chaque erreur séparément:
D'erreur: Aucune demande en attente de chasse!
Qui se passe, car aucune demande n'a été faite par
$httpBackend
, donc il n'y a rien à chasse d'eau. C'est parce que vous êtes à l'instanciation d'UserService
avant$httpBackend
et donc Angulaire ne sait pas qu'elle doit utiliser à la place du réel$http
. Si vous découvrez la console, vous verrez qu'une demande est en cours d'envoi.Erreur: pas satisfait à la demande: OBTENIR des https://api.github.com/users/wilk
Même raison que ci-dessus. Depuis
$httpBackend
n'est pas utilisé par le service, l'attente que vous avez créé n'est jamais remplie.Voici votre spec remaniée après avoir examiné l'ensemble de la ci-dessus:
Plunker
Note: j'ai changé la façon dont les choses ont été injecté un peu, mais la façon dont vous faites est très bien, aussi longtemps que vous créez
$httpBackend
avant tout le reste.module('myApp')
Angulaire charge tous les services de ce module contient l'injecteur peut utiliser l'un d'eux. Les traits de soulignement dans les param noms sont juste pour empêcher les noms des variables à partir des affrontements. Angulaire juste de les ignorer. Vous n'avez pas besoin de les utiliser si vos variables locales ont des noms différents, cependant. Plus d'infos sur ici.Error: Unsatisfied requests: PUT /api/v1/categories/by_key/zoom
erreur