Unit Testing Fundamentals

All right. Now let's take a look at the fundamentals of unit testing. The first thing you need to know is that tests are first class citizens. So all the practices you have learned about writing clean and maintainable code applies to your tests as well. So here are some examples. Your functions or methods should be small, preferably less than ten lines of code. They should have proper names and they should have a single responsibility. The same principles applies to your test code, so each test should be less than ten lines of code. It should have a proper name that perfectly describes what it's doing and it should have a single responsibility. It should test only one thing. All right, now download the zip file I've attached to this lecture. There you will find this new angular project. In this project, we have these folders where I have included some code that we're going to use throughout this section. We start with very simple examples, and gradually as we go through this section, the examples get more and more complex. Now, the first thing we need to do after you download this project is NPM install and then NG test. So instead of NG serve, we run NG test. So this is going to build the application and then it launches karma, which is our test runner. All right. Now back here, we want to write our first unit test. So in the fundamentals folder here, we have this compute function, a very simple function. If we give it a negative number, it returns zero. Otherwise it increments the number by one. You may think this is really so simple and it looks nothing like Angular. I totally understand that. But bear with me. We're going to start with very simple examples. And gradually these examples get more complex. So if you do have some experience with unit testing, feel free to skip the next few lectures depending on your knowledge. But if you're an absolute beginner, you need to look at all the examples. All right. Now to create a unit test for this function in the same folder, we're going to create a new file. Look at the naming convention, compute dot spec dot ts. So all our test files should have dot spec dots. This is the pattern that karma our test runner is looking for. So anytime it finds files that match this pattern, it looks at the tests in these files and runs those tests for us. Now in the projects that we create with Angular CLI, we use Jasmine as our testing framework, which provides a bunch of functions that we use to write tests. The two functions that we use most of the time are describe and it. We use describe to define a suite, which is a group of related tests, and we use it to define a spec or a test. So let's see how we can use this. Describe. We give our suite a name, which is often the name of the system under test. So here we are writing tests for the compute function. I'm going to call this sweet compute. Now, the second argument here is a function that our test runner is going to call. So we can use this function syntax like this, or we can use the arrow function syntax, which is shorter and cleaner. So like this. Now here we have one or more tests or specs to define a test or a spec. We call the IT function. And similarly, we give it a name, test name and a function. So this is the body of our test. This is what we're going to write. And our test runner is going to call this function. And then it will tell us if the test succeeds or not. Now, what should we call this test? Test name is a very bad name. It doesn't tell me what we're going to test here. Well, look at the implementation of this function. When writing tests here, we need to test all execution paths. So here we have two execution paths. One is for a negative number and the other is for a positive number. So we need to write two tests here. So I'm going to change this to should return zero if input is negative. Now you can read this as a spec of the compute function. It should return zero if input is negative. All right, let's test this. So first, I'm going to import this function from the top. Now here I'm going to call it with negative one. Get the result. Now we need to assert that this result is zero. To do that, we use the expect function that comes with Jasmine. So we expect this result to be zero. This is the API that comes with Jasmine. Now we have a bunch of other methods here. Let me show you. So we have to be defined to be falsy to be greater than to be less than and so on. So depending on what you're going to expect, you can call one of these methods. You're going to see more examples throughout this section. All right, now let's run this test. So save. Now because karma is watching our test and source files. As soon as it detects a change, it runs the test again. So here you can see the executed our test and the result was successful. Now if you have a big monitor, you can put this terminal window on the side. And as you're coding and saving files, you can see if all tests are passing or something is failing. Alternatively, if you have double monitors, you can dedicate one monitor purely to your tests. It's much easier. Now, if you don't like this terminal window, you can see the report of your tests in the browser. So when you run a test, this will launch a browser window connected to karma. Now here, if we click this debug button and open Chrome developer tools on the console tab, you can see the list of all tests and their status. So here we have one test compute should return zero if input is negative and you can see that this test is successful. Now let me show you what happens when a test fails. So back to our test code. I'm going to change this and say it should be one. Save. Now in the terminal, you can see we have one failed test. And if we get back here and refresh this tab, look, our test failed. Expected zero to be one. Now, if we click this line here, this takes us to the failed test. So here's the line where our expectation failed. Now back here, let's fix this test. Now we need to write the second test. So I'm going to select this test here. Hold down shift alt and the down arrow to duplicate the code. Modify the test name should increment the input if it is positive. Now I'm going to give it a positive number like one. And we expect the result to be to save back here. Refresh. Beautiful. We have two passing tests. Next, we're going to look at testing strings and arrays.