These days you'd be hard pressed to find a web application that isn't using JQuery, Prototype, or YUI. Over the last few months I've had several conversations with fellow developers about how to test applications using these frameworks.

Fortunately each of these frameworks includes a unit test runner. In this article I dive into QUnit, the test harness for JQuery based web applications.

Technologies

In this example I'll be using the following technologies:

JQuery 1.2.6

QUnit - I used the current trunk version as of 1/9/2008

QUnit TDD Workflow

In QUnit, each test "class" is a single HTML file. You write a <script> block inside this file that contains your unit test code. Consequently, the TDD workflow looks like this:

Reloading the HTML file in your browser becomes natural after a while. It's the equivalent of running a JUnit test individually in your IDE. And if you use Firebug you can debug the js code while the test runs if necessary.

Example

QUnit HTML file: test1.html

<html><head><title>Group Tests</title><!-- these 2 lines will be the same in each of your QUnit HTML files --><script language="javascript"src="../../main/webapp/js/jquery-1.2.6.min.js"type="application/javascript"></script><linkmedia="screen"href="testsuite.css"type="text/css"rel="stylesheet"/><!-- this file contains the js file under test --><script language="javascript"src="../../main/webapp/js/group.js"type="application/javascript"></script><!-- your test functions go in this block --><script language="javascript"type="application/javascript">$(document).ready(function(){test("constructor hides div",function(){varcontroller=newCreateGroupController('create-group');equals($("#create-group").css("display"),"none","Element should be hidden");});test("shows div when told to",function(){varcontroller=newCreateGroupController('create-group');controller.show();equals($("#create-group").css("display"),"block","Element should be visible");});});</script></head><body><h1>Group Tests</h1><!-- these are boilerplate elements that qunit requires --><h2id="banner"></h2><olid="tests"></ol><divid="results"></div><divid="main"></div><!-- this is the div we're going to show/hide in our test --><divid="create-group"><formaction=""></form></div><!-- I put this at the bottom of the file to workaround an issue in HTMLUnit, which I use to automate running the tests on my Continuous Integration server --><script language="javascript"src="testrunner.js"type="application/javascript"></script></body></html>

Output in Browser

When you run this test, you'll see output like this:

A failed test will look like this:

Conclusion

This is a very basic overview of how to use QUnit to test drive your Javascript development. In my next entry I'll explain how to automate your tests using JUnit and HTMLUnit.

Hi! I'm James Cooper, a technology consultant and developer based
in Seattle, WA. Current interests include distributed computing,
queueing, and the Go language.

I'm available for freelance work. Contact me at:
james at bitmechanic dot com