Unit-testing a controller that uses $http

Question

I have a simple controller and the first thing I need it to do is assign a value to scope.

function TestCtrl($scope, $http) {
    $scope.listForms = 'some list';
}

The following test for the controller works as expected:

describe('Testing a controller', function() {

    var ctrl, scope, httpMock;

    beforeEach(inject(function($injector) {
        scope = $injector.get('$rootScope').$new();
        ctrl = $injector.get('$controller');
        ctrl(TestCtrl, { $scope: scope });
    }));

    it("assigns to scope", function() {
      expect(scope.listForms).toMatch("some list");
    });
});

But when I change the function to get the list from my API

function TestCtrl($scope, $http) {
  $http.get('/api/listForms').success(function(list) {
    $scope.aListOfForms = 'some list';
  });
}

and the test changes to

describe('Testing a controller', function() {

    var ctrl, scope, httpMock;

    beforeEach(inject(function($injector) {
        httpMock = $injector.get('$httpBackend');

        scope = $injector.get('$rootScope').$new();
        httpMock.when('GET', '/tactical/api/listOrderForms').respond("an order form");

        ctrl = $injector.get('$controller');
        ctrl(TestCtrl, {
            $scope: scope,
            $http: httpMock
        });
    }));

    it("gets the list from the api and assigns it to scope", function() {
      httpMock.expectGET('tactical/api/listOrderForms');
      expect(scope.orderFormList).toMatch("an order form");
      httpMock.flush();
    });
});

I get the following errors:

TypeError: 'undefined' is not a function
Expected undefined to match 'an order form'.
Error: No pending request to flush !

Does anyone know what I am doing wrong? Thanks in advance.

Kenneth Lynne · Accepted Answer · 2013-12-10 12:07:25Z

8

$http uses $httpBackend to talk to external resources. You have mocked $httpBackend, but the controller still needs to talk to it trough $https interface.

This should do it:

describe('Testing a controller', function() {

    var ctrl, scope, httpMock;

    beforeEach(inject(function($controller, $rootScope, $httpBackend) {
        httpMock = $httpBackend;

        scope = $rootScope.$new();
        httpMock.when('GET', '/tactical/api/listOrderForms').respond("an order form");

        ctrl = $controller;
        ctrl(TestCtrl, {
            $scope: scope
        });
    }));

    it("gets the list from the api and assigns it to scope", function() {
      httpMock.expectGET('tactical/api/listOrderForms');
      httpMock.flush();
      expect(scope.orderFormList).toMatch("an order form");
    });
});

edited Dec 10, 2013 at 12:07

answered Apr 20, 2013 at 12:47

Kenneth Lynne

15.6k12 gold badges66 silver badges80 bronze badges

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

3 Comments

Nikhil Over a year ago

But nowhere have you modified the actual implementation of $httpBackend. So how does Angular know to not call (whatever) methods are on the real $httpBackend object but instead call the httpMock when $http.get() is called? I am terribly confused here (new to Angular)

Kenneth Lynne Over a year ago

Nikhil, $http will ask for $httpBackend when $http is initialized. $httpBackend is a singleton (there exists only one instance) and httpMock is a reference to it. Registering callbacks and doing stuff on this $httpBackend instance that is shared between the test and $http is what makes this work.

pthalacker Over a year ago

I have looked at dozens of examples and explanations and no where has this been made clear. Now things make a little more sense.

Paul Lan · Accepted Answer · 2013-04-02 00:13:56Z

3

you can't replace $http service as $httpBackend service for your controller manually.

Change

    ctrl(TestCtrl, {
        $scope: scope,
        $http: httpMock
    });

to

    ctrl(TestCtrl, {
        $scope: scope
    });

It should work.

answered Apr 2, 2013 at 0:13

Paul Lan

6752 gold badges9 silver badges12 bronze badges

Comments

Jollymorphic · Accepted Answer · 2013-03-20 20:36:10Z

0

You need to call httpMock.flush() before the expect(). The flush call simulates the response returning from the "back end," calling the success function that was bound to the http request.

answered Mar 20, 2013 at 20:36

Jollymorphic

3,53018 silver badges16 bronze badges

1 Comment

Richard V Over a year ago

I did not realise the reason that the flush() had to go first, so I have learnt something, tired it both ways and I still get the same Errors.

Collectives™ on Stack Overflow

Unit-testing a controller that uses $http

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related