Client-side JavaScript unit testing with qunit

I think the client-side JavaScript unit testing is as important as server-side unit testing. There are lot of programmers whom don’t think the the client-side unit testing is important. I don’t understand the reason…because client-side software developing and server-side developing are the same in this respect. The unit testing as well as the TDD is not our enemy… 🙂 I guess  we need to do unit testing server and client side, too.
Let me introduce the qunit because it is easy to use but I use several client-side unit testing tool:

jsUnit
Test Runner for JavaScript: Karma
BusterJs (client and server-side (Node.js) unit testing tool)

So. I did one simple example. I did a JavaScript class. I used the qunit, jQuery, jQuery UI.

Step 1.

index.html

 <!DOCTYPE html>  
 <html>  
 <head>  
  <meta charset="utf-8">  
  <title>Main Page</title>  
  <link rel="stylesheet" href="qunit-1.11.0.css">  
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />  
 </head>  
 <body>  
  <input id="btnShowBigNumber" type="button" value="Show big number"/>  
  <input id="btnShowAjaxResponse" type="button" value="Show Ajax response"/>  
  <input id="btnShowDialog" type="button" value="Show dialog"/>  

  <script src="jquery-1.9.1.min.js"></script>  
  <script src="jquery-ui-1.10.2/ui/jquery-ui.js"></script>  
  <script src="MAIN_TEST_APP.mainMonsterClass.js"></script>  
  <script src="main.js"></script>  
 </html>  

Step 2.

MAIN_TEST_APP.mainMonsterClass.js:

The class name is a little bit strange: “Monster” 🙂 and it has simple namespace because I think using namespaces is cool and useful. So, the code:

 /**   
  * Test Namespace, Test Class  
  * @author Mr. John Nobody  
  * @namespace Namespace for MAIN_TEST_APP classes and functions.   
  **/  
 var MAIN_TEST_APP = MAIN_TEST_APP || {};  

 MAIN_TEST_APP.mainMonsterClass = {  
   mainMethodInteger: function() {  
     var bigSum = (1 + 5 * (0));  
     return bigSum;  
   },  
   mainMethodJSONAjax: function() {  
     var ajax_result;  

     $.ajax({  
       url: "main.php",  
       type: "POST",  
       dataType: "json",  
       async: false,  
       success: function(response) {  
         $.each(response, function(key, item) {  
           if (key === 'value' && item === "ok")  
             ajax_result = item;  
         });  
       },  
       error: function(error) {  
         console.log("Error:");  
         console.log(error);  
       }  
     });  
     return ajax_result;  
   },  
   mainMethodJQUIDialog: function() {  
     var tag = $("<div></div>");  
     var dialog_content = "<p>Hello World Dialog</p>";  
     tag.html(dialog_content).dialog({modal: true}).dialog('open');  
   }  
 };  

Step 3.
main.php

The server-side PHP code is very complicated. :–)

 <?php  
 echo json_encode( array("value"=>"ok") );  
 exit;  

Ok. Let’s get to the testing.

Step 1.

test.html

 <!DOCTYPE html>  
 <html>  
 <head>  
  <meta charset="utf-8">  
  <title>Main Page Unit tests</title>  
  <link rel="stylesheet" href="qunit-1.11.0.css">  
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />  
 </head>  
 <body>  
  <div id="qunit"></div>  
  <div id="qunit-fixture"></div>  
  <script src="jquery-1.9.1.min.js"></script>  
  <script src="jquery-ui-1.10.2/ui/jquery-ui.js"></script>  
  <script src="MAIN_TEST_APP.mainMonsterClass.js"></script>  
  <script src="qunit-1.11.0.js"></script>  
  <script src="test1.js"></script>  
 </body>  
 </html>  

Step 2.

test.js:

The qunit is very simple. It has few assertions but that’s enough.

 /**  
  * Test: MAIN_TEST_APP.mainMonsterClass.mainMethodInteger  
  * @returns {}  
  */  
 test( "MAIN_TEST_APP_mainMonsterClass_mainMethodInteger test", function() {  
   var expected_value = 1;  
   equal(  
       MAIN_TEST_APP.mainMonsterClass.mainMethodInteger(),   
       expected_value,  
       "MAIN_TEST_APP.mainMonsterClass.mainMethodInteger; equal succeeds" );  
 });  

 test( "MAIN_TEST_APP_mainMonsterClass_mainMethodJSONAjax test", function() {  
   var expected_value = "ok";  
   equal(  
       MAIN_TEST_APP.mainMonsterClass.mainMethodJSONAjax(),   
       expected_value,  
       "MAIN_TEST_APP.mainMonsterClass.mainMethodJSONAjax; equal succeeds" );       
 });  

 test( "Strict_MAIN_TEST_APP_mainMonsterClass_mainMethodJSONAjax test", function() {  
   var expected_value = "ok";        
   strictEqual(  
       MAIN_TEST_APP.mainMonsterClass.mainMethodJSONAjax(),   
       expected_value,  
       "MAIN_TEST_APP.mainMonsterClass.mainMethodJSONAjax; equal succeeds" );        

 });  

 test( "Strict_MAIN_TEST_APP_mainMonsterClass_mainMethodJQUIDialog test", function() {  
     var tag = $("<div></div>");  
     var dialog_content = "<p>Hello World Dialog</p>";  
     tag.html(dialog_content).dialog({modal: true}).dialog('destroy');  
     ok(true, "dialog was");  
 });      

It is easy but very useful. You should make your code testable and you will be able to fix the bad dependencies.

Advertisements
This entry was posted in Uncategorized and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s