缺少注入測試（未知提供者）

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

}）;

卡瑪配置：

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（staticListFilter）」替換「inject（function（staticList）」。這是一些隨機的約定角正在跟隨。您可以在此頁面上查看評論以獲取更多信息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