Testing Filters

Problem

You wish to unit test your new filter. Let us start with an easy filter, which renders a checkmark depending on a boolean value.

<body ng-init="data = true">
  <p>{{ data | checkmark}}</p>
  <p>{{ !data | checkmark}}</p>
</body>
var app = angular.module("MyApp", []);

app.filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
});

Solution

Use the angular-seed project as a bootstrap again.

describe('MyApp Tabs', function() {
  beforeEach(module('MyApp'));

  describe('checkmark', function() {
     it('should convert boolean values to unicode checkmark or cross',
        inject(function(checkmarkFilter) {
       expect(checkmarkFilter(true)).toBe('\u2713');
       expect(checkmarkFilter(false)).toBe('\u2718');
     }));
   });
});

Discussion

The beforeEach loads the module and the it method injects the filter function for us. Note, that it has to be called checkmarkFilter, otherwise Angular can’t inject our filter function correctly.