使用$ httpbackend模拟和打字稿进行单元测试

Question

I'm trying to unit test a method that makes an http request with the $http service, however the $httpbackend mock does not seem to be intercepting the request - I get a Error: No pending request to flush ! error.

My test is as follows:

/// <reference path="../typings/tsd.d.ts" />
/// <reference path="../dist/ngJwtAuth.d.ts" />


var expect = chai.expect;

describe('Service tests', () => {

    var $httpBackend:ng.IHttpBackendService;
    var ngJwtAuthService:NgJwtAuth.NgJwtAuthService;

    beforeEach(()=>{

        module('ngJwtAuth');

        inject((_$httpBackend_, _ngJwtAuthService_) => {
            $httpBackend = _$httpBackend_;

            if (!ngJwtAuthService){ //dont rebind, so each test gets the singleton
                ngJwtAuthService = _ngJwtAuthService_; //register injected of service provider
            }
        })
    });

    afterEach(() => {
        $httpBackend.verifyNoOutstandingExpectation();
        $httpBackend.verifyNoOutstandingRequest();
    });

    it('should be an injectable service', () => {

        return expect(ngJwtAuthService).to.be.an('object');
    });

    it('should retrieve a json web token', () => {

        var user = {
            email: 'joe.bloggs@example.com',
            password: 'password'
        };

        $httpBackend.expectGET('/api/auth/login', (headers) => {
            return headers['Authorization'] == 'Basic '+btoa(user.email+':'+user.password);
        });

        var promisedToken = ngJwtAuthService.authenticate(user.email, user.password);

        promisedToken.then((res) => {

            console.log('res', res);
        });

        $httpBackend.flush();

    });


});

The results I get is

Start:
  Service tests
    ✔ should be an injectable service
    ✖ should retrieve a json web token
    ✖ "after each" hook

Finished in 0.055 secs / 0.004 secs

SUMMARY:
✔ 1 tests completed
✖ 2 tests failed

FAILED TESTS:
  Service tests
    ✖ should retrieve a json web token
      Chrome 43.0.2357 (Mac OS X 10.10.3)
    Error: No pending request to flush !
        at Context.<anonymous> (base/test/tmp/test.js?7ade37b85a3e515024b3ce23ba6d9fc4c70ddcc2:104:22)

    ✖ "after each" hook
      Chrome 43.0.2357 (Mac OS X 10.10.3)
    Error: Unsatisfied requests: GET /api/auth/login
        at Context.<anonymous> (base/test/tmp/test.js?7ade37b85a3e515024b3ce23ba6d9fc4c70ddcc2:86:22)

The offending method that I am testing is

public authenticate(username:string, password:string): ng.IPromise<Object>{

    var authHeader = NgJwtAuthService.getAuthHeader(username, password);

    var requestConfig:ng.IRequestConfig = {
        method: 'GET',
        url:  this.getLoginEndpoint(),
        headers: {
            Authorization : authHeader
        },
        responseType: 'json'
    };

    return this.$http(requestConfig);
}

The whole project can be found at https://github.com/spira/angular-jwt-auth

Answer 1

OK, I worked it out after a bit of playing around. Turns out the solution was to make sure that $httpbackend was not redeclared for each function. This looks like this:

inject((_$httpBackend_, _ngJwtAuthService_) => {

    if (!ngJwtAuthService){ //dont rebind, so each test gets the singleton
        $httpBackend = _$httpBackend_;
        ngJwtAuthService = _ngJwtAuthService_; //register injected of service provider
    }
})

As I wanted each test to use the same service (the service is mutable), I had to include the $httpBackend = _$httpBackend_; line inside the if block.