Unit Testing with jQuery using FireUnit & QUnit
21 Sep 2009Today’s screencast is the 5th in a series of developer Firefox Extensions. You can view my previous 3 short Screenr screencasts here…
- Firefinder for Firebug for Firefox for Fiddling with jQuery
- Digging Into The FireQuery Add-on for jQuery
- Page Speed & YSlow Firebug Extensions to Increase Web Page Performance
- ASP.NET AJAX Add-ons (FireAtlas & FireCookie) for Firefox's Firebug
- In addition to this post being part in a series of Firefox Extension screencasts, it is actually also the 3rd part of an old series looking through various JavaScript Unit Testing frameworks…
- JavaScript Unit Testing Frameworks
- JavaScript Unit Testing Part 1: JsUnit
- JavaScript Unit Testing Part 2: JSSpec
- The following short screencast will give a quick review of the FireUnit Firefox Firebug Add-on and also the QUnit Unit Testing framework for jQuery. In case you don’t want to watch the 4 minute screencast I thought I would go ahead and flush out the rest of this blog post with code, screenshots, and commentary.
- As a review, to exercise our Unit Testing frameworks we have been using a simple Pig Latin function as our testing subject.
This code is not optimal and it will be refactored in a future post. So, please focus on the Unit Testing and not the actual Pig Latin function :)
So, here is the Pig Latin converter function we will be using for our tests…
function EnglishToPigLatin() {
this.CONSONANTS = 'bcdfghjklmnpqrstvwxyz';
this.VOWELS = 'aeiou';
this.Translate = function(english, splitType) {
var translated = '';
var words = english.split(/\s+/);
for (var i = 0; i < words.length; ++i) {
translated += this.TranslateWord(words[i]);
if (i+1 < words.length) translated += ' ';
}
return translated;
}
this.TranslateWord = function(english) {
/*const*/ var SYLLABLE = 'ay';
var pigLatin = '';
if (english != null && english.length > 0 &&
(this.VOWELS.indexOf(english[0].toLowerCase()) > -1 || this.CONSONANTS.indexOf(english[0].toLowerCase()) > -1 )) {
if (this.VOWELS.indexOf(english[0].toLowerCase()) > -1) {
pigLatin = english + SYLLABLE;
} else {
var preConsonants = '';
for (var i = 0; i < english.length; ++i) {
if (this.CONSONANTS.indexOf(english[i].toLowerCase()) > -1) {
preConsonants += english[i];
if (preConsonants.toLowerCase() == 'q' && i+1 < english.length && english[i+1].toLowerCase() == 'u') {
preConsonants += 'u';
i += 2;
break;
}
} else {
break;
}
}
pigLatin = english.substring(i) + preConsonants + SYLLABLE;
}
}
return pigLatin;
}
}
First we are going to write a simple set of 20 FireUnit tests that can be ran inside Firefox’s Firebug using the FireUnit Add-on.
If we run the webpage inside of Firefox, we don’t see anything from the browser window, but if we open Firebug and click the “Tests” tab, then we can see the output of the 20 tests.
One of the other nice features of FireUnit is that its compare assertion will actually show the difference of the two values instead of just saying they are the same or not. Here is an example of the output from a failing compare…
The output is pretty impressive, but what if you already have a lot of existing QUnit Unit Tests or what if you would also like to have some sort of User Interface to your test page. Well, the nice thing about FireUnit is that you can integrate it into QUnit! By adding several lines of code we can have the output of our QUnit tests render to the FireUnit Add-on as well!
The following is a set of QUnit Unit Tests with 4 lines of code near the end that registers the output with FireUnit as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
English To Pig Latin QUnit Tests
English To Pig Latin QUnit Tests
Now, not only do we have a User Interface on the webpage, but we also have the tests running in Firebug.
For more information about FireUnit you can check out a post by Jonn Resig and it’s Wiki on GitHub. And if you are interested in QUnit, there is a nice overview on the jQuery webiste.
