Nie można wstrzykiwać dostawców do testu Karma.

Question

Próbuję wprowadzić dostawcę $ urlRouterProvider do moich testów, ale wciąż napotykam problem nieznanego dostawcy. Używam ui.router i testowanie dyrektyw i muszą być w stanie uzyskać dostęp do tych dostawcy lub wszystkie testy nie ...

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); 

    }); 


}); 

Karma .conf.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 
    }); 
}; 

app.js

'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)); 

    }); 

Błąd

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 

Każda pomoc będzie bardzo mile widziane ...

EDIT Ten problem występuje, gdy tylko zastrzyk dostawcą jest wymagane w argumentach wstrzyknąć; Podejrzewam, że dlatego $ httpBackend nie jest obecny, ponieważ zawiesza się w tym momencie ...

Answer 1

Tak więc okazuje się, że nie można wstrzyknąć '$ urlRouterProvider' w funkcję i oczekiwać, że wtryskiwacz $ $ ją znajdzie. czyli to nie będzie działać:

beforeEach(inject(function ($urlRouterProvider) { 

Zamiast tego, trzeba to zrobić za pomocą modułu, tak jak poniżej:

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

Answer 2

wersję maszynopisu to:

beforeEach(this.module(function ($urlRouterProvider: angular.ui.IUrlRouterProvider) { 
    $urlRouterProvider.deferIntercept(); 
})); 

W "this. "przed numerem module jest wymagany.

Musi również nadejść przed dowolnymi liniami beforeEach(inject(.