AngularJS - 供應商和注射的Karma測試

Question

我有很多麻煩，爲包含一些注射的提供者編寫單元測試用例。

的特定供應商是：

(function() { 
angular 
    .module('core.router', []) 
    .provider('routerHelper', routerHelperProvider); 

routerHelperProvider.$inject = ['$stateProvider', '$urlRouterProvider']; 

/** 
* This method Initializes the Router Helper provider to be used by all modules 
* 
* @param $stateProvider 
* @param $urlRouterProvider 
*/ 
function routerHelperProvider($stateProvider, $urlRouterProvider) { 

    this.$get = routerHelperService; 

    routerHelperService.$inject = ['$state']; 

    /** 
    * This method sets the methods to be used by the helper 
    * 
    * @param $state 
    * @returns {Object} 
    */ 
    function routerHelperService($state) { 
     var hasOtherwise = false; 

     return { 
      configureStates: configureStates, 
      getStates: getStates 
     }; 

     /** 
     * This method configures all the states to be used by the application 
     * 
     * @param {!String[]} states 
     * @param {!String} otherwisePath 
     */ 
     function configureStates(states, otherwisePath) { 
      states.forEach(function (state) { 
       //console.log("adding state", state.state, "with config", state.config); 
       $stateProvider.state(state.state, state.config); 
      }); 
      if (otherwisePath && !hasOtherwise) { 
       hasOtherwise = true; 
       $urlRouterProvider.otherwise(otherwisePath); 
      } 
     } 

     /** 
     * This method returns the states to be used by the application 
     * 
     * @return {Object} 
     */ 
     function getStates() { 
      return $state.get(); 
     } 
    } 
} })(); 

基本的單元測試是：

'use strict'; 

describe('core.router test', function() { 

    // All Service injections 
    var $urlRouterProvider, $stateProvider; 

    // Mocks 
    var m_url = function() { 
    }; 
    var m_state = function() { 
    }; 

    // Others 
    var routerHelper, urlRouter, state, base; 

    // Before statements 
    beforeEach(module('core.router', function ($provide, _routerHelperProvider_) { 
     $provide.value('$urlRouterProvider', m_url); 
     $provide.value('$stateProvider', m_state); 
     base = _routerHelperProvider_; 
    })); 

    // Starting the Factory 
    beforeEach(inject(function (_routerHelper_, _$urlRouter_, _$state_) { 
     routerHelper = _routerHelper_; 
     urlRouter = _$urlRouter_; 
     state = _$state_; 
    })); 

    describe('when testing it', function() { 
     it('should return true', function() { 

      //var abc = routerHelper.getStates(); 

      expect(1).toEqual(1); 
     }); 
    }); 
}); 

我不斷收到這樣的錯誤：

• Error: [$injector:unpr] Unknown Provider: $stateProvider
• Error: [$injector:unpr] Unknown Provider: $urlRouterProvider
• Error: [$injector:unpr] Unknown Provider: routerHelperProvider

我嘗試了幾種不同的模塊實例和幾個不同的注射，但我似乎無法使其工作。當我取出注射劑（$stateProvider，$urlRouterProvider和$state）時，單元測試很簡單。

Answer 1

所以，這將是解決方案，帶來了一些複雜性，因爲供應商是同時使用$狀態和$ stateProvider：

'use strict'; 

describe('core.router test', function() { 

    // All Provider injections 
    var $urlRouterProvider, $stateProvider; 

    // Mocks 
    var m_urlProvider = mockDataCore.urlRouterProvider(); 
    var m_stateProvider = mockDataCore.stateProvider(); 
    var m_state = mockDataCore.state(); 

    // Others 
    var routerHelper, base; 

    // Define the mock providers 
    beforeEach(function(){ 
     module(function($provide){ 
      $provide.provider('$urlRouter', m_urlProvider); 
      $provide.provider('$state', m_stateProvider); 
     }); 
    }); 

    // Start the module with the internal mock 
    beforeEach(function() { 
     module('core.router', function ($provide) { 
      $provide.value('$state', m_state); 
     }); 
    }); 

    // Load the provider with module to be able to call its configuration methods 
    beforeEach(function() { 
     module(['routerHelperProvider', function (_$urlRouterProvider_, _$stateProvider_, _routerHelperProvider_) { 
      $urlRouterProvider = _$urlRouterProvider_; 
      $stateProvider = _$stateProvider_; 
      base = _routerHelperProvider_; 
     }]); 
    }); 

    // Inject and start the provider 
    beforeEach(function() { 
     inject(['routerHelper', function (_routerHelper_, $state) { 
      routerHelper = _routerHelper_; 
     }]); 
    }); 

    // test cases 
    describe('when adding one state and no "otherwise"', function() { 
     it('otherwise should not be called and state should be saved to state list', function() { 

      spyOn(m_urlProvider, "otherwise"); 
      spyOn(m_stateProvider, "state"); 

      var simpleState = [{ 
       state : "home", 
       config : { 
        url: "/home" 
       }}]; 

      routerHelper.configureStates(simpleState); 

      expect(m_urlProvider.otherwise).not.toHaveBeenCalled(); 
      expect(m_stateProvider.state).toHaveBeenCalledWith("home", {url: "/home"}); 
     }); 
    }); 

    describe('when getting the states', function() { 
     it('should return the states', function() { 

      spyOn(m_state, "get"); 

      var states = routerHelper.getStates(); 

      expect(m_state.get).toHaveBeenCalled(); 
     }); 
    }); 
}); 

的模擬方法是：

var mockDataCore = (function() { 
return { 
    urlRouterProvider: urlRouterProvider, 
    stateProvider: stateProvider, 
    state: state 
}; 

function urlRouterProvider() { 
    return { 
     otherwise: function() { /* void */ 
     }, 
     $get: function() { /* void */ 
     } 
    }; 
} 

function stateProvider() { 
    return { 
     state: function() { /* void */ 
     }, 
     $get: function() { /* void */ 
     } 
    }; 
} 

function state() { 
    return { 
     get: function() { 
      return {}; 
     }, 
     go: function() { /* void */ 
     } 
    }; 
}})(); 

當然它並沒有涵蓋這家提供商的所有測試，但其餘的都很簡單。