Yay! I've figured out how to properly unit tests my jQuery Mobile app that I'm working on. This app uses localStorage, localSession, lots of AJAX and works both offline and online. Through various hacks and tricks I've managed to mock things so that I can easily test the otherwise asynchronous AJAX calls and I can also test the little quirks of jQuery Mobile such as re-rendering <ul> tags after having changed the DOM tree.
I'm using the QUnit testing framework and I like it. The app isn't launched yet and the code is currently protected but once I get it nailed a bit more I'll blog about it more fully so other people can jump in unit testing their Javascript heavy jQuery Mobile sites too. For now I'm up to 75 tests and it's growing steadily.
Here's a little taster for how I mock the $.mobile, AJAX and the localStorage stuff:
module("Storage and AJAX", {
setup: function() {
localStorage.clear();
},
teardown: function() {
localStorage.clear();
}
});
var MockMobile = function() {
this.current_page;
};
MockMobile.prototype.changePage = function(location) {
this.current_page = location;
};
test("test Auth", function() {
$.mobile = new MockMobile();
var _last_alert;
alert = function(msg) {
_last_alert = msg;
};
$.ajax = function(options) {
switch (options.url) {
case '/smartphone/checkguid/':
options.success({ok:true});
break;
case '/smartphone/auth/login/':
if (options.data.password == 'secret')
options.success({guid:'10001'});
else
options.success({error:"Wrong credentials"});
break;
default:
console.log(options.url);
throw new Error("Mock not prepared (" + options.url + ")");
}
};
var result = Auth.is_logged_in(false);
equals(result, false);
Auth.ajax_login('peterbe@example.com', 'other junk');
ok(_last_alert);
...(Note: this is copied slightly out of context but hopefully it reveals some of the hacks and tricks I use)
