CODEWITHSUNDEEP
angularjsjasminekarma-runner
Alban Dericbourg
Alban Dericbourg

Reputation: 1636

Missing injection for test (unkown provider)

I am trying to write unit tests for my Angular.js application but I cannot manage to inject what I need (it is not able to find a suitable provider).

Does anyone see what I missed?

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

The application: 

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

The filters:

"use strict";

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

The test:

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

});

The Karma configuration:

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

If anybody wants to see the full code, the application repository is here: https://github.com/adericbourg/GestionCourrier

Thanks a lot,

Alban

Upvotes: 1

Views: 1099

Answers (2)

Spaideri
Spaideri

Reputation: 514

I faced similar problem, but in my case my filter name contained suffix 'Filter' which caused the same injection problem.

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

I was finally able to solve the problem by manually injecting the filter to my test

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

The nice answer above made me realize that in order to use the angular tutorial way:

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

The filter name can't have the suffix 'Filter' because it is magic word as mentioned in the answer above.

To demonstrate the scenario I also created a Plunker

Upvotes: 1

Shashank Tomar
Shashank Tomar

Reputation: 862

In your inject code

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

replace "inject(function (staticList)" with "inject(function (staticListFilter)". This is some random convention angular is following. You can check comments on this page for more info http://docs.angularjs.org/tutorial/step_09

Upvotes: 3

Related Questions