3.4 Testing Angular Filters
In this video, we’ll test a simple Angular filter using Mocha and Karma.
1.Introduction3 lessons, 07:24
2.Scaffolding a Testable Angular App5 lessons, 46:23
3.Testing Angular Applications5 lessons, 51:44
4.Code Coverage With Istanbul3 lessons, 18:01
5.End-to-End Testing With Protractor4 lessons, 23:27
6.Adding Finishing Touches4 lessons, 23:06
7.Conclusion1 lesson, 04:05
3.4 Testing Angular Filters
Welcome back ladies and gentlemen. In this tutorial we're going to implement testing filters. Luckily the implementation of and testing of filters is a bit simpler than testing controllers, so it won't take us too much time. Let's start by implementing a filter. Let's go to our main.js file. Now let's add a filter. And we'll just call it proper. It's going to return a string in proper case, so that if we have a contact and their name is in small letters, it'll appear big. Now the function that's an argument for filter returns a function. And the argument of that function is what we're operating on, the name. Now, we only want this to work on strings and numbers. That's a limitation we're going to put on our filter, so we'll say var type and we'll just make it equal Typeof name. Now, Typeof is a special argument that resolves to what the type of the argument after it is. So if name were a string, the variable type would be equal to string. And we'll say if type does not equal string or number throw an error. This is going to be important later. And lastly we're just going to return the string in a proper case. So follow with me as I code. We're going to return name.tostring in case it was a number. And we'll split that at every word. So now we have an array of individual words and no spaces. Now we'll turn that word into a map of words. And for each word, we'll take the first letter and turn it uppercase, and then we'll join that with the rest of the word, just as it were. And then we'll join what's been returned together back into a string. Well that's a mouthful. Does it work? What does it even do? It would be kind of hard to look at a function like this and say, yeah that'll turn name proper, it's a terse and difficult to read function. Which I did on purpose because we're now going to implement tests to make sure everything works perfectly. So let's go to our main.spec.js. Let's make a new describe block for the proper filter. And let's add a beforeEach block. And we'll insert the module. And now we'll do our injection. Injecting a filter can be done in just one step. We'll say proper = Injector.get. We won't get proper, we'll get the filter service. And filter will return an instance of the filter when passed that name. So we'll pass the name proper. And we now have an instance of our filter. So now we can write our tests. Let's start with the most obvious thing. Does a turn a string into a proper string? Let's say Now, inside an it block you can run multiple assertions. So we don't have to run just one. We might want to run multiple to check our corner cases, like we'll do now. So we'll say, So I've used an expect block and I've passed in proper ned stark. Now we can tell with our brains that this should be equal to Ned Stark, all capitals. Is it? Let's find out. We'll save that and run our tests. We have to put our it block outside before each. We put it inside by mistake. And run our tests. Okay, so it looks like its working but is it? Remember to make sure a test works we have to make it fail. Let's copy this line and will expect proper Cerse Lannister And let's just expect something wrong. What's expect in the proper case, Jaime Lannister. And we'll save that and run our tests. All right, so we get the exact right error, expected proper Cerse Lannister to equal Jaime Lannister. This is great, it means our filter is working. Isn't testing exciting? After about an hour or hour-and-a-half of setting up scaffolds, we're actually having fun with writing tests. So let's fix up this test. And we'll change Jamie to Cerse. This is a big step. We know now with confidence that this is a working function that will take a string and turn into proper case. However there's more that we can test. Remember it was supposed to be able to take a number and coerce into a string without throwing an error. So let's write a test for that. We should say it should take a number and return that number as a string. And we can write some more tests. We can say, for example, expect. Proper 40 to.equal("42") and we'll run our test. That's looking good. Let's add one more. We know it show throw an error on any other value. So let's say that. One thing that is important to keep in in mind is it is tricky to test for throwing errors. You must pass in a function that attempts to throw the error. Let's have a look. So to test that we'll call assert.throws But we don't just want to pass it proper undefined, though that will throw an error. We actually have to pass that in a function closure for it to work. So let's say function and just wrap proper undefined in it. So that should throw an error, let's give it a shot. It works, let's just make sure it's not false passing by changing proper string. That's right, it does not throw an error just as we expected. Let's fix this up. And save it. So this has been an excellent tutorial. We've really written some tests and have actually used tests in a practical way. Now you know for sure that the crazy function that we wrote in our main.js file works exactly as intended. You can take that and you can tell your boss that and it'll work or maybe you can just sleep easier. Either way I hope you've got a lot from this video on testing filters because there was a lot to take in.