我正在使用 Jasmine 和 Karma 来测试我在 Angular 上构建的应用。
我必须测试加载用户数据的服务,并使用$httpBackend来模拟响应。 但是,当我运行测试时,出现两个错误:
- 错误:没有待处理的刷新请求!
- 错误:未满足的请求:GET https://api.github.com/users/wilk
模块:
'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;
}
};
}]);
测试:
'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
});
});
});
});
假设 GITHUB_API_URL 等于 ' https://api.github.com/ ' 并且 GITHUB_USER 等于 'wilk'。
我正在使用 Karma-Jasmine 0.1.5 和 AngularJS 1.2.6(使用 Angular Mocks 和 Scenario 1.2.6)运行此测试。
这段代码有什么问题?
最佳答案
让我们分别讨论每个错误:
错误:没有待处理的刷新请求!
发生这种情况是因为没有通过 $httpBackend
发出请求,因此没有任何内容可以刷新。这是因为您在 $httpBackend
之前实例化 UserService
,因此 Angular 不知道应该使用它而不是真正的 $http
。如果您检查控制台,您会看到正在发送真正的请求。
错误:未满足的请求:GET https://api.github.com/users/wilk
原因与上面相同。由于服务未使用 $httpBackend
,因此您创建的期望永远不会实现。
这是在考虑上述所有因素后重构的规范:
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);
});
});
});
注意:我稍微改变了注入(inject)的方式,但是只要您在其他所有操作之前创建 $httpBackend
,您所做的方式就很好。
关于AngularJS+ Jasmine : $httpBackend not working as expected,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21577718/