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


  1. i found your post in google+
    it project may interest you:
    * all exceptions catched by browser console with all his debug features.
    * source code is best test description
    * live editing on page with syntax highlighting
    * very accuracy benchmarks

    Comment by ninjin — July 13, 2011 @ 2:26 pm

  2. […] I’m using QUnit for tests: […]

    Pingback by AjLisp in Javascript (Part 1) Atoms, Lists and TDD « Angel “Java” Lopez on Blog — August 19, 2011 @ 10:59 am

  3. […] TDD with Javascript and QUnit […]

    Pingback by Social Games Programming (Part 6) Testing Game and Service with TDD and QUnit « Angel “Java” Lopez on Blog — December 19, 2011 @ 8:44 am

  4. […] TDD with Javascript and QUnit TDD con Javascript y QUnit […]

    Pingback by Programando Juegos Sociales en Línea (Parte 6) Armando y Probando el Juego y los Servicios con TDD y QUnit - Angel "Java" Lopez — December 30, 2011 @ 10:25 am

  5. Excellent way of describing, and good post to get information
    about my presentation subject matter, which i am going to
    convey in academy.

    Comment by Isabella — July 11, 2013 @ 10:11 pm

  6. Valuable information. Fortunate me I discovered your website accidentally,
    and I am shocked why this twist of fate did not came about earlier!
    I bookmarked it.

    Comment by Xbox games for kids — July 11, 2013 @ 10:42 pm

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Shocking Blue Green Theme. Create a free website or blog at


Get every new post delivered to your Inbox.

Join 70 other followers

%d bloggers like this: