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

6 Comments »

  1. i found your post in google+
    it project may interest you: http://nin-jin.github.com/web-components/lib_dev/lib_dev/lib_dev.doc.xml
    * 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:

WordPress.com Logo

You are commenting using your WordPress.com 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

Theme: Shocking Blue Green. Get a free blog at WordPress.com

Follow

Get every new post delivered to your Inbox.

Join 67 other followers

%d bloggers like this: