Unit Testing Fundamentals

Mosh Hamedani
A free video tutorial from Mosh Hamedani
Passionate Software Engineer and Best-selling Author
4.5 instructor rating • 20 courses • 552,437 students

Learn more from the full course

Testing Angular 4 (previously Angular 2) Apps with Jasmine

Learn to write unit and integration tests for your Angular apps and deploy them with confidence

02:10:00 of on-demand video • Updated April 2018

  • Write clean and maintainable tests for your Angular apps
  • Examine how much of your code is covered by tests
  • Write tests for re-usable components
  • Write tests for component templates
  • Write tests for forms
  • Write tests for confirmation boxes
  • Write tests for the navigation
  • Write tests for attribute directives
  • Work with asynchronous operations
  • Provide fake dependencies to components under test
  • Use spies to track function calls or replace functions
English [Auto] 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 a small, preferably less than 10 lines of code. They should have proper names and they should have a single responsibility. The same principles apply to your test code. So each test should be less than 10 lines of code. You should have a proper name that perfectly describes what it's doing and it should have a single responsibility. You should test only one thing. All right, now download the zip file I have attached to this lecture there you will find this New England project and 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 I need to do after you download this project is npm install and then engy test. So instead of engie serve, we run engy test. So this is going to build application and then it launches kharma, which is our test from 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 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 dysfunction in the same folder, you're going to create a new file. Look at the naming convention compute dot speck dots. So all our test files should have dots, back dots. This is the pattern that Kharma, a test runner, is looking for. So any time 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 Seelie, we use jazzmen 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 speck or a test. So let's see how we can use this describe we give our street 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 the street 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 called it function. And similarly, we give it a name, just 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 has a very bad name. It doesn't tell me what we're going to test here, but look at the implementation of this function when writing tests here. We need to test all execution patterns. So here we have two execution pads. One is for a negative number and the other is for a positive number. So we need to write to test here. So I'm going to change this to should return zero if input is negative, that 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 dysfunction 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 used 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 falsey, to be greater than to be less than and so on. So depending on what are you 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 saw smiles as soon as it detects a change, it runs the test. The. So here you can see the executed artist and the result was successful. Now if you have a big monitor, you can put this terminal window on the site. And as your 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 test. 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 engie test, this will launch a browser window connected to now here. If you click this department 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 refreshed this tab, look, our test failed, expected zero to be one. Now, if I click this line here. This takes us to the failed test. So here's the line where our expectation failed. Now back to your let's fix this test now we need to right the second test, so I'm going to select this test here. Hold down, shift out and the down arrow to duplicate the code modified its test name should increment the input if it is positive. Now, I'm going to give you a positive number like one, and we expect the result to be two. Save. Back here, refresh beautiful, we have two passing tests. Next, we're going to look at testing strings and array's.