Wednesday, October 13, 2010

Unit Tests for JavaScript using JsUnit

Yesterday my boss asked me to test our Product UI for any script errors. As our application is full of JavaScripts I decided it would be wise to write some Unit Tests in JsUnit.

For those who are new to JavaScript let me give you some information. As per Wikipedia 
"JavaScript is primarily used in the form of client-side JavaScript, implemented as part of a web browser in order to provide enhanced user interfaces and dynamic websites.".
Regarding the popularity of Java Script says
708,651 websites using this within the top million sites on the internet and an additional extended total of 4,797,491 websites that are using Javascript.
And why my decision is wise?
  1. Runs on “most” browser/platform combinations
  2. Preserves the standards of a typical XUnit framework
  3. Open source - Free!!!
  4. Can be hosted on a web server so that tests can be run across enterprise without different setups
Some facts about JsUnit
  1. Unit tests in JsUnit are called Test Functions
  2. Test Functions live in an HTML page called a Test Page
  3. A Test Page is any HTML page that has a JavaScript “include” of jsUnitCore.js
  4. jsUnitCore.js provides the assertion functions of JsUnit, e.g. assertEquals(comment, arg1, arg2)
  5. JsUnit supports setUp() and tearDown()
  6. A Test Suite Page declares a suite() function that returns a JsUnitTestSuite for grouping Test Pages
  7. The JsUnit testRunner.html page runs Test Pages

      For most of the open source tools I worked with, installation is a night mare. But JsUnit is pretty straight forward and is just 2 steps
  1. Download installation zip from
  2. Unzip file in some local directory or on a webserver to host JsUnit
and we are done with installation. Really simple right :)
To verify the installation
  1. go to http://xx.xx.xx.xx/jsunit/testRunner.html, where xx.xx.xx.xx is the IPAddress or Hostname of the server on which JsUnit is hosted
  2. Enter xx.xx.xx.xx/jsunit/tests/TestPageTest.html
  3. Hit run button
  4. Progress should change to green

My First Test Case

I would like to unit test below function

function multiply(arg1, arg2) {
    return arg1*arg2;

Write a html page as below and put it in tests folder under JsUnit base folder

<script language="JavaScript" src="../app/jsUnitCore.js"></script>
<script language="JavaScript" src="math.js"></script>
<script language="JavaScript">

function testWithValidArguments() {
assertEquals("2 times 3 is 6", 6, multiply(2, 3));
assertEquals("Should work with negative numbers", -20, multiply(-4, 5));

function testWithInvalidArguments() {
assertNull("null argument", multiply(2, null));
assertNull("string argument", multiply(2, "a string"));
assertNull("undefined argument", multiply(2, JSUNIT_UNDEFINED_VALUE));

function testStrictReturnType() {
assertNotEquals("Should return a number, not a string", "6", multiply(2, 3));

This is a Test Page for multiplyAndAddFive(arg1, arg2).

Thats all you have to do and now you can run your tests using http://xx.xx.xx.xx/jsunit/testRunner.html.

 Testing can be used to show the presence of bugs,but never to show their absence!
   Edsger Dijkstra                                                             

No comments:

Post a Comment