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

非常感谢，

阿尔

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）”。这是一个随机的约定角度跟随。您可以在此页面上查看评论以获取更多信息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]);
  });
});

上面的好回答让我意识到为了使用角度教程方式：

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

过滤器名称不能包含后缀“过滤器”，因为它是上面答案中提到的魔术词。

为了演示该场景，我还创建了Plunker

缺少注射试验（未知提供者）

2 个答案: