Thursday, April 25, 2013

Require.js and QUnit Integration

When I was integrating Require.js and QUnit I googled around to find what people were doing. Turns out many people were using something like this.
While this works well, it requires you to add reference to the QUnit javascript directly through the script tag, and not through the regular define function. This goes against the AMD principles.

Here is what I've come up with:

First, add the QUnit file to the require.js config, like this:

    requirejs.config({
        paths: {
            'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery',
            'qunit-1.11.0':
        },
        shim: {
            'qunit-1.11.0': ['jquery']
        }
    });

Second, in your core test file add this

define(['jquery', 'qunit-1.11.0'], function ($) {

    // load the qunit css
    $('head').append($('').attr('href', '//' + devCenterConfig.staticBaseUrl + '/css/qunit-1.11.0.css'));
    $("body").append('
');

    // initialize qunit
    QUnit.config.autostart = false;
    QUnit.load();
.....

Last, After your tests have been defined, call this function:
QUnit.start();

Hope this helps.