Angular testing with qunit and httpBackend

Question

I have bee struggling with this all day. Here is my test

injector = angular.injector(['ngMock','ng', 'cockpit']);
var equal = QUnit.assert.equal;
test('loginService', function () {
    var app, service, scope, httpBackend;
    app = angular.module('cockpit');
    app.config(function ($provide) {
       $provide.decorator('httpBackend',
           angular.mock.e2e.$httpBackendDecorator);
    });
    httpBackend = injector.get('$httpBackend');

    httpBackend.when("PUT", "/login").respond({ userId: 23 });

    service = injector.get('loginService');
    service.$http = httpBackend;

    service.getUserId('easy', 'path');
    httpBackend.flush();
    equal(service.userId, 23, 'populates userId property');
});

Inside the getUserId method the $http service has not put method, so when I make the $http.put call, it fails. I must be setting the test up incorrectly.

Answer 1

I did not get that $httpBackend in Angular mocks is a wrapper for the $httpBackend in angular itself. You just have to instantiate it and set it up to intercept the $http calls the way you want. That said, I still can't get $httpBackend.flush() to work. Testing in angular isn't quite as easy as advertised.

Answer 2

$http and $httpBackend are two different services. $http uses $httpBackend. $http is the service which has the put() method.

So, the following line doesn't make sense:

service.$http = httpBackend;