Unit Testing with jQuery using FireUnit & QUnit

Today’s screencast is the 5th in a series of developer Firefox Extensions. You can view my previous 3 short Screenr screencasts here…

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.

FireUnit

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…

FireUnitCompare

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









    QUnitWithFireUnit

    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.