Designing and coding

Menu

Getting started with Unit Testing in {{AngularJS}} – Part 19

Unit Testing one of the important activities in software development. It helps in reducing the number of bugs in the code and maintaining the code quality. As now a days we work on small releases and keep adding/updating features, Unit Test plays a vital role in maintaining the quality and helps in making sure that new changes does not break earlier functionality and reduces the testing effort. Unit Test becomes more important for languages like JavaScript because it is loosely typed and we don’t find issues until we run the functionality. Also testing and debugging JavaScript is another time consuming activity.

Note – This post is a part of series of posts on AngularJS and it is 19th one. Click here to view all the post. Apart from that you can also use the navigation links for next and previous post in each post at the bottom to check all.

What is Unit Testing

Unit Test is a snippet of code or function which tests a unit of code (function/API) and all the required dependencies are mocked. It means it just test the business logic written in the function and if any other dependent instance is required then mocked version is used. Unit test does not call any real service, database call etc.

What do we need in AngularJS to get started

Being a .NET developer, I have written thousands of unit tests using C# and Visual Studio. You might be knowing that to create and run an unit test, we require unit test framework where we can run our unit test (like NUnit, MSTest etc), Unit test APIs , Mocking framework (like NMock, Rhino mock) and then these tests can be part of Continuous Integration system where we can run the unit tests on every check-in to the repository. Similar infrastructure set up we also need in AngularJS. There are many options but I am going to use the most recommended one’s. Let’s discuss all

Jasmine – It is a behavior driven development framework for testing JavaScript code and preferred for Angular Applications. There are similar others like Qunit that we can use.

Angular- mock – Angular provides its own mocking framework which helps in mocking the dependent objects.

Test Runner – One of the most used Test-runner in Karma but as we are fond of using Visual Studio, there is another nice test runner called Chutzpah which provides a plugin (Chutzpah Test Adapter) for Visual Studio which is very useful.

We have discussed the required tools. Now let’s set up our environment as

Now we have set up our solution. First we will write a simple (addition) method and a unit test to verify the set up. Before writing test let’s understand the following three items which are minimum to write any unit test using Jasmine.

describe – This is a global function that takes string and function as parameter which represents a suite of test. In another way, it provides us a way to group multiple tests.

it – This is another function which is written inside global function and takes two parameter as above string and function and this function is actual test.

expect – It takes the function that need to be tested as parameter and provide a list of matchers to match the result.

So we have written our first test. I already explained the special key words used here. You also need to include the references of Jasmine library and Home.js here. To run this Unit test, we just need to build the solution and open the Test Explorer and run the Unit Test. After running the Unit Test it will show green as

It means we have set up our infrastructure correctly. So let’s move to real stuff. First we will create a MVC sample application then write unit test. This application would be similar to which we have created in our series of post. But we will take small steps to understand it better. Our MVC application looks as

Let’s see code quickly. Our MVC controller (HomeController) has just one Index method which returns a view. Our Index View is as

Also I have included Angular library, Home.js and added ng-app attribute as well. Now we will write the unit test for our Angular Controller.

First let’s understand our Angular controller. Here We have a module and a controller which takes one parameter $scope. So while writing test, we require these three items and these need to be initialized first before running the test. To initialize, Jasmine provides us beforeEach function which can be used to initialize the items which runs before the test. And we need Angular mock library to set up all. Let’s see the test and then discuss each

In the above code snippet, we first created two variables then initialized homeModule after that we injected controller and scope instance with the help of mock. In our Test, we are testing that length of talks returned by our controller is four. Now we can run our unit test via Test Explorer and it will pass. Similarly we can write many more tested for controller’s functions.

Conclusion

In this post, we talked about Unit test in angular. What are the basic things required to set up the project and get it started. Then we created a simple function Add and wrote unit test for that to check the setup. We continued writing the unit test of our controller and saw that how to initialized items before running the test. Hope you have enjoyed the post. In next Post we will continue talking about Unit Testing and write unit tests for some other components.