How To Do Unit Tests With Application Of AngularJS?

Application of AngularJS

Usually, testing is performed by JavaScript, but to reduce the amount of time to write tests, we will use two tools or frameworks “Jasmine and Karma” when testing AngularJs. Now we are going to discuss “How to do Unit tests with Application of AngularJs“.Although we have already discussed the benefits of unit testing in software development in the previous post, hence in this post we will learn, how to apply the theory of those tests in an AngularJS application.

Unit Tests with Jasmine and Karma in AngularJS Application

To write unit tests with the application of AngularJs, we need to know a bit about Jasmine and Karma.

Jasmine

Jasmine is a framework for writing tests for JavaScript code. It is a web browser independent and does not need other libraries to work. With Jasmine, we’re going to write our unit tests. Since it is independent, it is of great use to create unit tests. You can also check out the AngularJS application sample.

Jasmine supports Behavior-Driven development, which is a software development practice and is a part of Test-driven development. Jasmine and BDD or Behavior-driven development help to exhibit tests in a human-readable format. This ensures that even the non-tech people can understand such tests.

Karma

Karma is a test runner made for AngularJS. It can help you to automate testing across multiple web browsers. You can even do this with a single command. Even after it was created for AngularJS, it is currently used in other JavaScript frameworks. Thus, you can estimate the extensive use of Karma. Karma supports several types of tests. The tests which it supports include unitary, integration, and E2E tests.

Creating the AngularJS Project

Let us create the directory of our project and the files.

$ mkdir demo-app && cd demo-app

Let us use NPM to start our project.

$ npm init

The result is this of the image, to confirm the initialization of the project, just type “yes”.

Let us now install AngularJs and UI-router.

$ npm install angular Angular-UI-router --save-dev

After installation, we will create two files in our project

First, let’s create the JavaScript file.

$ touch app.js

Given below is the app.js file code.

Now, we have created the HTML file.

Let us sight the contents of the index.html file below.

After setting up the AngularJs application, let’s set up Karma to run our tests in an automated way. Now, you know AngularJs create application procedure.

Configuring Karma

Now, we will set up Karma in our AngularJs project. for this, we need to do the installation first. we will use npm to do the installation.

$ npm install karma karma-jasmine jasmine-core karma-chrome-launcher --save-dev

Let us install karma CLI

$ npm install -g karma-cli

At this point, our project is ready to create the Karma configuration file. Similar to the npm init command we executed on the terminal, we will execute the karma init command.

At the root of the project, a karma.conf.js file is created and the contents of the file should look like the one below:

Our first Unit Test

Let’s create the files to run our unit tests.

Start by typing the following command into the terminal.

mkdir users && cd users touch users.js users.spec.js

We need to understand one thing, Jasmine has a very simple philosophy and syntax. As a testing framework, it follows the pattern of preparing the data, executing the code, and verifying the result, which we call assertions. A test suite in Jasmine begins with a call to describe()function. This function has two parameters, the first is the name of your test suite, and according to a function. In the example below, we can see the construction of the function that implements a test suite in Jasmine.

describe(‘Users factory’, function() { });

We have specs, the term used for a test to run on Jasmine. Specs are created through function it() and within our function it() we have the test result through expectations. For this, we use the function expect(). Within that function, we have an expectation, which is the return of it being four. After that, we need to put all of it together and run the test.

The users.spec.js file looks like this:

We have our test suite (describe) and inside it the spec (it) with the expectation (expect) of equal return aquatro.

To run our test, we need to inform karma that we now have a test file with a test suite to test. We need to report the path of our file within the karma configuration file. Compare with the previous file had no value within the files property, already in that previous, we have the path of our test file. Having made this change we need to open the terminal and enter the karma start command, done this a window in the browser will be opened and karma will run all the tests and show the result in the terminal. Now, you know how to run AngularJS application.

Create your Test Suites

You can try the codes that the AngularJS application may have. They are shown in the test file. Using these codes, you could probably get the correct result. Avert performing testing using JavaScript. Rather, you should use these two tools named “Jasmine and karma”. This is because these frameworks will help you to reduce the amount of time needed for unit testing. Such tools will help you to do unit tests with the application of AngularJS. You must already know the benefits of unit testing from our previous post. So, now you can easily integrate the theory of those tests in an AngularJS application. Integrating the theory is possible only when you know the basic crux about Jasmine and Karma. I hope this post has enabled you to know the definitions of these tools!

Well, from here just create your test suites and specs to test your JavaScript code.

Also Read: Polymer vs Angular