AngularJs Jasmine 单元测试中的 $httpBackend

$httpBackend in AngularJs Jasmine unit test(AngularJs Jasmine 单元测试中的 $httpBackend)
本文介绍了AngularJs Jasmine 单元测试中的 $httpBackend的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我无法让我的单元测试正常工作.我有一个 $scope 数组,它一开始是空的,但应该用 $http.get() 填充.在真实环境中,数组中大约有 15 个左右的对象,但对于我的单元测试,我只抓了 2 个.对于单元测试,我有:

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:

expect($scope.stuff.length).toBe(2);

但是 jasmine 的错误是:Expected 0 to be 2.

But jasmine's error is: Expected 0 to be 2.

这是我的 controller.js:

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

而我的 controller.spec.js 是:

and my controller.spec.js is:

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

现在,很明显,我更改了变量名称等,因为这是为了工作,但希望这对任何人都有足够的信息来帮助我.如果需要,我可以提供更多.取消注释 .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.

非常感谢任何帮助,并在此先感谢!

Any help is greatly appreciated and thanks in advance!

终于搞定了!这是我的最终代码:

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

编辑 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

推荐答案

需要在expect($scope.stuff.length).toBe(2)之前放置httpLocalBackend.flush()语句.发出请求后,您需要刷新它以使数据在您的客户端代码中可用.

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.

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

试试这个.

这篇关于AngularJs Jasmine 单元测试中的 $httpBackend的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

How to sort a array of object based on two properties and check the rage is sequential?(如何根据两个属性对对象数组进行排序,并检查范围是否连续?)
Untyped function calls may not accept type arguments - Angular 5 http calls(非类型化函数调用可能不接受类型参数-角度5 http调用)
ReferenceError: Excel is not defined(ReferenceError:未定义Excel)
How to save two canvas(outer and inner) as png using fabric js in angular(如何保存两个画布(外部和内部)为PNG使用织物js的角度)
Access to #39;Set-Cookies#39; header in $http(访问$http中的Set-Cookies标头)
Adding lt;stronggt;/bold text in translated string using angular-translate(使用角度翻译在翻译后的字符串中添加lt;stronggt;/粗体文本)