Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Unit Testing AngularJS

5:18 Angular 1.x lesson by

Testing is a first class citizen in AngularJS. It is at its heart and soul. This lesson demonstrates using Karma to write a simple unit test for a Filter.


egghead.io comment guidelines

Avatar
egghead.io

Testing is a first class citizen in AngularJS. It is at its heart and soul. This lesson demonstrates using Karma to write a simple unit test for a Filter.

Avatar
John

This is going to be the only video on testing.

Liar

In reply to egghead.io
Avatar
amit

please add more videos on E2E testing

Avatar
Radu

For some reason I get TypeError: undefined is not a function

Avatar
amrish

There should be more details to show how to run tests and set up testing framework.

Avatar
Bartek

I agree, this is barely helpful

In reply to amrish
Avatar
Steven

Where does the injected filter named name "reverseFilter" come from as the filter attached to the app is simply called "reverse"?

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?