Join us in our way to learning Angular.js

Introduction to Unit Test: Filters

Filters are the easiest components to test in Angular. That is why I decided to explain them first. Our first job is to decide what we want to achieve and in this case I decided to write a custom uppercase filter with options.

What should our filter do? Our filter will uppercase the entire input or just part of it based on an input. Let’s describe how we would like to use it here:

{{ “hello” | upper }} – HELLO

{{ “hello” | upper:4 }} – HELLo

{{ “hello” | upper:-2 }} – helLO

As you see, we want a numeric argument to specify how many characters we want to uppercase, which can also be a negative number to start from the end.

We learned about this in the introduction. We are simply loading out app module (where we are going to put our filter) and then we are injecting it. Filters are injected using nameFilter where name is the name of the filter.

There are a couple ways of testing, we can write all the tests at once or we can write some tests and make them pass and repeat until it is feature complete or we can write all the tests at once. We are going to use the first technique here.

Let’s add the first one (just after the last beforeEach):

1234

it('should be able to uppercase an entire input',function(){expect(upperFilter('hello')).toBe('HELLO');expect(upperFilter('hello world')).toBe('HELLO WORLD');});

As you see, testing a filter is really really easy. We only need to call it passing the input we want to process.

We added another branch to see if quantity is less than 0 and if so, we just uppercase the last quantity characters.

Good, our upperFilter is now feature complete. That doesn’t mean it is finished yet. What happens if the quantity is longer than the input? Let’s test it:

1234

it('works with a quantity longer than the input',function(){expect(upperFilter('hello',10)).toBe('HELLO');expect(upperFilter('hello',-10)).toBe('HELLO');});

See the error:

Wait… there is no error. Indeed. In TDD you also need to test some corner cases like this one. Luckily for us, there is no work to be done here. It works perfect by default. Still, we proved that that behavior is not problematic.