How to do Unit tests with Jasmine and Karma in AngularJs application?


Introduction

Usually testing is performed by JavaScript, but in order 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 Jasmine and karma in AngularJs application”.

Although we have already discussed about the benefits of unit testing in software development in previous post, hence in this post we will learn, how to apply the theory of those tests in an AngularJs application.

In order to write unit tests with Jasmine and Karma for an AngularJs project, before that we need to know bit about Jasmine and Karma.

Unit tests with Jasmine and Karma in AngularJs application

 

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.

Karma

Karma is a test runner made for AngularJs. It’s main goal is to automate testing across multiple web browsers with a single command. Even after was created for AngularJs, it is currently used in other JavaScript frameworks.

Karma supports several types of tests like unitary, integration,and E2E tests.

Creating the AngularJs Project

Let’s create the directory of our project and the files.

$ mkdir demo-app && cd demo-app

Let’s 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’s 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

Below is the app.js file code.

unit tests Jasmine and Karma

We have created the HTML file.

Below is the contents of the index.html file.

unit tests Jasmine and Karma

 

After setting up the AngularJs application. Let’s set up Karma to run our tests in an automated way.

Configuring Karma

To set up Karma in our AngularJs project we will use npm to do the installation.

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

Let’s 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:

unit tests Jasmine and Karma

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 is created through function it() and within our function it() we have the test result through expectations. For this, we use the function expect().

unit tests Jasmine and Karma

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:

unit tests Jasmine and Karma

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.

unit tests Jasmine and Karma

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.

Conclusion

You can try the codes that are shown in the test file, you could probably get the correct result.

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