缺少用于测试的注入(未知提供程序)

Question

我正在尝试为我的Angular.js应用程序编写单元测试，但我无法设法注入所需的内容(它无法找到合适的提供者)。

有人看到我错过了什么吗？

Firefox 21.0 (Linux) filter staticList should convert static list object into its display value FAILED
        Error: Unknown provider: staticListProvider <- staticList in /path/to/my-app/public/third-party/angular/angular.js (line 2734)
        createInjector/providerInjector<@/path/to/my-app/public/third-party/angular/angular.js:2734
        getService@/path/to/my-app/public/third-party/angular/angular.js:2862
        createInjector/instanceCache.$injector<@/path/to/my-app/public/third-party/angular/angular.js:2739
        getService@/path/to/my-app/public/third-party/angular/angular.js:2862
        invoke@/path/to/my-app/public/third-party/angular/angular.js:2880
        workFn@/path/to/my-app/test/lib/angular/angular-mocks.js:1778

        angular.mock.inject@/path/to/my-app/test/lib/angular/angular-mocks.js:1764
        @/path/to/my-app/test/unit/filtersSpec.js:19
        @/path/to/my-app/test/unit/filtersSpec.js:16
        @/path/to/my-app/test/unit/filtersSpec.js:3

应用程序：

angular.module('myApp', ['myAppFilters', 'ui.bootstrap', '$strap.directives']).
// Some other stuff

过滤器：

"use strict";

angular.module('myAppFilters', []).
    filter('staticList', function () {
        return function (listItem) {
            if (!listItem) {
                return '';
            }
            return listItem.value;
        };
    });    

测试：

'use strict';
describe('filter', function () {

   beforeEach(angular.module('myAppFilters'));

   describe('staticList', function () {

       it('should convert static list object into its display value',
           inject(function (staticList) {
               expect(undefined).toBe('');
               expect({key: 'A', value: 'B'}).toBe('B');
           }));
   });

})；

Karma配置：

basePath = '../';

files = [
    JASMINE,
    JASMINE_ADAPTER,
    'public/third-party/jquery/*.js',
    'public/third-party/angular/angular.js',
    'public/third-party/angular/i18n/angular-*.js',
    'public/third-party/moment/moment.min.js',
    'public/third-party/moment/moment-*.js',
    'public/js/**/*.js',
    'test/lib/**/*.js',
    'test/unit/**/*.js'
];

colors = true;
autoWatch = true;

browsers = ['Firefox'];

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

如果任何人想要查看完整的代码，应用程序存储库在这里：https://github.com/adericbourg/GestionCourrier

非常感谢,

Alban

Answer 1

在您的注入代码中

it('should convert static list object into its display value',
       inject(function (staticList) {
           expect(undefined).toBe('');
           expect({key: 'A', value: 'B'}).toBe('B');
       }));

将"inject(function (staticList)“替换为"inject(function (staticListFilter)”。这是angular遵循的一些随机约定。您可以查看此页面上的评论以了解更多信息http://docs.angularjs.org/tutorial/step_09

Answer 2

我遇到过类似的问题，但在我的例子中，我的过滤器名称包含后缀“filter”，这导致了同样的注入问题。

.filter('assetLabelFilter', function(){
  return function(assets, selectedLabels){
    // Implementation here
  };
});

我终于能够通过手动将过滤器注入到我的测试中来解决这个问题

'use strict';

  describe('assetLabelFilter', function() {

  beforeEach(module('filters.labels'));

  var asset1 = {labels: ['A']};
  var asset2 = {labels: ['B']};
  var asset3 = {labels: []};
  var asset4 = {labels: ['A', 'B']};
  var assets = [asset1, asset2, asset3, asset4];

  var assetLabelFilter;

  beforeEach(inject(function($filter) {
    assetLabelFilter = $filter('assetLabelFilter');
  }));

  it('should return only assets with selected label', function() {
    var selectedLabels = ['B'];
    expect(assetLabelFilter(assets, selectedLabels)).toEqual([asset2, asset4]);
  });
});

上面的回答让我意识到，为了使用angular教程的方式：

it('should ', inject(function(assetLabelFilter) {
  var selectedLabels = ['B'];
  expect(assetLabelFilter(assets, selectedLabels)).toEqual([asset2, asset4]);
}));

筛选器名称不能有后缀“filter”，因为它是上面答案中提到的神奇单词。

为了演示这个场景，我还创建了一个Plunker