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:
Image may be NSFW.
Clik here to view.
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:
Image may be NSFW.
Clik here to view.
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:
Image may be NSFW.
Clik here to view.
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:
Image may be NSFW.
Clik here to view.
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:
Image may be NSFW.
Clik here to view.
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
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
