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 • 502,684 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 practice as 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 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 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'll find this new Engler project and this project we have these folders where I have included some code that we're going to use throughout the 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 the test. So it sort of ends you serve Iran Engy test. So this is going to build application and then it launches karma which is our test runner 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 0 otherwise it increments the number way 1. You may think this is really so simple and it looks nothing like angular. I don't 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 right now to create a uniters for dysfunction in the same folder you'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 that TS. This is the pattern that karma our test runner is looking for. Anytime we find files that match this pattern it looks at the tests in this files and runs those tests for us. Now in the projects that we create with Engler Seelye we use jazzmen as our testing framework which provides a bunch of functions that we use to write tests that 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 sweet 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 are 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 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. 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 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 these two should return 0 if input is negative. Now you can read this as a spec of the compute function. It should return 0 if input is negative. All right. Let's test this. So first I'm going to import this function from the top here I'm going to call it with negative 1 get the result. Now we need to assert that this result is zero. To do that we use the expect function that comes with jazzman So we expect this result to be zero. This is the API that comes with jazzman. Now we have a bunch of other methods here. Let me show you. So we have to be defined to be falsie 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 the 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 it 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 purity to your test. It's much easier if you don't like this terminal window. You can see the report of your tests in the browser. So when you run Engy test this will launch a browser window connected to karma. Now here if you click this debug on 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 0 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 how one failed test. And if we get back here and refresh this type look our test failed. Expected 0 to be 1. Now if we click this line here this takes us to the failed test. So here's the line where our expectation failed. Now let's fix this test. Now when it's 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's strings and arrays.