javascript - 测试 $httpProvider.interceptors.push() 是否被 Angular 中的 jasmine 调用

Question

我在这里找到了很多关于如何测试 Angular 的配置阶段的文章，并且我能够针对 restangular 创建我的测试。和 LocalStorageModule模块配置。我唯一无法解决的问题是检查是否添加了拦截器。我不需要测试该服务，因为它是第 3 方的东西，我认为它已经过测试 - 希望如此。

问题是，我如何监视在配置阶段调用的 $httpProvider.interceptors.push 方法？

提前感谢您的帮助!

这是我的代码:

(function () {
    'use strict';

    angular.module('myapp', [
            // Angular modules
            'ngAnimate',
            'ngRoute',

            // Custom modules
            'myapp.layout',

            // 3rd Party Modules
            'LocalStorageModule',
            'http-auth-interceptor',
            'restangular'
    ])
    .config(function (RestangularProvider) {

        RestangularProvider.setBaseUrl('http://.../services/webapi/');

    })
    .config(function (localStorageServiceProvider) {

        localStorageServiceProvider.setPrefix('myapp');

    })
    .config(function($httpProvider) {

        $httpProvider.interceptors.push('authInterceptorFactory');

    });
})();


'use strict';

describe('myapp configuration', function() {

    var RestangularProvider,
        localStorageServiceProvider,
        $httpProvider;

    //modules
    beforeEach(function () {

        angular.module('myapp.layout', []);
        angular.module('http-auth-interceptor', []);

    });


    //providers
    beforeEach(function () {

        module('restangular', function(_RestangularProvider_) {

            RestangularProvider = _RestangularProvider_;
            spyOn(RestangularProvider, 'setBaseUrl').and.callThrough();
        });

        module('LocalStorageModule', function (_localStorageServiceProvider_) {

            localStorageServiceProvider = _localStorageServiceProvider_;
            spyOn(localStorageServiceProvider, 'setPrefix').and.callThrough();

        });

        module('myapp', function(_$httpProvider_) {

            $httpProvider = _$httpProvider_;
            spyOn($httpProvider.interceptors, 'push').and.callThrough();

        });

        //module('myapp');

        inject();

    });

    describe('Restangular configuration', function() {

        it('setBaseUrl is set up', function() {

            expect(RestangularProvider.setBaseUrl).toHaveBeenCalled();

        });

    });

    describe('localStorage configuration', function() {

        it('setPrefix is set up', function () {

            expect(localStorageServiceProvider.setPrefix).toHaveBeenCalled();

        });

    });

    describe('$httpProvider configuration', function() {

        it('an interceptor is added', function() {

            expect($httpProvider.interceptors.push).toHaveBeenCalled();

        });

    });

});

Answer 1

我自己一直在做这个，实际上非常简单。以下是您可以执行此操作的两种方法，第一种是我推荐的方法。

要记住的是，当您初始化模块时，配置部分将自动运行，您可以使用它直接测试或帮助设置测试。

选项 1 - 使用假模块进行设置

  describe('config sets $httpProvider interceptor', function () {
    var $httpProvider;

    beforeEach(function () {
      // First we initialise a random module, we will get $httpProvider
      // from it and then use that to spyOn.
      module(function (_$httpProvider_) {
        $httpProvider = _$httpProvider_;
        spyOn($httpProvider.interceptors, 'push');
      });

      // Now we initialise the app we want to test, $httpProvider will be
      // the spy from before. 
      module('myapp');
      inject();
    });

    it('should add to $httpProvider interceptors', function () {
      expect($httpProvider.interceptors.push)
        .toHaveBeenCalledWith('authInterceptorFactory');
    });
  });

选项 2 - 仅使用您的模块

  describe('config sets $httpProvider interceptor', function () {
    var $httpProvider;

    beforeEach(function () {
      // First we initialise a your module, we will get $httpProvider
      // from it and then use that to assert on.
      module('myapp', function (_$httpProvider_) {
        $httpProvider = _$httpProvider_;
      });

      inject();
    });

    it('should add to $httpProvider interceptors', function () {
      expect($httpProvider.interceptors).toEqual(['authInterceptorFactory']);
    });
  });

同样，我的建议(以及我的做法)是选项 1。