angularjs - tutorial - unit test angular 5

AngularJS+Jasmine: $ httpBackend no funciona como se esperaba

Question

Estoy usando Jasmine con Karma para probar mi aplicación basada en Angular .

Tengo que probar un servicio que carga datos de usuario y estoy usando $ httpBackend para simular las respuestas. Sin embargo, cuando ejecuto la prueba, obtuve dos errores:

• Error: No hay solicitud pendiente de descarga!
• Error: solicitudes insatisfechas: GET https://api.github.com/users/wilk

Módulo:

''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;
}
};
}]);

Prueba:

''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
});
});
});
});

Supongamos que GITHUB_API_URL es igual a '' https://api.github.com/ '' y GITHUB_USER es igual a ''wilk'' .

Estoy realizando esta prueba con Karma-Jasmine 0.1.5 y AngularJS 1.2.6 (con Angular Mocks y Scenario 1.2.6).

¿Qué hay de malo con este código?

Answer 1

Vamos a hablar de cada error por separado:

Error: No hay solicitud pendiente de descarga!

Eso está sucediendo porque no se realizó ninguna solicitud a través de $httpBackend , así que no hay nada que desechar. Esto se debe a que está creando UserService instancia de UserService antes de $httpBackend y Angular no sabe que debería usarlo en lugar del $http real. Si revisa la consola, verá que se está enviando una solicitud real.

Error: solicitudes insatisfechas: GET https://api.github.com/users/wilk

La misma razón que la anterior. Dado que el $httpBackend no utiliza $httpBackend , la expectativa que ha creado nunca se cumple.

Aquí está su especificación refactorizada después de considerar todo lo anterior:

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);
});
});
});

Plunker

Nota: He cambiado un poco la forma en que se inyectaban las cosas, pero la forma en que lo está haciendo está bien, siempre y cuando cree $httpBackend antes que $httpBackend .