未知提供者：茉莉花 angular 测试中的 $angularFileUploadProvider <- $angularFileUpload

Question

我的 angular 模块上有一个指令，我正在尝试为其编写测试。首先，我不清楚如何正确测试该指令，但此时，当 karma 运行测试时我收到以下错误。

Unknown provider: $angularFileUploadProvider <- $angularFileUpload

这是我的测试。

describe('Testing onlyDigits directive', function(){

    var elm, scope;

    beforeEach(module('jobBoard'))

    beforeEach(inject(function($route, $filter, $angularFileUpload, $animate, $rootScope, $compile) {
        elm = angular.element('<input id="testinput" type="number" onlyDigits />');
        scope = $rootScope;
        $compile(elm)(scope);
        scope.$digest();
    }));

    it('should limit input to numbers and decimal', function(){

    })
})

这是我的带有指令的模块...

angular.module('jobBoard', ['ngRoute', 'jobFilters', 'angularFileUpload','ngAnimate'])
    .config(['$routeProvider', '$locationProvider','$sceDelegateProvider', 'templates', function($routeProvider, $locationProvider, $sceDelegateProvider, templates){
        //routes ommitted for brevity
    }
]).directive('onlyDigits', function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {
            if (!ngModel) return;
            ngModel.$parsers.unshift(function (inputValue) {
                var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' ' || s == '.'); }).join('');
                ngModel.$viewValue = digits;
                ngModel.$render();
                return digits;
            });
        }
    };
});

这是我的业力配置文件

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

    basePath : './',

    files : [
      'vendor/assets/javascripts/angular/angular.js',
      'vendor/assets/javascripts/angular-route/angular-route.js',
      'vendor/assets/javascripts/angular-animate/angular-animate.js',
      'vendor/assets/javascripts/ng-file-upload-shim/angular-file-upload.js',
      'vendor/assets/javascripts/ng-file-upload/angular-file-upload.js',
      'vendor/assets/javascripts/angular-mocks/angular-mocks.js',
      'app/assets/javascripts/components/**/*.js',
      'app/assets/javascripts/view*/**/*.js',
      'spec/javascripts/**/*_spec.js'
    ],

    autoWatch : true,

    frameworks: ['jasmine'],

    browsers : ['Chrome'],

    plugins : [
            'karma-chrome-launcher',
            'karma-firefox-launcher',
            'karma-jasmine',
            'karma-junit-reporter'
            ],

    junitReporter : {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    }

  });
};

Answer 1

您在 jasmine beforeEach 设置中注入了大量服务：

beforeEach(inject(function($route, $filter, $angularFileUpload, $animate, $rootScope, $compile) {
    // ...
}

您应该只注入您在 beforeEach 函数中实际使用的服务：$rootScope 和 $compile:

beforeEach(inject(function($compile, $rootScope) {
    // ...
});

特别是您尝试注入的 $angularFileUpload 服务未在加载的任何模块中定义：'jobBoard' 和 ['ngRoute', 'jobFilters', 'angularFileUpload','ngAnimate']

未知提供者：茉莉花 angular 测试中的 $angularFileUploadProvider <- $angularFileUpload

Unknown provider: $angularFileUploadProvider <- $angularFileUpload in jasmine angular test

angularjs

jasmine

karma-jasmine