我使用茉莉花与羯磨测试我的应用程序建立在角度。
我必须测试一个加载用户数据的服务,我使用$ 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进行测试(使用角度模式和场景1.2.6)。
这段代码有什么问题?
我们分别讨论每个错误:
原文链接:https://www.f2er.com/angularjs/144575.html错误:无待处理的请求冲洗!
这是因为没有通过$ 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 () { $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); }); }); });
注意:我已经改变了注入的方式,但是你所做的一切都很好,只要在其他任何事物之前创建$ httpBackend。