JavaScript unit testing tutorial using Jasmine

This post will teach you to write JavaScript unit tests using Jasmine in under 60 minutes. This tutorial is aimed at absolute beginners. Team Qxf2 member, Rupesh Mishra, is learning to write unit tests in different languages. He is sharing his learning here in the hope that more testers get started with unit testing. This is one in a series of posts on getting started with unit testing in various languages. The rest of this post is by Rupesh.


Overview

Jasmine is an extremely popular behavior-driven development (BDD) unit testing framework for JavaScript. Jasmine can run on any JavaScript-enabled platform and is easy to read.

At a high level, these are the steps we cover:
1. Install Jasmine
2. Write a JavaScript program to use as the program under test
3. Write the Jasmine unit test
4. Execute the test and view results

1. Install Jasmine
Download Jasmine here. I downloaded the latest version of jasmine-standalone in zip format and unzipped it. For me latest version was jasmine-standalone-2.0.3 .
Now in the jasmine-standalone folder($JASMINE_DIR):

  • /lib  folder contains all the libraries for Jasmine.
  • /spec  folder to write test file.
  • /src  folder to contain Javascript source file,but I can keep my Javascript file any where in my project.
  • SpecRunner.HTML  to execute my test which is already created in spec folder and it will take the path of my source Javascript file .

I emptied the /spec folder. I also deleted the /src folder. These two folders had examples and I did not need them.

2. Write a JavaScript program
To write my JavaScript program, I created a JavaScript project JasmineUnitTesting in Eclipse and added a new file with name ExampleCode.js .

function AddTwoNumbers(a,b) {
  return a + b; //Function to return addition of two numbers a and b.
}
 
function MultiplyTwoNumbers(a,b) {
	  return a * b; //Function to return product of two numbers a and b.
}

I have created two simple programs for addition and product of two numbers in ExampleCode.js .

3. Write the Jasmine unit test
Before I wrote my test program, I added the jasmine-standalone-2.0.3 folder to my project by doing simple copy-paste of folder. I can also do it by using Import option in Eclipse. I then added a new file UnitTest.js in the $JASMINE_DIR/spec folder.
My project files structure looks like this.

jasmineProject

Jasmine tests consists of two parts primarily:
1. describe blocks to describes a suite of tests
2. it blocks for individual test specification

Both the describe and it functions take two parameters
1. A text string to explain the purpose of our test (e.g.: test name)
2. function()

Here is my complete UnitTest.js. In this program I am testing my functions written in ExampleCode.js.

describe("Testing Two Numbers", function() {
	var a = 4;
	var b = 3;
    it("Add Numbers", function() {
        expect(AddTwoNumbers(a,b)).toEqual(7);
    });
    it("Multiply Numbers", function() {
        expect(MultiplyTwoNumbers(a,b)).toEqual(12);
    });
 
    it("Compare Numbers to be Greater Than", function() {
    	expect(a).toBeGreaterThan(b);
    });
 
    it("Compare Numbers to be Less Than", function() {
    	expect(b).toBeLessThan(a);
    });
});

The methods toEqual, toBeLessThan, toBeGreater are known as matchers – assert methods that increase the readability of code. In Jasmine each matcher implements a Boolean comparison between the actual value and expected value. It is responsible for reporting to Jasmine if the expectation is True or False. Jasmine will then pass or fail the Spec.
Here is the list of some popular matchers in Jasmine:-

  1. expect(a).toBe(b);
  2. expect(a).not.toBe(b);
  3. expect(a).toMatch(b);
  4. expect(a).toBeDefined();
  5. expect(a).toBeNull();
  6. expect(a).toContain(“value”);
  7. expect(a).toBeLessThan(b);
  8. expect(a).toBeTruthy();
  9. expect(a).toBeFalsy();
  10. expect(a).not.toBeNull();

4. Execute the test and view results
To execute this test I have to run $JASMINE_DIR/SpecRunner.html. But before that, lets update the source file and spec file location.

 
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Jasmine Spec Runner v2.0.3</title>
 
  <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.3/jasmine_favicon.png">
  <link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.3/jasmine.css">
 
  <script type="text/javascript" src="lib/jasmine-2.0.3/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-2.0.3/jasmine-html.js"></script>
  <script type="text/javascript" src="lib/jasmine-2.0.3/boot.js"></script>
 
  <!-- include source files here... -->
  <script type="text/javascript" src="../ExampleCode.js"></script>
 
  <!-- include spec files here... -->
  <script type="text/javascript" src="spec/UnitTest.js"></script>
 
</head>
 
<body>
</body>
</html>

In this HTML file, I put the exact files location of my source and spec files.

To view results, I have to open SpecRunner.html with a browser.

result_jasmine_1

I now have information about all the specs and number of failures. I also get the information about jasmine-standalone version and total time taken by Jasmine to finish this test.


References:

Here are some useful references that I used to learn Jasmine.
1. Official Jasmine documentation
2. An excellent (but somewhat advanced) tutorial by Evan Hahn


Rupesh Mishra
I tinker with technology. My work has helped me gain good exposure to different areas of testing like Test planning and execution, filing bug reports, preparing test reports, Writing Automation script using python and Selenium webdriver. I am also aware of Unit testing using Junit, Jasmine and Python. I also have good knowledge of HTML, JavaScript, CSS, SQL, Django and Unix.Beside testing I like playing cricket, football, squash and listening to music.

© 2013-2017, Rupesh Mishra. All rights reserved.

6 Comments

  1. akaash said:

    Good tutorial..simple and very nice!Thanks

    April 7, 2015
    Reply
  2. Telkar said:

    Good one for beginners.

    September 16, 2015
    Reply
  3. Nishi said:

    I have a clarification, of course i am very naive to writing tests.,,
    My question is that, does the “source files” and the “spec files ” needs to be updated in “SpecRunner.html” each time a new .js file is created? Doesn’t that make the work tedious?
    I suppose , to make things better , “Karma -Javascript Test runner” is to be used?

    Forgive me if i am wrong..

    August 2, 2016
    Reply
    • Nishi, yes – you need to use a test runner of your choice (e.g.: Grunt based) that can intelligently auto-detect tests. We wrote this post aimed at rank beginners and did not want to include anything more than the simplest of basics.

      August 7, 2016
      Reply
  4. gavish said:

    Hi, if i want to stop execution of suits on any one test case fails, or if first case fails then i want to stop execution of spec means i do not want remaining test to run. What is the way to achieve that?

    January 17, 2017
    Reply
    • Gavish, I have not done this on my own but I hope this link helps: http://stackoverflow.com/a/31809311/3592114

      The summary seems to be that you can either add a throwFailures=true to your spec runner file. If you are working with node, that Stackoverflow answer has some additional advice in the comments.

      January 20, 2017
      Reply

Leave a Reply

Your email address will not be published.