javascript AngularJs Jasmine 单元测试中的 $httpBackend
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25775462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
$httpBackend in AngularJs Jasmine unit test
提问by Timothy
I'm unable to get my unit test to work properly. I have a $scope array that starts out empty, but should be filled with an $http.get(). In the real environment, there'd be approx 15 or so objects in the array, but for my unit test I just grabbed 2. For the unit test, I have:
我无法让我的单元测试正常工作。我有一个 $scope 数组，它开始是空的，但应该用 $http.get() 填充。在真实环境中，数组中大约有 15 个左右的对象，但对于我的单元测试，我只抓取了 2 个。对于单元测试，我有：
expect($scope.stuff.length).toBe(2);
But jasmine's error is: Expected 0 to be 2.
但是 jasmine 的错误是：预期 0 为 2。
here's my controller.js:
这是我的 controller.js：
$scope.stuff = [];
$scope.getStuff = function () {
var url = site.root + 'api/stuff';
$http.get(url)
.success(function (data) {
$scope.stuff = data;
})
.error(function(error) {
console.log(error);
});
};
and my controller.spec.js is:
我的 controller.spec.js 是：
/// <reference path="../../../scripts/angular-loader.min.js" />
/// <reference path="../../../scripts/angular.min.js" />
/// <reference path="../../../scripts/angular-mocks.js" />
/// <reference path="../../../scripts/angular-resource.js" />
/// <reference path="../../../scripts/controller.js" />
beforeEach(module('ui.router'));
beforeEach(module('ngResource'));
beforeEach(module('ngMockE2E'));
beforeEach(module('myApplication'));
var $scope;
var controller;
var httpLocalBackend;
beforeEach(inject(function ($rootScope, $controller, $injector) {
$scope = $rootScope.$new();
controller = $controller("StuffController", {
$scope: $scope
});
}));
beforeEach(inject(function ($httpBackend) {
httpLocalBackend = $httpBackend;
}));
it('should get stuff', function () {
var url = '/api/stuff';
var httpResponse = [{ "stuffId": 1 }, { "stuffId": 2 }];
httpLocalBackend.expectGET(url).respond(200, httpResponse);
$scope.getStuff();
expect($scope.stuff.length).toBe(2);
//httpLocalBackend.flush();
} );
Now, obviously, I changed variable names and such since this is for work, but hopefully this is enough information for anybody to help me. I can provide more if needed. I also get a second error when uncommenting the .flush() line, but I'll get to that a bit later.
现在，很明显，我更改了变量名称等，因为这是为了工作，但希望这对任何人来说都是足够的信息来帮助我。如果需要，我可以提供更多。取消注释 .flush() 行时，我也会遇到第二个错误，但稍后我会谈到。
Any help is greatly appreciated and thanks in advance!
非常感谢任何帮助，并提前致谢！
EDIT:
编辑：
Finally got it working! Here's my final code:
终于让它工作了！这是我的最终代码：
it('should get stuff', function () {
var url = '/api/stuff';
var httpResponse = [{ "stuffId": 1 }, { "stuffId": 2 }];
httpLocalBackend.expectGET(url).respond(200, httpResponse);
$scope.getStuff();
httpLocalBackend.flush();
expect($scope.stuff.length).toBe(2);
} );
EDIT 2: I ran into another problem, which I think may have been the root cause of this. See Unit test failing when function called on startup
编辑 2：我遇到了另一个问题，我认为这可能是导致此问题的根本原因。请参阅启动时调用函数时单元测试失败
采纳答案by Farhan Rahman
You need to place httpLocalBackend.flush() statement before expect($scope.stuff.length).toBe(2). Once you make a request you need to flush it for the data to be available in your client code.
您需要在 expect($scope.stuff.length).toBe(2) 之前放置 httpLocalBackend.flush() 语句。发出请求后，您需要刷新它以使数据在您的客户端代码中可用。
it('should get stuff', function () {
var url = '/api/roles';
var httpResponse = [{ "stuffId": 1 }, { "stuffId": 2 }];
scope.getStuff(); //Just moved this from after expectGET
httpLocalBackend.expectGET(url).respond(200, httpResponse);
httpLocalBackend.flush();
expect($scope.stuff.length).toBe(2);
} );
Try this.
试试这个。
