How to unit test filter in AngularJS 1.x

Question

How do you unit test filter in Angular?

Answer 1

Insert $filter and then call it with $filter('filterName')(input, options);

So, to check the equivalent of this pattern {{ foo | testFilter:capitalize }} {{ foo | testFilter:capitalize }}

 describe('The test filter', function () { 'use strict'; var $filter; beforeEach(function () { module('myTestFilterModule'); inject(function (_$filter_) { $filter = _$filter_; }); }); it('should capitalize a string', function () { // Arrange. var foo = 'hello world', result; // Act. result = $filter('testFilter')(foo, 'capitalize'); // Assert. expect(result).toEqual('HELLO WORLD'); }); }); 

Answer 2

You can enter the filter $ filter and load the filter that you want to check. Then you pass the parameter to filter through the filter you entered, and you expect what you need. Here is an example:

 describe('Filter test', function(){ var filter; beforeEach(function(){ module.apply(moduleName); inject(function($injector){ filter = $injector.get('$filter')('nameOfTheFilter'); }); }); it('should filter the parameters passed', function(){ expect(filter(parameterToBeFiltered)).toBe(Result); }); }); 

Answer 3

The filter can be entered directly into the test (found a fragment here )

  describe('myApp', function () { beforeEach(function () { module('myApp'); }); it('has a bool filter', inject(function($filter) { expect($filter('bool')).not.toBeNull(); })); it("should return true empty array ", inject(function (boolFilter) { expect(boolFilter(true)).toBeTruthy(); })); }); 

In this example, the filter name is "bool", to enter this filter, you must use 'bool' + 'Filter' = 'boolFilter'

Answer 4

There are other ways to test the filter, except that you are using the actual $filter service.

Example:

 describe('FILTER: myFilterName', function(){ // You can put anything in the string here, // I like declaring FILTER: myFilterName, but it // could be just the filter name. var myTestTheFilterVariableName; // This variable does not have to match the describe name, call it what you wish, // but use this variable in any it blocks below. beforeEach(module('obsidian')); // Include app - boilerplate. beforeEach(inject(function(actualFilterNameFilter){ // If your test variable name is the same as 'actualFilterNameFilter' then you would // use this name '_actualFilterNameFilter_' with underscores; The Angularjs injector will // remove the underscores for you. // IMPORTANT PART: The important part here is the trailing 'Filter' name. This is how Angularjs // Knows to grab the filter title "actualFilterName" in this case. myTestTheFilterVariableName = actualFilterNameFilter; })); // This is where you actually include the filter for testing. // Use the underscores if your variable name is the exact same as the injected parameter. // This is where you would use your variable name from above. it('should do something here', function(){ expect(myTestTheFilterVariableName(filterParameter)).toEqual(expectedResultHere); }); }); 

Answer 5

Here is an example of a test startup script.

 angular.module('myModule', []).filter('multiplier', function() { return function(number, multiplier) { if (!angular.isNumber(number)) { throw new Error(number + " is not a number!"); } if (!multiplier) { multiplier = 2; } return number * multiplier; } }); describe('multiplierFilter', function() { var filter; beforeEach(function() { module('myModule'); inject(function(multiplierFilter) { filter = multiplierFilter; }); }); it('multiply by 2 by default', function() { expect(filter(2)).toBe(4); expect(filter(3)).toBe(6); }); it('allow to specify custom multiplier', function() { expect(filter(2, 4)).toBe(8); }); it('throws error on invalid input', function() { expect(function() { filter(null); }).toThrow(); }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-mocks.js"></script> 

Note: this answer was created after the Sun Documentation Sunset based on the example filter AngularJS unit test and the Meta suggestion so that all the valuable documentation contents are converted to answers.