Dynamically executing QUnit tests against existing pages

One of the problems bothering me for a while was the inability to run tests against existing pages using most Javascript frameworks. We’ve been using JQuery for our platform and I’ve been focusing on integrating QUnit as the front-end testing framework. I also wanted to test more than just the Javascript functions. It was important, for us, to test the fully integrated experience. I looked to see if there was anything out there that does this but sadly no one had posted any examples.

To accomplish dynamic injection of QUnit into existing pages with QUnit you’ll need to do the following:

  1. Use a modified version of QUnit.
  2. Use a bootstrap class to dynamically load QUnit and your test file into the existing markup.
  3. The qboot object and implementation example.

1. Using a Modified version of QUnit

QUnit loads its initialization routines a the Window load event. However, when dynamically injection QUnit this event has already been processed by the browser. Therefore, slight modifications to QUnit were required. For now, I’m hosting the modified version but I will very soon apply it as a fork on GitHub to the QUnit project and submit a pull request to have the changes added to the main library.

  1. addEvent(window, "load", function() {
  2.  QUnit.begin({});
  3.  
  4.  // Initialize the config, saving the execution queue
  5.  var oldconfig = extend({}, config);
  6.  QUnit.init();

As you can see, the initialization routine is directly tied to the Windows load routine. This prevents QUnit from being dynamically injected. To fix this issue, I’ve proposed the following code change:

  1. //public run method that can be used to load QUnit after window load event started
  2. this.qRun = function() {
  3.  QUnit.begin({});
  4.  
  5.  // Initialize the config, saving the execution queue
  6.  var oldconfig = extend({}, config);
  7.  QUnit.init();
  8.  extend(config, oldconfig);

At the bottom of the function I reinstate the load event to keep things backwards compatible.

  1. }
  2.     addEvent(window, "load", this.qRun);

By exposing the initialization routine as a public function we are now able to dynamically inject QUnit.js into existing pages and run the QUnit initialization routines once we know QUnit is present.

2. The Bootstrap loader

The next piece of code I wrote was a Boostrap class that takes three simple options:

  1. var options = {
  2.             tests : "/folder/from/host/file_to_use.js",
  3.             host : "www.mydomain.com",
  4.             basepath : "/look/in/this/folder/"
  5.         }
  6.  
  7. window.qbootOptions = options;

The settings are fairly straight forward. Tell me which test file to load, tell me host where all these files reside, and tell me which folder to find the qunit libraries (basepath). I will rework some of these options in the future based on feedback. These were all the settings I needed for our internal implementation.

The actual bootstap.js looks for these options attached to the window object and if present will fire off the boostrap init function like this: qboot.init(windows.qbootOptions). I chose to keep the bootstrap completely self contained which is why I assigned the options to the Window parameter. Again, there is opportunity here for future refactoring.

3. The Complete Code

You can download the “qboot” library, the modified version of QUnit.js, and a Hello World example from my Google Code project: Project Home – SVN

Be Sociable, Share!

Leave a Reply

You must be logged in to post a comment.