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

https://github.com/ajlopez/AjLispJs

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:

https://github.com/ajlopez/AjScript

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

https://github.com/jquery/qunit

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:

<html>
<head>
<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>
</head>
<body>
<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>
</html>

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() {
	same(3-1,2);
    });</script>

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.

Links:

Script Junkie | jQuery Test-Driven Development http://msdn.microsoft.com/en-us/scriptjunkie/ff452703.aspx

QUnit – jQuery JavaScript Library

http://docs.jquery.com/QUnit

My links

http://delicious.com/ajlopez/javascript+tdd

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

Keep tuned!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

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

Follow

Get every new post delivered to your Inbox.

Join 68 other followers