Testing custom Filters
Overview
Now that we've created a custom filter, it's important that we test the output of the filter to make sure it's doing its job properly.
Objectives
- Describe testing filters
- Write a custom filter unit test
Testing filters
Like our services, we can inject filters into our tests. We use the $filter
helper.
As our filters do not care explicitly what type of data is given to them, we don't need to load them up in Protractor and test them in the actual application. We can simply inject them into our karma tests and test the functionality out of them with any data!
Let's say we've got this filter:
function firstUppercase() {
return function (str) {
return str.charAt(0).toUpperCase() + str.slice(1);
};
}
angular
.module('app')
.filter('firstUppercase', firstUppercase);
We can inject this using $filter
in our tests:
describe('UserService', function () {
var $controller, firstUppercase;
beforeEach(module('app'));
beforeEach(inject(function ($filter) {
firstUppercase = $filter('firstUppercase');
}));
});
Now, as we returned a function in our filter, we can simply call firstUppercase
as a function and receive our manipulated value in return.
describe('UserService', function () {
var $controller, firstUppercase;
beforeEach(module('app'));
beforeEach(inject(function ($filter) {
firstUppercase = $filter('firstUppercase');
}));
it('should capitalise the first letter', function () {
expect(firstUppercase('test')).toEqual('Test');
});
});
Nice - our tests now pass! You can pass through any data you like, meaning we can also test any filters that we create on datasets.