J'utilise Jasmine avec Karma pour tester mon application basée sur Angulaire .
Je dois tester un service qui charge les données utilisateur et j'utilise $ httpBackend pour se moquer des réponses. Cependant, lorsque j'ai exécuté le test, j'ai eu deux erreurs:
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 '.
J'exécute ce test avec Karma-Jasmine 0.1.5 et AngularJS 1.2.6 (avec Angular Mocks and Scenario 1.2.6).
Quel est le problème avec ce code?
Parlons de chaque erreur séparément:
Erreur: aucune demande de vidage en attente!
Cela se produit car aucune demande n'a été faite via $httpBackend
, donc il n'y a rien à vider. C'est parce que vous instanciez UserService
avant $httpBackend
et donc Angular ne sait pas qu'il devrait l'utiliser à la place du vrai $http
. Si vous consultez la console, vous verrez qu'une vraie demande est envoyée.
Erreur: demandes non satisfaites: GET https://api.github.com/users/wilk
Même raison que ci-dessus. Puisque $httpBackend
n'est pas utilisé par le service, l'attente que vous avez créée n'est jamais satisfaite.
Voici votre spécification refactorisée après avoir considéré tout ce qui précède:
describe ('Service: UserService', function () {
var UserService,
GITHUB_API_URL,
GITHUB_USER,
$httpBackend;
beforeEach(function() {
module('plunker');
inject(function( _$httpBackend_, _UserService_, _GITHUB_API_URL_, _GITHUB_USER_) {
$httpBackend = _$httpBackend_;
UserService = _UserService_;
GITHUB_API_URL = _GITHUB_API_URL_;
GITHUB_USER = _GITHUB_USER_;
});
});
afterEach (function () {
$httpBackend.verifyNoOutstandingExpectation ();
$httpBackend.verifyNoOutstandingRequest ();
});
describe ('when populate method is called', function () {
it ('should returns user data', function () {
$httpBackend
.whenGET(GITHUB_API_URL + '/users/' + GITHUB_USER)
.respond ({
login: GITHUB_USER,
id: 618009
});
UserService.populate(GITHUB_USER);
$httpBackend.flush();
expect(UserService.data().login).toBe(GITHUB_USER);
expect(UserService.data().id).toBe(618009);
});
});
});
Remarque: J'ai un peu changé la façon dont les choses étaient injectées, mais la façon dont vous faites est très bien, tant que vous créez $httpBackend
avant tout le reste.