Testing $http.get() requests in angular

Question

I'm trying to write jasmine tests for http.get() requests that are made as part of the instantiation of my controller:

e.g

angular.module('dashboard').controller('DashboardCtrl', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http) {

$scope.module_names = [
    [0, 'WorkforceMap', null, null],
    [10, 'Engagement SentiMap', 'Sentiment', 'engagement'],
    [11, 'Change SentiMap', 'Sentiment', 'change'],
];

$http.get('api/info', {cache: true}).success(function(data) {
    $rootScope.dash_info = data;

    var comp = $rootScope.components = [];
    for(var i = 0; i < scope.module_names.length; i++) {
        var mod = scope.module_names[i];
        if(mod[0] in data.modules)
            comp.push([mod[1], mod[3]]);
        else
            del_module(mod[2], mod[3]);
    }
});

$http.get('api/population_data', {cache: true}).success(function(data) {
    $rootScope.population_data = data;
});

And a few more http requests as well.

I'm trying to write unit tests using httpBackend for the first api call 'api/info', and have been struggling.

describe("DashboardCtrl Tests", function(){

beforeEach(module('dashboard'));

var scope;
var $httpBackend;
var controller;

beforeEach(inject(function(_$controller_, _$httpBackend_, $rootScope, $injector){

    scope = $rootScope.$new();
    controller = _$controller_('DashboardCtrl', {$scope: scope});

    $httpBackend = _$httpBackend_;
    $httpBackend.expectGET('/api/info').respond({'short': 'hi'});
}));

describe('$http.get(api/info)', function(){

    it(' receives data from dashboard/:profile_id/api/info', function(){

        $httpBackend.expectGET('api/info');
        $httpBackend.flush();


    });
});
});

I think the reason i've been struggling is that i haven't been able to find out how to single out one http.get request, since all requests are executed when the controller is instantiated.

My most recent error is "ReferenceError: Can't find variable: scope"

I'll keep digging around, but if anyone has seen something like this before, I would greatly appreciate some guidance!

Thanks

Boris Charpentier · Accepted Answer · 2015-03-11 21:53:19Z

0

What I do in that case is isolate call in methods, you can at minimum wrap all of this in a $scope.init function and test it.

A nicer way would be to cut that on smaller function, and the best way, to have a service wich return $http promise in those smaller function.

An exemple of init :

angular.module('dashboard').controller('DashboardCtrl', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http) {

$scope.init = function (){

    $scope.module_names = [
        [0, 'WorkforceMap', null, null],
        [10, 'Engagement SentiMap', 'Sentiment', 'engagement'],
        [11, 'Change SentiMap', 'Sentiment', 'change'],
    ];

    $scope.info();

    $http.get('api/population_data', {cache: true}).success(function(data) {
       $rootScope.population_data = data;
    });

};

$scope.info = function (){
    $http.get('api/info', {cache: true}).success(function(data) {
    $rootScope.dash_info = data;

    var comp = $rootScope.components = [];
    for(var i = 0; i < scope.module_names.length; i++) {
        var mod = scope.module_names[i];
        if(mod[0] in data.modules)
            comp.push([mod[1], mod[3]]);
        else
            del_module(mod[2], mod[3]);
    }
    });
};    

$scope.init();

And in test :

describe('$http.get(api/info)', function(){

it(' receives data from dashboard/:profile_id/api/info', function(){

    $httpBackend.expectGET('api/info').respond({'title':'test'});
    scope.info();
    $httpBackend.flush();
    $rootScope.$digest();

    expect($rootScope.dash_info).toEqual({'title':'test'});


});
});

answered Mar 11, 2015 at 21:53

Boris Charpentier

3,55328 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jjt143 Over a year ago

Just to be clear, you're saying that the only way I would be able to test one of those $http.get() requests at a time would be to wrap them in their own functions as you did above? Else, I would have one test that tested all of them in their entirety since they are all currently executed when the controller is instantiated?

Boris Charpentier Over a year ago

Well your $httpBackend.flush() would flush all request, so you would have to exoect all of them, and that would not be unitary at all.

Collectives™ on Stack Overflow

Testing $http.get() requests in angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related