Tutorial (basic learning) » 07.Unit Testing

07.Unit Testing

Last modified by kashi on 2015/01/30, 12:51
QUnit 1.8.0 is used in this tutorial.
You can download QUnit via this link:


In case logic handles complex processes, if test procedure is implemented in Javascript as well, it would be much helpful for quality assurance.
There are several JavaScript testing tools, such as JSUnit, QUnit, JSSpec etc.
In hifive, due to the following reasons:

  • Since asynchronous processing is supported, thorough test can be made possible.
  • Simple and easy to use.
  • Used by jQuery.

QUnit is selected for testing.

Installing QUnit & Test implementation method

  1. Download qunit.js and qunit.css.
  2. Import qunit.js and qunit.css into the page to be tested.
  3. Write test cases into the HTML file.
  4. When the HTML file is opened, test process will be executed and result will be displayed.

Basic syntax

The sample code that uses QUnit is shown as below. This sample can be referred from:

<!doctype html>  
      <link rel="stylesheet" href="" type="text/css" media="screen" />
      <!--Executable standalone QUnit
       <script type="text/javascript" src=""></script>
                      // Module independent test  
           test("a basic test example", function(){  
               ok(true, "this test is fine");  
               var value = "hello";  
               equal("hello", value, "We expect value to be hello");  
           module("Module A"); // Define "Module A"  
           test("first test within module", function(){ // Test "Module A"  
               ok(true, "all pass");  
           module("Module B"); // Define "Module B"  
           test("some other test", function(){ // Test "Module B"  
               expect(2); // Set expected assertion count to 2  
               equal(true, false, "failing test"); // Since the test fails under this condition, expected count cannot be satisfied thus expect() will fail  
               equal(true, true, "passing test");  
           module("Module C");// Define "Module C"  
           asyncTest("asyncTest", function(){ // Test "Module C"  
               // Execute a time-consuming process  
                   // Implementing assertion for time-consuming process  
                   ok(true, "always fine");  
               }, 100); // After 100 miliseconds, execute a function which is argument 1 of setTimeOut()  
           test("asyncTest by normal test", function(){ // Test "Module C"
               stop(1); // Since asynchronous test is executed in test(), set number of semaphores in stop() function (number of times start() is called)
               // Execute time-consuming process  
                   // Implement assertion for time-consuming process  
                   ok(true, "always fine");  
               }, 200); // After 200 miliseconds, execute a function which is argument 1 of setTimeOut()
      <!-- Test result displayed here -->
     <div id="qunit"></div>
     <div id="qunit-fixture">test markup, will be hidden</div>

If asynchronous communication is performed

  • Test process will be halted in stop() function. Executing start() function in the function that is executed when asynchronous communication result is returned will resume test cycle.
test("asyncTest", function(){  
    stop(1); // Since start() will be called only once after asynchronous processing completed, set semaphore to 1.  
   $.getJSON("/someurl", function(result) {// Get JSON result during waiting time (1s)  
       equal(result.value, "someExpectedValue"); // Compare result  
       start(); // Test process resumes after assertion is executed.  
  • stop() function takes semaphore value as a parameter (unless specifically indicated, the value will be set to 1).

If Timer is set

  • The example below implements test using asyncTest() function.
asyncTest("asyncTest", function(){  
       // Implement assertion for time-consuming process  
       equal(obj.value, expectValue);  
    },100 /* Wait 100ms */);  

If Assert is used for manipulating DOM

  • The example below shows a simple modification of DOM node element.
test("domTest", function(){  
   var domtest = document.getElementById("dom_test");  
    equal(, "dom_test");  
    domtest.setAttribute("id", "dom_test2");  
    notEqual(, "dom_test");  
    equal(, "dom_test2");  

Next Chapter⇒08. Document generation (JSDoc)


Copyright (C) 2012-2017 NS Solutions Corporation, All Rights Reserved.