filters

Filters

Testing recipes for filters

Table of contents

• Boilerplate
• Best Practices
• Doesn't use any special characters and namespace
• Combining filters

Boilerplate

Before start we need to initialize the related filter and mock it's dependencies.

// filters.spec.js
describe('Filter: trim', function () {
  'use strict';

  var trim;

  beforeEach(module('myApp'));

  beforeEach(inject(function ($filter) {
    trim = $filter('trim');
  }));

  ...
});

Best Practices

Doesn't use any special characters or "namespaces"

When you create your filtes, please attemp for the filter name. These approaches are incorrects:

$filter('my.awesome.filter')(data);
$filter('myaw2s0mefilter')(data);
$filter('my@wesomefilter')(data);

For this case, the correct filter is:

$filter('myAwesomeFilter')(data);

Check this issue in the angular.js repository for more info.

Combining filters

If you're combining filters or using strategy pattern its still simple to test. Let's consider the snakeCase filter which uses the trim filter internally:

angular.module('myApp')
  .filter('snakeCase', function($filter) {
    return function(input) {
      if (input === null || input === undefined) {
        input = '';
      }

      // Using `trim` filter that already exist
      var $trim = $filter('trim');
      return $trim(input)
        .replace(/([a-z\d])([A-Z]+)/g, '$1_$2')
        .replace(/[-\s]+/g, '_')
        .toLowerCase();
    };
  });

The unit tests for snakeCase filter will follow the same strategy as the trim filter, without worrying about each other. They must be all separated even one using the other as a dependency.

describe('snakeCase', function () {
  'use strict';

  var snakeCase;

  beforeEach(module('myApp'));

  beforeEach(inject(function ($filter) {
    snakeCase = $filter('snakeCase');
  }));

  it('should return the input string with snakecase format', function () {
    var text = 'angular js';
    expect(snakeCase(text)).toBe('angular_js');
  });

  it('should return the input string empty if input element value is equal "undefined" or "null" ', function () {
    expect(snakeCase(undefined)).toBe('');
    expect(snakeCase(null)).toBe('');
  });
});

In some cases you may want to mock dependencies to simplify the tests. For more details about $filter, take a look in post "AngularJS: About $filter"