Note: Although we say this post will show you how to use Visual Studio to write AngularJS applications and unit tests, you can use these methods to configure test environments for any IDE.

To write unit tests I will use jasmine, to run them I’ll use karma, and to create proxies of AngularJS components like filter, controller, and service, I’ll use ng-mock. In this post we will cover the following topics:

Setting up the development environment

Setting up the test environment for jasmine

Setting up the karma test runner environment

Writing the unit test for filter, controller, and service

We will use npm to install dependencies and Visual Studio to write code, and we’ll run tests using karma from the command prompt. At the end of the post, we should have tests running as shown in the image below:

So let’s get started!

Step 1

Even though I am creating an AngularJS project in Visual Studio, you can create project using any IDE of your choice. The only thing you need to keep in mind is that all commands we will run here should be executed inside the root folder of the project.

Step 2

Once the project is created, launch the command prompt as an admin and change the directory to the root folder of the created project folder. In the case of Visual Studio, change the directory to the project folder, not the solution folder.

Step 3

We need to make sure that NodeJS is installed on the machine. If it is not installed, download and install it from https://nodejs.org/en/. We can verify whether NodeJS is installed or not by running the following command:

node --version

If we get NodeJS version as an output, then NodeJS is installed on the machine.

Step 4

Next, let’s install AngularJS to the project. There are various ways to do so (NuGet package, Bower etc.), however, I am choosing NPM to install AngularJS in the project. To install, run the npm command as shown below:

npm install angular --save

Step 5

Now we are going to use Karma test runner to run tests. Learn more about Karma here: https://karma-runner.github.io/1.0/index.html Created by the Angular team, Karma is a spec-based test runner. To install Karma, run the command as shown below:

npm install -g karma --save-dev

Step 6

We are going to use Jasmine, behavior driven JavaScript Test framework to write Unit Tests. Learn more about Jasmine here: http://jasmine.github.io

We will install Jasmine Core and Jasmine Karma. To install them run the command as shown below:

npm install karma-jasmine jasmine-core --save-dev

Step 7

We will use the ngMock module to mock up AngularJS services, modules, controllers, filters and more. To use ngMock, we need to install the angular-mocks library in the project. To do so, run the command as shown below:

npm install angular-mocks --save-dev

Step 8

Karma allows us to run tests in multiple browsers. To do so, we need to install different browser plugins. In this example, I’d like to run a test in Chrome, so I’ll go ahead and install a Chrome browser plugin as follows:

npm install karma-chrome-launcher --save-dev

If you wish, you can install other browser launchers too.

Step 9

We can have any folder structure for the project adhering to our business requirements. However, for the purpose of this post, I am going to keep it simple. I will create two folders: app and tests. The app folder will keep all Angular scripts files and the tests folder to keep all the tests. To create these folders, run the commands as shown below:

md app

md tests

Step 10

This step is only required if you are working in Visual Studio, otherwise you can skip this step. We are going to add all newly installed files and newly created folder in the project. Go back to Visual Studio.

In this step we have included all of our newly created files and folders in Visual Studio project.

In the above code snippet, we are creating a proxy of the module and filter using ng-mock. We have written tests for the filter name ‘reverse’ from module ‘MyApp’ and we are injecting the filter using the $filter service of ng-mock.

At this point, if we go ahead and run the SpecRunner.html, we will get a failed test result because we have not created the AngularJS filter or the ‘MyApp’ module.

So now let us go ahead and create an AngularJS Module ‘MyApp’ with filter ‘reverse’. We will create these in the App/CalculatorApp.js

When we run the test in SpecRunner.html, we’ll find all tests are passed as shown in the image below.

Problems in Running Test Using SpecRunner.html

You may have noticed the only problem in the approach above is that each time we change the test code or source code, we need to go back and either load SpecRunner.html again or refresh it manually to see the updated test result. In real project development, this could be a pain. We need a mechanism so that whenever the code changes, tests should be executed automatically. To do this, we'll use test runner. We have already installed the Karma test runner to automatically run tests whenever code changes, so now let’s configure it to do that.

Step 14

To configure Karma, we need to run command Karma init.

karma init

You will be prompted with many questions to answer, use the following answers as displayed below:

Karma.cnf.js file has been created after answering these questions. Next, let us open Visual Studio and include the newly created file Karma.conf.js in our project. Open Karma.conf.js and add references to Angular and Angular Mock. Your Files sections should look like the image below:

As soon as we run the karma start command, tests will start executing and we can see test results on the command prompt as shown in the image below. As you change the code and save the file, the test will be executed automatically.

Step 15

Now let’s write a unit test for the AngularJS Controller. Add the following test to CalculatorAppTest.js and add a test for the controller below to the filter test or below the filter test describe.

We are creating a proxy of the controller and injecting that using ng-mock $controller service. Once the controller is injected, take the reference of CalculatorController (controller in the test here) and calling the add method. At this point the test will fail, since we have not written controller yet. Karma is giving the failure message that CalculatorController is not a function.

As soon as we save the CalculatorApp.js file after writing the controller, the test will pass as shown in the image below:

Step 16 — Testing AngularJS Factory with local data

Let us say that we have created an AngularJS service using factory method name PlayerLocalApi. This service is returning local data which is hard coded as of now. The Service is created as shown in the listing below:

In the above code snippet, we are injecting the service PlayerLocalApi and then calling getPlayers on that. Also, we have exact test data to test the data returns from the service. This test will pass.

Just to make sure that we have written the test correctly, go back to service and comment the second var data and uncomment the first var data so the modified service is as listed below: