Angel \”Java\” Lopez on Blog

July 11, 2011

TDD with Javascript and QUnit

Filed under: JavaScript, QUnit, Test-Driven Development — ajlopez @ 9:49 am

This week end, I started to write a lisp interpreter using Javascript. The code is at

But the key point: I’m using TDD (Test-Driven Development). I couldn’t start such project using traditional development: I’m still not proficient in Javascript. Using TDD is the way to start mastering Javascript idioms and patterns. Meanwhile, I’m writting a Javascript interpreter in C#, see:

Last week, I stated to use QUnit TDD framework in a customer project. You can download it from:

After expanding the content (I downloaded the .zip file), you can launch the index.html file in the test directory. The result:

How to start a test? I copied qunit.js, qunit.css to a new directory, and I added a jquery source code file to it. Then, I created a new index.html with content:

<meta charset="UTF-8" />
<title>QUnit First Test</title><link rel="stylesheet" href="qunit.css" type="text/css" media="screen"><script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="qunit.js"></script>
<h1 id="qunit-header">QUnit First Test</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div><h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol><div id="qunit-fixture">test markup</div></body>

The page reference JQuery and QUnit. The initial markup is important: QUnit will fill it with the test results. The result:

Before closing tag </body> I added an script fragment, with the initial tests (the simplest one

<script type="text/javascript">
    test("First Test", function() {

The test is green:

Note the use of $ JQuery function to register the code to execute AT THE END of the load of document.

You could add some test for a classic Calculator:

test("Calculator", function() {
    var calculator = new Calculator();
    equal(calculator.add(3,2), 5);});

Now, the second test is red:

I wrote the new calculator.js file, with the minimal code to pass the test:

function Calculator() {
	this.add = function(x, y) { return x+y; }

I added the reference in index.html:

	<script type="text/javascript" src="calculator.js"></script>

and re-load the page:

All is Ok! You can use your preferred editor. No IDE is needed. 

And you can learn Javascript (classes, prototypes, namespaces, scopes, closures) writing code using TDD.


Script Junkie | jQuery Test-Driven Development

QUnit – jQuery JavaScript Library

My links

You can download this simple example from my Skydrive: Next steps: write about AjLispJs, the Lisp interpreter I’m writing using TDD.

Keep tuned!

Angel “Java” Lopez

The Shocking Blue Green Theme. Blog at


Get every new post delivered to your Inbox.

Join 72 other followers