I have a little project that I started writing in OpenLaszlo. I chose OpenLaszlo because I thought I could script it in standard JavaScript but during the development of my minor app I found a few errors with the OpenLaszlo JavaScript implementation and the project stalled. Now, having started a new job, where the development team use splendid new technologies like QUnit, and JQuery, I resurrected my app.
So I present, to you, some notes on my experience of Test Driven JavaScript using QUnit.
I class myself as a real novice with JavaScript.
Fortunately the development team gave me a quick demo of QUnit at work so I understood a little about the technology, and no better teacher than experience can help me understand, so time to dabble.
As a novice, I followed the instructions on the QUnit site and created a basic test page (called test_eprime.htm
).
<html>
<head>
<script src="jquery-latest.js"></script>
<link media="screen" href="testsuite.css" type="text/css" rel="stylesheet">
<script src="testrunner.js"></script>
<script>
$(document).ready(function(){
});
</script>
<h1>E-Prime JavaScript Tests</h1>
<h2 id="banner"></h2>
<h2 id="userAgent"></h2>
<ol id="tests"></ol>
<div id="main"></div>
</body>
</html>
And when viewed in a browser this gives me the joyous news that I have 0 tests of 0 failed.
Woo Hoo!
In order to support this my code folder has:
- jquery-latest.js
- testrunner.js
- testsuite.css
- testrunner.js
- test_eprime.htm (the code above)
So now I’ll create my first test. I do this by adding all my tests between the magic lines in the above test frame work html
<script>
$(document).ready(function(){
// **** I add all my code in here ****
});
</script>
QUnit has the concept of modules which ‘chunk’ tests together. So I create an html formatting module, for all my HTML formatting tests.
module("HTML Formatting");
And then I’ll write my first test…
test("html char conversion", function(){
equals(">",convertToHTMLIfRequired('>'));
});
I added a new ’test’ to the set of tests. The test had the name “html char conversion”. I created the code of the test as an unnamed function. The purpose of the test? To check the function convertToHTMLIfRequired function returns >
when called with the parameter >
So now I save my test_eprime.htm
file and reload it into FireFox.
And voila…
…my test failed. Hopefully as you expected, after all I didn’t write any code.
So off I go to my trusty text editor and create a new file called eprime.js which looks like this
function convertToHTMLIfRequired(c){
return '>';
}
Run the tests again by refreshing the page in the browser. And…
Wha! Oh, I forgot to include eprime.js into my test_eprime.htm, OK, easy fix.
...
<script src="testrunner.js"></script>
<script src="eprime.js"></script>
...
Refresh to run the tests.
_**
Alright! High Five! Watch as I do my “successful test passing” dance.
And so we move on.
Back into the tests and make that a little more robust…
test("html char conversion", function(){
equals(">",convertToHTMLIfRequired('>'));
equals("<",convertToHTMLIfRequired('<'));
});
Refresh the browser and my tests fail. As we would hope.
Eagle eyed readers will note that I got the ’expected’ and ‘actual’ parameters the wrong way around. I should have used the format…
equals(<actual>,<expected>);
I could blame my error on the QUnit front page which shows the following example code…
equals( "hello", value, "We expect value to be hello" );
But I’d feel petty and, since I didn’t read the manual, I take the blame.
So I go away and add more code, like a good TDD practitioner.
function convertToHTMLIfRequired(c){
if(c=='<')
return '<';
if(c=='>')
return '>';
}
Refresh the browser…
Woo hoo! Cue “Successful test passing” dance… and so on, and so on…
I then follow this with more TDD iterations, which worked out rather well. But so as not to bore you, I shall conclude.
Conclusions
The eagle eyed among you will have said “Why does it keep saying 0 tests of 0 failed, even when 1 failed?” and the answer I respond with reads “I don’t know, I haven’t read the manual yet”.
And despite the “0 tests of 0 failed”, I like:
- this unit test harness,
- how easy I found writing JavaScript using TDD with QUnit,
- TDD JavaScript,
- how easy I found writing JavaScript using TDD with QUnit,
- the fact that my IDE consists of a free text editor notepad++, and a free Browser,
- the fact that I haven’t had to read the manual yet, and have managed to make a lot of progress,
- that I can keep running my tests easily,
- the fact that I haven’t had to read the manual yet, and have managed to make a lot of progress,
- by loading my test page into different browers I can check for browser compatibility
More TDD JavaScript posts coming soon. Will I ever get rid of “0 tests of 0 failed”? … stay tuned thrill seekers.
You will need a Github account to comment. Or you can contact me with your comment.
I reserve the right to delete spam comments e.g. if your comment adds no value and its purpose is simply to create a backlink to another site offering training, or courses, etc.