Voice of A Developer: JavaScript Unit Test

Introduction

Before moving further, let us look at the previous articles of the series

JavaScript

JavaScript is a language of the Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript.

Unit tests

Unit testing is a software development process in which the smallest parts of the Application, called units, are tested. It can be done manually orthe process could be automated. Unit Testing is a level of software testing where the individual units/ components of the software are tested. The purpose is to validate that each unit of the software performs as designed.

Advantages of Unit tests

I see a lot of advantages in Unit tests, I have listed all of them as per my experience,

It allows you to make big changes to the code quickly.
Improves the design of the code, especially with Test-Driven Development.
It makes it easier to change and refactor code.
Saves your development time.

Unit tests and TDD go hand-in-hand. The concept of TDD is to first write a failing test, then we write enough code to pass the test and refactor the code. Generally, as a developer, we write fast code that works goodwell, but we don’t think to write Unit tests.

Source http://www.juancarbonel.com/

Unit tests are the safety nets and test whether the code is working or not by just running it.

A list of all the unit test frameworks is available here.

Few popular frameworks are:

Jasmine
Mocha
Chai

Other concepts

Test runner

A CLI based tool requires you to run your tests. As developers, we shall love command-line interface and integrate our scripts with it. In an automation, it is of great help and we can integrate the test runner tool with the various environments too. There are many test runner software available. For e.g. Karma, Grunt, Gulp, Nrunner.

Assertion

It means to validate the condition or the output. We can determine the output; whether a test makes your code fail or pass depends on the assert condition. Different test suites/automation tools syntax can vary but the purpose is the validation, e.g. Assert.IsTrue (true);

Pre-requisites

You need to install NodeJS to enable the unit tests in JavaScript. You can refer to the article given below, by clicking it.

Jump Start Node.js by Sanjay Kumar.

Let us do Unit testing now. To do that, we will install some node packages, i.e, Jasmine and Karma.

There are two ways to install things in NodeJS

Global

It installs the node modules in the global space. Hence, you do not need to install it every time for different projects. This is done using –g parameter; while installing. If you are creating your Application to test whether it's fine or not, you should have in dev dependencies, which is the next option.

[Note for this article, I’ll show –g option for the installation]
Save local

It installs the node modules in the project directory. Hence, it is a part of the developer dependencies in Package.json [configuration file of NodeJS dependencies] project. If you’re in a hurry to create package.json; then there are various ways you can download a sample using curl command.

Sample package.json

curl -O
Jasmine

Jasmine is a test-driven development framework to test JavaScript code. For more details, you can see here.

Now, we will install Jasmine framework, using the command shown below,

npm install –g jasmine
Karma

Karma is a spectacular test runner for JavaScript. It allows you to execute JavaScript code in the multiple real Browsers. I am emphasizing real Browsers, because it does not run Fake/stubs, but executes tests on the real Browsers. For more details, you can find which Browser, it supports.

Installing Karma and plugins

Karma install: fire below command to install karma,

npm install –g karma

Karma-Jasmine

Karma runner supports many different test frameworks like Jasmine, Chai & Mocha etc. We will install karma-jasmine module,

npm install -g karma-jasmine

Chrome launcher

Although we can leverage any supported Browser by Karma, I will show the tests via most popular Browser Chrome. Hence, install Chrome-launcher,

npm install –g karma-chrome-launcher

Karma CLI

It is a nice interface; from command line to leverage Karma, install,

npm install –g karma-cli

Write Unit Test Program

Create a directory, md testJS
Create tests folder and underneath unitTests.js,
Open file unitTests.js in your favorite editor and paste the code, shown below:
1. describe("UnitTests", function()
2. {
3. it("First Unit test", function()
4. {
5. expect(2).toEqual(2);
6. });
7. });
Let us dive deep into the various components of this.

describe

A test suite begins with describing what accepts the title of the suite and a function. This function is going to be tested.

it

Specs are defined, using it. You can write any number of test specifications. A test can be true or false and it depends upon the condition.

expect

It takes a value and matches against the expected value.
Configure the test runner

To create this file, quickly download sample karma.conf.js from the location, given below:

curl -O

Review karma.conf.js for now, we’ll modify it later.
1. module.exports = function(config)
2. {
3. config.set(
4. {
5. basePath: '',
6. frameworks: ['jasmine'],
7. files: [
8. 'build/js/**/*.js',
9. 'build/tests/**/test_*.js'
10. ],
11. exclude: [],
12. preprocessors: {},
13. reporters: ['dots'],
14. port: 9876,
15. colors: true,
16. logLevel: config.LOG_INFO,
17. autoWatch: true,
18. browsers: ['PhantomJS'],
19. singleRun: true
20. });
21. };
Create the folder app and add code file unit.js. The folder structure may look like,
Modify some key-value pairs, according to your code:
1. browsers: ['Chrome'],
2. files: [
3. 'app/*.js',
4. 'tests/*.js'
5. ],
Run the basic test using karma. Start and it will also open the Chrome Browser and run the test in unitTest.js,

Launch Chrome too.

Info

You may get an error that Chrome is not properly configured, so please update the path accordingly,

On the command prompt, you could see - it runs your test and print,

Executed 0 of 1 SUCCESS
Executed 1 of 1 SUCCESS

This happens because our expect statement results in true.

TDD principles

I am sure that you are familiar with TDD. In TDD, we promote first to write a test and then code. The above example was to quickly demonstrate you passing the test. Now, we will ensure the principles of TDD.

First write the fail test (RED)
Write the minimum code so the test can pass (GREEN)
Improve the code (Refactor)
Revisit unitTest.js and we want to create a global library, where we can perform simple mathematical operations like sum, product. I assumed the global object and two functions with it:
1. describe("UnitTests", function()
2. {
3. var g = global;
4. it("Sum test", function()
5. {
6. expect(g.sum(2, 3)).toEqual(5);
7. });
8. it("Product test", function()
9. {
10. expect(g.product(2, 3)).toEqual(6);
11. });
12. });
Note

Follow TDD principle, I will first fail my tests.

At the terminal, it says, “global is not defined”, that means my test is in RED.
Next step to writing minimum code is to turn it into GREEN,

Update the code in unit.js, as shown below:
1. var global =
2. {
3. sum: function(a, b)
4. {
5. return a + b;
6. },
7. product: function(a, b)
8. {
9. return a * b;
10. }
11. };
Again, run karma start command,

Nice, we can see both tests, that passed.
Refactor code by using the “use strict” and replacing var with let keyword inside test will ensure:

I committed this code at GitHub and from here you can download or clone it.

Summary

We can go more in-depth if we want by understanding Karma configuration, Jasmine, and other frameworks. I believe this article must have given you the context of Unit test in JavaScript. Please share your feedback/comments.

6 Comments

Join the conversation! Your thoughts help the community grow.

Guest User10y ago
Thanks Santhakumar Munuswamy
Santhakumar Munuswamy10y ago
Thank you for nice share
Vignesh Mani10y ago
Nice
Debasis Saha10y ago
Nice share..
Guest User10y ago
Thanks Sonu! you give comments on almost all my articles... thankx for supporting
Sonu Chaudhary10y ago
good one