JavaScript QUnit Testing Framework

Introduction

JavaScript QUnit Testing Framework is a library to test the code. It was initially developed for testing jQuery, jQuery UI and jQuery Mobile. It may be used for testing one independent JavaScript code. We test the least unit of the code for specific behaviour in unit testing. QUnit gives a simple syntax for making JavaScript test modules and functions. That may be run from the browser.

QUnit helps client-side environments in web browsers. It also supports server-side for example Node.js. It offers a fresh mechanism for testing asynchronous (Ajax) JavaScript code. In this post, the QUnit framework will be explained in detail.

Description

QUnit was at the beginning developed by John Resig. At that time, it was developed as part of jQuery. It was removed from the jQuery unit test source code in 2008. It shaped its own project and converted to QUnit. This permitted others to start using it for writing their unit tests. The early version of QUnit used jQuery for interaction with the DOM. A rewrite prepared QUnit totally standalone in 2009.

What does QUnit provide?

  • A rich set of test assertions,
  • Highly informative test suite UI,
  • Support of synchronous and asynchronous callback,
  • Support of test module, and more

How to configure QUnit?

  • Download the two framework files:

The below code snippet displays the BasicRunner.html page. That covers the simple skeleton of the QUnit test runner page:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>QUnit test runner</title>

<link rel="stylesheet" href="lib/qunit-1.10.0.css">

</head>

<body>

<div id="qunit"></div>

<div id="qunit-fixture"></div>

<script src="lib/qunit-1.10.0.js"></script>

...The test code here...

</body>

</html>

The BasicRunner.html page contains the framework files from the lib folder. There are two div elements on the test runner page. The first qunit div element is used for displaying the QUnit test results. Also, the second qunit-fixture div element is used for holding the QUnit HTML fixtures needed for the tests.

We can run the test runner page that does not contain any of the QUnit tests yet. The below screenshot expressions the BasicRunner.html page that does not consist of any tests:

QUnit Test Runner

Writing the first test

  • The QUnit module function is accountable for creating the QUnit module.
  • The QUnit test function is answerable for generating the QUnit test.
  • Place the test function under the declared module in order to add the test function to the module, as displayed in the following code snippet.
module("testing Module", {

setup: function() {

// setup code goes here...

}, teardown: function() {

// teardown code goes here...

}

});

test("testing function1", function() {

// assertions go here...

});

test("testing function2", function() {

// assertions go here...

});
  • A test module with the name testing Module is shaped.
  • The test module covers two test functions.
  • The first test function is called testing function1.
  • The second test function is named testing function2.
  • Every test function may hold one or more assertions.
  • Let’s travel to testing the SimpleMath JavaScript object
  • The below code snippet reminds us of the code of the SimpleMath object:
SimpleMath = function() {

};

SimpleMath.prototype.getFactorial = function (number) {

if (number < 0) {

throw new Error("There is no factorial for negative numbers");

}

else if (number == 1 || number == 0) {

// If number <= 1 then number! = 1.

return 1;

} else {

// If number > 1 then number! = number * (number-1)!

return number * this.getFactorial(number-1);

}

}

SimpleMath.prototype.signum = function (number) {

if (number > 0) {

return 1;

} else if (number == 0) {

return 0;

} else {

return -1;

}

}

SimpleMath.prototype.average = function (number1, number2) {

return (number1 + number2) / 2;

}

We will develop the following three test scenarios for the getFactorial method:

  • Positive number
  • Zero
  • Negative number

The following code snippet shows how to test the getFactorial module calculating the factorial of a positive number (3), 0, and a negative number (-10), using QUnit:

module("Factorial", {

setup: function() {

this.simpleMath = new SimpleMath();

}, teardown: function() {

delete this.simpleMath;

}

});

test("calculating factorial for a positive number", function() {

equal(this.simpleMath.getFactorial(3), 6, "Factorial of three

must equal six");

});

test("calculating factorial for zero", function() {

equal(this.simpleMath.getFactorial(0), 1, "Factorial of zero

must equal one");

});

test("throwing an error when calculating the factorial for a negative

number", function() {

raises(function() {

this.simpleMath.getFactorial(-10)

}, "There is no factorial for negative numbers");

});
  • The module function states a new module called Factorial.
  • The simpleMath object is shaped using the new SimpleMath().
  • the tearDown is used to clean up by deleting the shaped simpleMath object.
  • QUnit equal assertion function calls simpleMath.getFactorial(3)
  • It supposes the result to be equal to 6.
  • The test function fails if simpleMath.getFactorial(3) returns a value other than 6,
  • The last parameter of the QUnit equal assertion is an optional one,
  • It signifies the message to be shown with the test.
  • The equal assertion function calls simpleMath.getFactorial(0) and expects it to be equal to 1 in the second test function of the Factorial module.
  • The test function calls simpleMath. getFactorial(-10) and expects it to throw an error using the raises assertion in the last test function of the Factorial module.
  • The 1st parameter is the function parameter. It comprises the call to the API to test.
  • The second parameter signifies the message that is to be displayed with the test.
  • The increased assertion do well if the API that is to be tested throws an error.
  • We now come to the new module that tests the functionality of the signum API provided by the SimpleMath object. The following code snippet displays the Signum module:
module("Signum", {

setup: function() {

this.simpleMath = new SimpleMath();

}, teardown: function() {

delete this.simpleMath;

}

});

test("calculating signum for a positive number", function() {

equal(this.simpleMath.signum(3), 1, "Signum of three must equal

one");

});

test("calculating signum for zero", function() {

equal(this.simpleMath.signum(0), 0, "Signum of zero must equal

zero");

});

test("calculating signum for a negative number", function() {

equal(this.simpleMath.signum(-1000), -1, "Signum of -1000 must

equal -1");

});
  • The first test function tests the signum of a positive number.
  • The second test function tests the signum of zero.
  • The last test function tests the signum of a negative number.

The below code snippet displays the Average module:

module("Average", {

setup: function() {

this.simpleMath = new SimpleMath();

}, teardown: function() {

delete this.simpleMath;

}

});

test("calculating the average of two numbers", function() {

equal(this.simpleMath.average(3, 6), 4.5, "Average of 3 and 6 must

equal 4.5");

});
  • Calculating the average of two numbers in the average module test function make sure that the average is calculated properly.
  • By calling the average API using the two parameters 3 and 6, and supposing the result to be 4.5 using the equal assertion.
  • We need to include the SimpleMath. js and simpleMathTest.js files in the test runner page, as mention in the following code snippet:
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>QUnit test runner</title>

<link rel="stylesheet" href="lib/qunit-1.10.0.css">

</head>

<body>

<div id="qunit"></div>

<div id="qunit-fixture"></div>

<script src="lib/qunit-1.10.0.js"></script>

<script src="src/simpleMath.js"></script>

<script src="tests/simpleMathTest.js"></script>

</body>

</html>
  • We will find thetest results as shown in the following screenshot after clicking the SimpleMath QUnit test page testRunner.html:

QUnit test runner

2 thoughts on “JavaScript QUnit Testing Framework”

Leave a Comment