QUnit Composite Addon: Running Multiple jQuery Test Files

22 May 2012

Introduction

When you start Unit Testing your application with QUnit you’ll notice that you’ll have lots of different QUnit files that thoroughly test one feature or component of your system.

Instead of opening each one of those test files and running them separately, wouldn’t it be nice if you could launch one file that would run all the tests?

Thankfully, there is a addon for that and it’s called the Composite addon!

Composite is a QUnit addon that, when handed an array of files, will open each of those files inside of an iframe, run the tests and display the results as a single suite of QUnit tests. -- https://github.com/jquery/qunit-composite

Setup

Setting up the Composite addon is pretty easy. All you really need to do is to get the qunit-composite.js and qunit-composite.css files from the Composite Addon Repository in GitHub and then tell QUnit what test files are a part of your Test Suite! See the following for an example setup.

Running Example

I’ve taken the Unit Tests from a couple of blog posts I’ve done recently (filterByData jQuery Plugin: Select by HTML5 Data Attr Value & jQuery :dataAttr Pseudo Selector) and have decided to bundle them together using the QUnit Composite Addon.

NOTE: Normally your URLs will look much cleaner than these in this example. Since I'm running these tests in jsFiddle the resources are pointed to their jsFiddle hash appended with /show so that they will render only the result.

Running from the file:// Protocol

In order for this to work you must host your files in a web server because the Composite addon relies on making AJAX calls to pull in the other QUnit files. If you are trying to run the test from the file:// protocol then you will get an error and the tests will not run. If you want to run the tests from Google Chrome you can enable the allow-file-access-from-files command line parameters.

• Mac: open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
• Windows: C:\path\to\chrome.exe --allow-file-access-from-files
• Linux: /usr/bin/google-chrome --allow-file-access-from-files

Conclusion

Using the QUnit Composite addon is very handy to get a quick high level view of the health of your web application. There is some overhead when running all of the tests at one time, but by making it easier to run all of your tests makes the likelihood of you running them much higher than otherwise.