Unit Testing JavaScript Functions

• Download demo - 44.5 KB

Introduction

This article is all about unit testing JavaScript functions using the unittest.js library provided by Script.aculo.us.

We always use UI and test against, and that is what dev and QA folks do. But there is some thing which can be done by developers apart from that. We can unit test JavaScript functions without the UI getting ready. Which means we can completely test JavaScript functions at a very early stage.

All you have to do is follow the three steps mentioned in the article, and you will surely enjoy unit testing.

Using the code

Following are the steps for downloading Script.aculo.us.

1. Go to http://script.aculo.us/downloads to grab the latest version in a convenient package.
2. Unpack the downloaded file and you will find the following:
• lib: This folder has the prototype.js file.
• src: This folder has these eight files:
1. builder.js
2. controls.js
3. dragdrop.js
4. effects.js
5. scriptaculous.js
6. slider.js
7. sound.js
8. unittest.js
• test (folder): has files for testing purpose.

How to use?

All we require is unittest.js and the stylesheet test.css available in the downloaded folders.

1. Create a JavaScript file which contains the functions which you wish to unit test.

var Validator = {
   // Returns the string, or null if not a valid email
   email: function (str) {
     str = str.squash();
     var result = (/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i).exec(str);
     return (result) ? result[0] : null;
   }
};

2. Create a unit test JavaScript class:

new Test.Unit.Runner({

   testValidator: function () { 
     this.assertNull(Validator.email(' ranjancse@gmail.com '));
     this.assertNull(Validator.email(' roshancse@gmail.com  '));
 });

The Test.Unit.Runner object receives our test object and executes all the methods. In our case, there is only one method for testing. Each of the test methods performs a series of checks called assertions to ensure that our code works correctly.

There exists a good number of assert methods available in the JavaScript library unittest.js, just try to explore and use them.

3. Create a sample HTML page and include the following scripts:
• unittest.js - The framework library provided by Script.aculo.us.
• Experniment.js - This file contains the JavaScript functions.
• test.js - This file contains the unit test methods. We can add as many unit tests as we want.

We create a DIV with id="testlog" which will be used by the unit test library to fill the test results. We include the stylesheet test.css, which contains the styles to show the test results in a more colorful way.