Jim Plush's Programming Paradise

I've decided to write a little two part introduction into unit testing your AJAX applications with JSUnit. AJAX applications now are adding a new complexity into our development lives. Introducing business logic into our presentation tier. It is now not enough to write some adhoc javascript form validation functions that work most of the time. You now need to take accountability for your javascript code as it can affect your business logic on the server side.

As briefly as I can describe it unit testing gives a developer freedom. "Freedom?? but I have to write more code how the hell is that free?". Unit testing can free you as a developer by making sure your code is accounted for with automated tests. If you're in a multi-developer environment this is crucial to the success and bug management of your project. Imagine you spend weeks writing this great class library, all the code is pretty, well documented, works great! Now Kevin comes in a decides he wants to change the functionality of one of your methods to match something he's working on. His code now works but that change just broke 10 other areas where it was being used. F'ing Kevin! You will never catch this unless you're monitoring every change list that developers submit, or you have an automated testing harness that will run the code nightly (at least) and report failures. If you had a properly tested library, this would have been caught after Kevin ran the unit test suite and realized that code he change did have a purpose and he could look at the test and now see what the purpose was. That my friend is the power of the unit test.

Ok so with that out of the way let's talk about how to harness your new great AJAX code!


First thing you're going to need is a unit test suite for javascript. The current gold standard is JSUnit (http://www.edwardh.com/jsunit/). JSUnit allows you to write html pages with javascript assertions built in. Download the latest JSUnit package to your hard-drive and you'll notice in there it will unzip itself to a jsunit/ directory. The main thing you will be concerned is the jsUnitCore.js file in the jsunit/app directory. That's the file that makes the magic happen. You will need to include this in your testing scripts. The other file of note is jsunit/testRunner.html file. This will be the main test runner page that you will use to view the status of your tests. Mmmmm the Green bar!

Lets take a look at this image to give us an overview of how we want our testing structure setup to start with.


What this relationship shows is that we have our main testRunner.html page which we'll access through the browser. If you take a look at this UI shot of the testRunner interface, you'll notice a UI text box to put in a test script.


This test script can be a single page or a "suite" of pages. The nice part about the suite is you can have suites of suites. What this means is let's say you have an inventory module you are working on. You also have an order entry module you just finished. The inventory modules has 2 javascript classes in 2 files, so you created two test scripts so far. You can roll those into what's called a "suite" so you only have to run one page to actually run both sets of tests. You could also have a "TOTAL PACKAGE" suite that runs all your modules. Sometimes though you might just want to test a module you're working on for speed's sake.

Lets jump into our first script just to make sure we're up and running. This will just cover getting us up and running. I will post another write up on how to actually test your ajax application.

Environment setup:
Let's assume we downloaded jsunit to our root directory so our web structure looks like this:

Htdocs/jsunit/

First things first. Let's make sure everything unpackaged correctly and go to: http://localhost/jsunit/testRunner.html

(if you installed to a different location, point your browser to the appropriate place. Unix servers must also take note of the capital R in testRunner.html)

You should now be looking at the same UI screen that I've shown at the beginning of this page.

Now let's write our first script in the TDD (test driven development) fashion where tests come before code. We just want to make sure we're working properly so here we go.

Step 1:
Create a file called testOfJSUnit.htm

 
<html>
 <head>
  <title>Test Page for Inventory Module</title>
  <script language="javascript" src="http://localhost/jsunit/app/jsUnitCore.js"></script>
</head>
 <body>
  <script language="javascript">
 
function testSetupWorks() {
 
	assertEquals("Should have equaled true for setup", 1, 1);
        
    }   
  </script>
 </body>
</html>
 

So all we're trying to do is assert that 1 does in fact equal 1 which will give us a passing score. We just want to make sure we're all setup properly. So now we have a bonafide JSUnit test script. Here's what we did:

You'll notice at the top this line

 
<script language="javascript" src="http://localhost/jsunit/app/jsUnitCore.js"></script>
 

That's the meat and potatoes. We want to include the core library for JSUnit so we have access to all the assert methods.

 
function testSetupWorks() {
 
	assertEquals("Should have equaled true for setup", 1, 1);
        
    }   
 

The function above is a test function. Anything that begins with "test" gets run in JSUnit. We're using the function assertEquals which takes 3 arguments. The args are: a comment to show if the test fails, the condition to match and a condition to test. So we're testing that 1 is equal to 1.

Now go back to your browser and make sure you're at http://localhost/jsunit/testRunner.html

You'll see that text input where it says: "Enter the filename of the Test Page to be run:" In there type in the path to the file you created, so for me I would type in:
"localhost/Projects/test/testOfJSUnit.htm". Notice they already add the http:// for you. Click the run button and you should see a green bar for a passing test like this below:



If you see the green bar congrats! You have successfully installed JSUnit. This week I'll be doing a write up on how to test some common ajax functionality as well as setting up a test suite to run all our tests. If you didn’t get JSUnit installed correctly visit their mailing list here: http://groups.yahoo.com/group/jsunit/