QUnit was originally used for unit testing jQuery, jQuery UI and other jQuery libraries but now it has been transformed into a nice unit testing framework for all JavaScript codes. As the web developers started using raw JavaScript or other JavaScript frameworks to improve the responsiveness of the web applications they develop, it becomes inevitable to write unit test cases for the JavaScript source code.
In this article I will be introducing you to the QUnit framework and provide insights about using it to test the JavaScript code.
Kick Start with QUnit
All the features of QUnit are compiled into a single framework library qunit.js and it can be downloaded from here. There is also a QUnit.css file, which is required to be downloaded and used for styling the QUnit results page.
To start writing QUnit test cases four components are required and they are the following.
1. QUnit kit (QUnit.js & QUnit.css)
2. Test runner page
3. JavaScript file to add the unit test cases.
4. JavaScript file containing the source to be tested.
In the above items the Test runner is a web page (.html) which will act as a platform for the execution of the QUnit test cases. The test runner page should include the references for items 1, 3 & 4 along with two div tags (qunit & qunit-fixture). Following is the sample code for the test runner pager.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Demo</title> <link rel="stylesheet" href="/resources/qunit.css"> <script src="/qunit.js"></script> <script src="/MyJsUnitTests.js"></script> <script src="/MyJsSourceCode.js"></script> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> </body> </html>
Assertions
As available in NUnit and JUnit, QUnit framework also comes with many assert statements; following are a few of them.
1. ok() – It is a Boolean assertion statement.
2. equal() – Performs a non-strict comparison.
3. strictEqual() – Performs a strict comparison(strong typing).
4. throws() – Asserts for an exception thrown.
5. deepEqual() – Compares the value of the object properties and primitive types.
6. nonDeepEqual() – Inverse of deepEqual()
A Simple Unit Test Sample
In this section let us create a basic unit test case using QUnit. Create a test runner page named QUnitDemo and add the references to the QUnit files, test cases JavaScript and the source code JavaScript. In the source code file add the following simple method, which returns the summation of two numbers.
var ArthimeticOperations = { addTwoNumbers : function (number1, number2) { return number1 + number2; } }
Now in the test cases add the following QUnit test case as given below. Here the thing to note is that the function test is considered to be a test case and the name provided as the first parameter to the test function becomes the name for the test case.
test('Addition Test', function () { strictEqual(ArthimeticOperations.addTwoNumbers(3, 5), 8, "Tested the addition functionality"); });
test('Addition Test', function () { strictEqual(ArthimeticOperations.addTwoNumbers(3, 5), 8, "Tested the addition functionality"); });
Now browse the test runner HTML page. The test is executed and the result is displayed on the web page as shown in Fig 1.0.
Fig 1.0 – QUnit Demo
QUnit allows you to organize the test cases by using a module. Say for example if there is another test case to be written for the subtract functionality, then below is how it can be organized using a Module.
module('Arithmatic Operation Test Cases', { setup: function () { }, teardown: function () { } }); test('Addition Test', function () { strictEqual(ArthimeticOperations.addTwoNumbers(3, 5), 8, "Tested the addition functionality"); }); test('Subtraction Test', function () { strictEqual(ArthimeticOperations.subtractTwoNumbers(5, 3), 2, "Tested the subtraction functionality"); });
All the test cases following a module definition will be associated to it. Also in the module you can provide the setup and teardown functions as available in NUnit. Now run the test cases and Fig 1.1 shows the test results. Note that the test cases are prefixed by the module names to which they are associated.
Fig 1.1 – Test Results
Unit Testing the DOM Operations
QUnit allows developers to write the unit test cases for testing DOM operations. To demonstrate this I will modify my test case to put the values to a DIV element instead of returning it as shown below.
Source code javascript change:
var ArthimeticOperations = { addTwoNumbers : function (number1, number2) { $("#resultDiv").text(number1 + number2); console.log($("#resultDiv").text()); } }
Test case change:
module('Arithmatic Operation Test Cases', { setup: function () { $("body").append('<div id="resultDiv"></div>'); }, teardown: function () { $('#resultDiv').remove(); } }); test('Addition Test', function () { ArthimeticOperations.addTwoNumbers(5, 3); equal($('#resultDiv').text(), 8, "Tested the addition result in DOM"); });
Till now we have seen the QUnit test cases for synchronous function calls but what about the asynchronous operations? The answer QUnit provides is that it can be achieved through the asyncTest() method.
I hope this article helps as a jump start for the developers to use QUnit. I will leave the rest for the readers to explore. Happy reading!
