如何在AngularJS 1.x中unit testing一个filter
你如何在Angular中testing一个filter？
注入$filter ，然后用$filter('filterName')(input, options);调用它$filter('filterName')(input, options);
所以要testing这个模板的等价物{{ 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'); }); });
您可以注入$ filter并加载您想要testing的filter。 然后你通过参数进行过滤，通过你已经注入的filter，你'期望'你需要什么。 这里是一个例子：
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); }); });
filter可以正确注入testing（ 在这里find一个片段）
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(); })); });
在这个例子中，filter的名字是'bool'，为了注入这个filter，你应该使用'bool'+'Filter'='boolFilter'
除了注入实际的$filter服务之外，还有其他一些方法来testing一个过滤$filter 。
例：
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); }); });
这里有一个可运行的filtertesting例子。
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="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>
