Injecting Custom Filters in an AngularJS Unit Test

#unit testing

#javascript

#jasmine

#angularjs

Problem

You need to inject a custom AngularJS filter object to a (Jasmine) unit test spec for testing.

Solution

There are so many ways you can inject a custom filter object to a unit test spec in AngularJS. The following sample code illustrates 2 ways to inject the same custom filter object to a unit test case.

The filter function:

var filters = angular.module('myNameSpace.filters', []);

filters.filter('reverse', function() {
  return function(text) {
    return text.split('').reverse().join('');
  };
});

The test spec:

describe('myNameSpace.filters', function() {
  describe('EchoService', function() {
    var createFilter;

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

    beforeEach(inject(function($filter) {
      createFilter = function() {
        return $filter('reverse');
      };
    }));

    it('should reverse', function() {
      var filter = createFilter();
      expect(filter('hello')).toBe('olleh');
    });
  });
});

A shorter version...

describe('myNameSpace.filters', function() {
  describe('EchoService', function() {
    beforeEach(module('angularjs.testing.filters'));

    it('should reverse', inject(function($filter) {
      var reversedText = $filter('reverse')('hello');
      expect(reversedText).toBe('olleh');
    }));
  });
});

Written by Samuel Chow

Say Thanks

Respond

Related protips

Injecting Custom Services in an AngularJS Unit Test

18.75K

Unit Testing a Custom AngularJS Directive

9.095K

Injecting Custom Controllers in an AngularJS Unit Test

2.78K

1 Response

Add your response

Sanchita

I am facing issue in writing test case in filter. Here is my code

test.js
describe('app', function() {

beforeEach(angular.mock.module('app'));

var $filter;

angular.mock.inject(function(_$filter_) {
    $filter = _$filter_;
});

it('should convert hours to minute 1*60', function($filter) {
  var hours = $filter('hoursToMinutes')(1);
  expect(hours).toBe(60);
});

});
filter.js
app.filter('hoursToMinutes', function() {
return function(hours) {
return hours * 60;
};
});
app.js
var app = angular.module('app', [
'ngAnimate',
'ui.bootstrap',
'ngCookies',
'ngSanitize',
'ngRoute',
'ui.router',
'base64',
'smart-table',
'dialogs.main',
'angularBootstrapNavTree',
'blockUI',
'angular-json-rpc',
'ngHandsontable',
'ui.bootstrap',
'filters.camelcase',
'ngVis',
'schemaForm',
'cfp.loadingBar',
'ngFileUpload',
'smart-table',
'angular-uuid',
'xeditable',
'ui.sortable',
'jp.ng-bs-animated-button',
'agGrid',
'angular-confirm',
'git-grid',
'filters.camelcase',
'angularMoment',
'ng.jsoneditor',
'long2know',
'blockUI',
// 'ngIdle',
'chart.js',
'angular-growl',
'ui.toggle',
'angularFileUpload'
]);
karma.conf.js
files: [
'../../../bowercomponents/angular/angular.js',
'../../../bowercomponents/angular-animate/angular-animate.js',
'../../../bowercomponents/angular-mocks/angular-mocks.js',

'../../../bowercomponents/angular-sanitize/angular-sanitize.js',
'../../../bowercomponents/angular-bootstrap/ui-bootstrap.js',
'../../../bowercomponents/angular-bootstrap/ui-bootstrap-tpls.js',
'../../../bowercomponents/angular-cookies/angular-cookies.js',
'../../../bowercomponents/angular-validation-match/src/angular-validation-match.js',
'../../../bower_components/ng-sortable/dist/ng-sortable.js',
'../app.js',
'../filters.js',
'../controllers/controllers.js',

'unit/*.js'
],

when running the karma its throwing me this error

forEach@C:/Sunguard%20Project/Unit%20Testing%20Sgas-UI/sgas-res-ui/sgas-res-ui/bowercomponents/angular/angular.js:410:24
loadModules@C:/Sunguard%20Project/Unit%20Testing%20Sgas-UI/sgas-res-ui/sgas-res-ui/bowercomponents/angular/angular.js:4917:12
createInjector@C:/Sunguard%20Project/Unit%20Testing%20Sgas-UI/sgas-res-ui/sgas-res-ui/bowercomponents/angular/angular.js:4839:30
WorkFn@C:/Sunguard%20Project/Unit%20Testing%20Sgas-UI/sgas-res-ui/sgas-res-ui/bowercomponents/angular-mocks/angular-mocks.js:3172:60
loaded@http://localhost:9876/context.js:162:17
C:/Sunguard%20Project/Unit%20Testing%20Sgas-UI/sgas-res-ui/sgas-res-ui/bower_components/angular/angular.js:4958:53

over 1 year ago ·