angularjs - 如果设置了特定的 header ，则测试 AngularJs 的 $http.defaults.headers.common

Question

所以我是 JavaScript 和 AngularJS 世界的新手，因此我的代码还没有达到应有的水平，但它正在改进。尽管如此，我还是开始学习和实现一个带有 REST 后端的简单登录页面。提交 Login-Form 后，将返回一个 authentication-token 并将其设置为默认的 http-header 属性，如下所示

$http.defaults.headers.common['X-AUTH-TOKEN'] = data.authToken;

每当我手动测试它时，这都可以正常工作，但这不是要走的路，所以我想实现一个单元测试来检查是否设置了 X-AUTH-TOKEN header 。

有没有办法用 $httpBackend 来检查？例如我有以下测试:

describe('LoginController', function () {
    var scope, ctrl, $httpBackend;

    // Load our app module definition before each test.
    beforeEach(module('myApp'));

    // The injector ignores leading and trailing underscores here (i.e. _$httpBackend_).
    // This allows us to inject a service but then attach it to a variable
    // with the same name as the service.
    beforeEach(inject(function (_$httpBackend_, $rootScope, $controller) {
        $httpBackend = _$httpBackend_;
        scope = $rootScope.$new();
        ctrl = $controller('LoginController', {$scope: scope}, {$http: $httpBackend}, {$location: null});
    }));

    it('should create an authToken and set it', function () {
        $httpBackend.expectPOST('http://localhost:9000/login', '200').respond(200, '{"authToken":"52d29fd63004c92b972f6b99;65e922bc-5e33-4bdb-9d52-46fc352189fe"}');
        scope.login('200');
        $httpBackend.flush();

        expect(scope.data.authToken).toBe('52d29fd63004c92b972f6b99;65e922bc-5e33-4bdb-9d52-46fc352189fe');
        expect(scope.loginValidationOverallError).toBe(false);
        expect(scope.status).toBe(200);
    });

我的 Controller 看起来像这样:

.controller('LoginController', ['$scope', '$http', '$location',
    function ($scope, $http, $location) {

        // Login Stuff
        $scope.data = {};
        $scope.status = {};
        $scope.loginValidationOverallError = false;
        $scope.login = function (user) {
            $http.post('http://localhost:9000/login', user).success(function (data, status) {

                $scope.data = data;
                $scope.status = status;
                $scope.loginValidationOverallError = false;


                console.log($scope.status, $scope.data);
                $http.defaults.headers.common['X-AUTH-TOKEN'] = data.authToken;
                $location.path('/user');

            }).error(function (data, status) {
                    console.log(status + ' error');
                    $scope.loginValidationOverallError = true;
                });

        };
        ...

我查看了 http://docs.angularjs.org/api/ngMock.$httpBackend 上的文档但不确定最后一个测试是否真的适用于我的代码(以及该代码如何实际测试某些东西)

it('should send auth header', function() {
    var controller = createController();
    $httpBackend.flush();

    $httpBackend.expectPOST('/add-msg.py', undefined, function(headers) {
        // check if the header was send, if it wasn't the expectation won't
        // match the request and the test will fail
        return headers['Authorization'] == 'xxx';
    }).respond(201, '');

    $rootScope.saveMessage('whatever');
    $httpBackend.flush();
});

Answer 1

我面临同样的问题，我终于解决了。这很棘手

的源代码AuthenticationService.login() 功能

$http.post(...)
  .success(function(data) {
     ...
     $http.defaults.headers.common['Authorization'] = data.oauth_token;
   });

测试代码

beforeEach(inject(function(_$httpBackend_,AuthenticationService) {
  $httpBackend = _$httpBackend_;
  $authenticationService = AuthenticationService;
}));

it('should login successfully with correct parameter', inject(function($http) {
// Given
...
...
var fakeResponse = {
  access_token: 'myToken'
}

$httpBackend.expectPOST('oauth/token',urlEncodedParams, function(headers) {
      return headers['Content-Type'] ===  'application/x-www-form-urlencoded';
}).respond(200, fakeResponse);

// When
$authenticationService.login(username,password); 


// Then
$httpBackend.flush();
expect($http.defaults.headers.common['Authorization']).toBe('myToken');

把戏这是在 上设置的默认 header 真正的 $http 服务 ，而不是被 mock 的 $httpBackend。这就是为什么你应该注入(inject)真正的 $http 服务

我已尝试测试 $httpBackend 但收到“未定义”错误，因为 $httpBackend 没有“默认”属性