Javascript 无法将提供者注入Karma测试

Javascript 无法将提供者注入Karma测试,javascript,angularjs,karma-runner,Javascript,Angularjs,Karma Runner,我试图将$urlRouterProvider注入到我的测试中,但我一直遇到未知的提供者问题。我正在使用ui.router和测试指令,需要能够访问这些提供程序,否则所有测试都会失败 navbar.spec.js 'use strict'; describe('Directive: nav-bar', function () { beforeEach(module('ui.router')); beforeEach(module('ngMock')); beforeEach(modu

我试图将$urlRouterProvider注入到我的测试中,但我一直遇到未知的提供者问题。我正在使用ui.router和测试指令,需要能够访问这些提供程序,否则所有测试都会失败

navbar.spec.js

'use strict';

describe('Directive: nav-bar', function () {

  beforeEach(module('ui.router'));
  beforeEach(module('ngMock'));
  beforeEach(module('kitchenapp'));


  var $httpBackend,
    $templateCache,
    $compile,
    $urlRouterProvider,
    $scope;

  beforeEach(inject(function (_$httpBackend_, _$templateCache_, _$compile_, _$urlRouterProvider_) {


    $httpBackend = _$httpBackend_;
    $templateCache = _$templateCache_;
    $compile = _$compile_;
    $urlRouterProvider = _$urlRouterProvider_;

    $urlRouterProvider.deferIntercept();

    $scope = $rootScope.$new();
    element = angular.element('<nav-bar></nav-bar>');
    element = $compile(element)(scope);
    $rootScope.$$phase || $rootScope.$apply();


  }));

  afterEach(function () {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  it('\'s brand link should be titled \'KitchenApp\' and should navigate to the root address when clicked', function () {

    expect(2).toEqual(2);

  });


});
app.js

'use strict';

module.exports = function (config) {
  config.set({

    basePath: 'client',

    frameworks: ['jasmine'],

    preprocessors: {
      '**/*.html': ['ng-html2js']
    },

    ngHtml2JsPreprocessor: {
      stripPrefix: 'client/',
      moduleName: 'templates'
    },

    plugins: [
      'karma-phantomjs-launcher',
      'karma-jasmine',
      'karma-ng-html2js-preprocessor'
    ],

    files: [
      'bower_components/angular/angular.js',
      'bower_components/angular-ui-router/release/angular-ui-router.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
      'bower_components/angular-ui-grid/ui-grid.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-socket-io/socket.min.js',
      'bower_components/angular-touch/angular-touch.js',
      'bower_components/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.js',
      'app.js',
      'views/**/*.js',
      'services/**/*.js',
      'directives/**/*.js',
      'directives/**/*.html'
    ],

    exclude: [
      'views/**/*.e2e.js',
      'services/socket/socket.service.js'
    ],

    reporters: ['progress'],

    port: 9876,

    colors: true,

    // possible values:
    // config.LOG_DISABLE
    // config.LOG_ERROR
    // config.LOG_WARN
    // config.LOG_INFO
    // config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    autoWatch: false,

    browsers: ['PhantomJS'],

    singleRun: true
  });
};
'use strict';

angular.module('kitchenapp', [
  //Native services
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngAnimate',
  'ngTouch',

  //3rd party
  'btford.socket-io',
  'ui.router',
  'ui.grid',
  'mwl.calendar',
  'ui.bootstrap'
])
  .config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider, calendarConfigProvider) {

    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true);
    $httpProvider.interceptors.push('authInterceptor');

    calendarConfigProvider.configureDateFormats({
      hour: 'HH:mm' //this will configure the hour view to display in 24 hour format rather than the default of 12 hour
    });

    calendarConfigProvider.configureTitleFormats({
      day: 'ddd D MMM' //this will configure the day view title to be shorter
    });

  })
  .factory('authInterceptor',
  function ($rootScope, $q, $cookieStore, $location) {
    return {

      request: function (config) {
        config.headers = config.headers || {};
        if ($cookieStore.get('token')) {
          config.headers.Authorization = 'Bearer ' + $cookieStore.get('token');
        }
        return config;
      },

      responseError: function (response) {
        if (response.status === 401) {
          $location.path('/login');
          $cookieStore.remove('token');
          return $q.reject(response);
        }
        else {
          return $q.reject(response);
        }
      }

    };
  })

  .run(function ($rootScope, $state, Auth) {

    $rootScope.Auth = Auth;
    //$rootScope.$on("$stateChangeError", console.log.bind(console));

  });
错误

Error: [$injector:unpr] Unknown provider: $urlRouterProviderProvider <- $urlRouterProvider
http://errors.angularjs.org/1.3.15/$injector/unpr?p0=%24urlRouterProviderProvider%20%3C-%20%24urlRouterProvider
    at /Users/jamessherry/sites/kitchenappFull/client/bower_components/angular/angular.js:4015
    at getService (/Users/jamessherry/sites/kitchenappFull/client/bower_components/angular/angular.js:4162)
    at /Users/jamessherry/sites/kitchenappFull/client/bower_components/angular/angular.js:4020
    at getService (/Users/jamessherry/sites/kitchenappFull/client/bower_components/angular/angular.js:4162)
    at invoke (/Users/jamessherry/sites/kitchenappFull/client/bower_components/angular/angular.js:4194)
    at workFn (/Users/jamessherry/sites/kitchenappFull/client/bower_components/angular-mocks/angular-mocks.js:2436)
undefined
TypeError: 'undefined' is not an object (evaluating '$httpBackend.verifyNoOutstandingExpectation')
    at /Users/jamessherry/sites/kitchenappFull/client/directives/nav-bar/nav-bar.spec.js:34

错误:[$injector:unpr]未知提供程序:$urlRouterProviderProvider因此,您无法将“$urlRouterProvider”注入函数并期望$injector找到它。i、 e.这不起作用:

beforeEach(inject(function ($urlRouterProvider) {
相反,您必须使用模块进行操作,如下所示:

beforeEach(module(function($urlRouterProvider) {
      console.log('in', $urlRouterProvider);
      $urlRouterProvider.deferIntercept();
    }));

此的Typescript版本为:

beforeEach(this.module(function ($urlRouterProvider: angular.ui.IUrlRouterProvider) {
    $urlRouterProvider.deferIntercept(); 
}));
模块前面的“
this.
”是必需的


它也必须出现在任何
之前(inject(
行)。

您尝试过在karma文件列表中移动角度模型吗?也许应该在ui-router之前加载它。嗨@Davintroon,我尝试过处理订单,但没有用……。(谢谢,将“inject”更改为“module”修复了我的问题。