Testing Dojo Modules that need the DOM

This is a short post to summarize how I test Dojo 1.x modules that need the DOM.  In the future, I plan a more detailed post along with a Dojo 1.x playground repository on BitBucket with real examples, but for now I will just outline the steps I took.

The testing framework that Dojo 1.x uses is not adequate (at least as far as I could tell).  I wanted to be able to run all my tests in a build script, even those that require the DOM.

The following two articles gave me what I needed:

  1. Testing react with jsdom.
  2. Dojo and Node.js

 

From the first article, I borrowed the test framework and the use of jsdom to set global DOM variables.  From the second article, I borrowed the method of loading node modules with the Dojo loader.  That allowed me to load the should.js assert library in my dojo tests, which report to mocha.

define([
    "main/foo",
    "dojo/hash",  // we are going to use the DOM.
    "dojo/node!should"  // import node module, should, which will report to mocha.
],
function(
    foo,
    dojo_hash,
    should
) {

 

To run the tests, mocha calls the following bootstrap file.  Note that, unlike in the linked article, dojoConfig sets “dom”:1.

// ---------------------------------------------------------------
// Create a DOM object and set global variables.
// ---------------------------------------------------------------
var jsdom = require('node-jsdom')
document = jsdom.jsdom('<!doctype html><html><body></body></html>')
window = document.defaultView
location = window.location;


// ---------------------------------------------------------------
// Configure dojo
// ---------------------------------------------------------------
// Array of test modules to run
dojoTestModules = ["test/main/foo", "test/main/bar"];

dojoConfig = {
    baseUrl: "../../..", // Where we will put our packages
    async: 1, // We want to make sure we are using the "modern" loader
    hasCache: {
        "host-node": 1, // Ensure we "force" the loader into Node.js mode
        "dom": 1 // Ensure that the code assumes we have a DOM
    },
    // While it is possible to use config-tlmSiblingOfDojo to tell the
    // loader that your packages share the same root path as the loader,
    // this really isn't always a good idea and it is better to be
    // explicit about our package map.
    packages: [{
        name: "dojo",
        location: "dojo-src-full/dojo"
    },{
        name: "dijit",
        location: "dojo-src-full/dijit"
    },{
        name: "dojox",
        location: "dojo-src-full/dojox"
    },{
        name: "bootstrap",
        location: "app/bootstrap"
    },{
          name: "main",
          location: "app/main"
    },{
         name: "test",
         location: "app/tests/mocha/"
     }],
     deps: dojoTestModules 
};


// Now load the Dojo loader
// This will run all the tests in dojoTestModules
require("../../../dojo-src-full/dojo/dojo");
Advertisements
This entry was posted in Development and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s