javascript - $httpBackend in AngularJs Jasmine unit test - Stack Overflow

admin管理员组

文章数量:1344582

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

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

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

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

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 unmenting the .flush() line, but I'll get to that a bit later.

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

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

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

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

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

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 unmenting the .flush() line, but I'll get to that a bit later.

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

• javascript
• angularjs
• unit-testing
• jasmine

Share Improve this question Follow edited May 23, 2017 at 11:59 CommunityBot 111 silver badge asked Sep 10, 2014 at 21:34 TimothyTimothy 1,16033 gold badges1212 silver badges3333 bronze badges 2

• 1 can you try putting you expect after $httpBackend.flush() ? – meriadec Commented Sep 10, 2014 at 21:40
• 1 You need to flush it before expecting the changes. – PSL Commented Sep 10, 2014 at 21:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

Try this.

本文标签： javascripthttpBackend in AngularJs Jasmine unit testStack Overflow