QUnit testing my jQuery Mobile site in full swing

17 March 2011   1 comment   Javascript

Powered by Fusion×

QUnit testing my jQuery Mobile site in full swing 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() {
  teardown: function() {

var MockMobile = function() {
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/':
      case '/smartphone/auth/login/':
        if (options.data.password == 'secret')
          options.success({error:"Wrong credentials"});
        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');

(Note: this is copied slightly out of context but hopefully it reveals some of the hacks and tricks I use)


Kudos! What a neat way of tihnking about it.

Your email will never ever be published

Related posts

More productive than Lisp? Really??! 10 March 2011
MongoUK 2011 - London conference all about MongoDB 21 March 2011
Related by keywords:
Difference between $.data('foo') and $.attr('data-foo') in jQuery 10 June 2012
How I stopped worrying about IO blocking Tornado 18 September 2012
Never put external Javascript in the <head> 02 April 2013
localForage vs. XHR 22 October 2014
Why I gave up on JQuery UI's autocomplete 20 October 2010
Lesson learnt with creating DOM element with jQuery 04 April 2008
jQuery and Highslide JS 08 January 2008
In jQuery, using the :visible selector can be dangerous 14 September 2010
US License Plate Spotter (part 1) 09 July 2012
Why Django and Grok matters 02 February 2008
US License Plate Spotter (part 2) 08 August 2012
Too Cool For Me? 25 September 2011