Unit Testing AngularJS

John Lindquist: Before I go any further, I really need to introduce the concept of testing. We're going to test our filter to make sure that it works. This is going to be the only video on testing.

It's going to be a broad overview of what you should generally do. It's necessary, because when you start writing things like filters, you need to have absolute confidence that they're doing what you expect them to do, not just that they're magically working.

Let's delete our filter. We're going to use the Testacular test runner with the Jasmine testing framework. Again, I'm not going to show how to set this up, there's other videos on that. I'm planning on doing a separate video or course on it, but for right now, I just want to, again, do an overview of what it looks like.

We're going to describe a test suite of what our filters should do. Basically, we're going to need our module of my app to access any of those filters. The specific filter we want to talk about is the reverse filter, and let's talk about our expectations here and our specs.

Our reverse filter should reverse a string. We're going to inject a reverse filter into this, so it will inject, and then requires a function of our reverse filter. Basically, at this point, we write our expectations, and we say things like, expect a reverse filter to take the string of a, b, c, d, and that will equal, d, c, b, a.

That's a full test there saying that we should have a reverse filter, and it should take a string of a, b, c, d, and then to reverse it to d, c, b, a. If we run this, you'll see that quite a few things have failed.

Failing in unit test tests is actually a good thing, because it gives you the next step of what you need to do. We don't have a reverse filter. We need to set one up. That's basically what that test says. With that failure, it's telling us to do is just go up, and set up a reverse filter.

Create out reverse filter here. If you remember the syntax...Now, let's clear that out, and run it again. Our error of, "reverse filter doesn't exist" is gone. Now it says, "filter reverse should reverse a string." That's saying filter reverse should reverse a string, and it got back nothing, and expected d, c, b, a.

We headed back nothing, and it wanted, d, c, b, a. Let's make that pass d, c, b, a. This is kind of cheating, but it's actually a good thing, because you want to do the smallest step to get your test to pass. Now we're back to green. We've gone from the red cycle to the green cycle, but we know that we're really cheating here and this isn't enough test coverage to really guarantee that that's reversing anything.

We also want to expect that j, o, h, n will reverse to n, h, o, j, so John to nhoj, whatever. Then if I run the test again, it's going to fail again. You should reverse a string. We expected nhoj, we got back d, c, b, a. That's not correct.

Let's actually fulfill the requirements here. We'll return the input split and reverse, and join them back together. Now, if we run the test again, you'll see that the test passed. We are confident that based on our tests here, our expectations of a, b, c, d and j, o, h, n that those will be reversed.

We're pretty darn confident that any string that we're going to pass in is going to be reversed. You can write some more expectations around special characters, and those sorts of things to make sure you have full coverage if you start seeing other errors pop up. But, basically, that's what unit testing is.

It's taking the smallest things you can find in your code base, writing some very simple code around them to say, "Is this working as expected"? If it is, then you have automatic code you can run to guarantee that your code is working as expected. Hopefully that's helped you understand unit testing a bit more.

I'm not going to go much more into it as I go through AnglularJS, but I will cover it in the future so don't worry about that.