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
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
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
[...] 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
[...] 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
[...] 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