Using mocha to run specs in-browser, loading with requirejs

testingInBrowser.js

// You can paste this code into a browser console and it should work (provided preconditions below are met).

// Preconditions:
// 1. The page you load uses requirejs (so that window.require is defined).
// 2. A local server is running inside a folder with the correct dep's.
// You can do that by dumping this package.json:
var packageJson =
{
  "name": "funTestingServer",
  "version": "0.0.0",
  "description": "Host stuff for functional testing in-browser.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Pat Kujawa",
  "license": "ISC",
  "dependencies": {
    "mocha": "*",
    "referee": "git://github.com/busterjs/referee"
  }
}
// Then run `npm install`
// Finally, run `python -m SimpleHTTPServer`


// Put the element on the page for mocha to dump results into (using its default html reporter).
// Conventionally, give it an id of 'mocha'
var mochaDiv = document.getElementById('mocha')
if (!mochaDiv) {
    mochaDiv = document.createElement('div');
    mochaDiv.id = 'mocha';
    mochaDiv.style.position = 'absolute';
    mochaDiv.style.backgroundColor = 'rgba(255,255,255,0.8)';
    document.body.appendChild(mochaDiv);
}


// Set up loading of the necessary libs from the local server using requirejs (assumed to be on the page).
// http://stackoverflow.com/questions/23365972/require-js-lazy-loading-remote-url
var localRequire = require.config({ 
    baseUrl: 'http://0.0.0.0:8000/node_modules',
    paths: {
        mocha: 'mocha/mocha', // NOTE: no .js
        // expect() lib and dep's:
        'referee/expect': 'referee/lib/expect',
        referee: 'referee/lib/referee',
        samsam: 'referee/node_modules/samsam/lib/samsam',
        bane: 'referee/node_modules/bane/lib/bane',
    },
    shim: { 
        mocha: { exports: 'mocha' }, // take the window-added object and name it mocha
    },
});

localRequire(['mocha', 'referee/expect'], function(mocha, expect) {
    // Have mocha add 'describe', and 'it' to the window
    mocha.setup({
        ui: 'bdd',
        reporter: 'html',
    });
    
    // Run specs
    describe('mocha', function() {
        it('should load and put define and it in the global scope', function() {
            // No failed assertions or thrown exceptions means we pass
        });
        describe('async', function() {
            this.timeout(5000); // allow specs to run up to 5s
            it('should be built-in', function(done) {
                setTimeout(function () {
                    console.log('async done');
                    done();
                }, 1000);
                console.log('sync done');
            });
        });
        describe('failing', function() {
            it('should happen with thrown exceptions', function() {
                throw new Error('hope this fails!');
            });
            it('should happen with wrong expectations', function() {
                expect(false).toBeTruthy('That\'s right, fail');
            });
        });
    });
    
    // Run the specs
    var runner = mocha.run(function mochaRunDone(err) {
        console.log('mocha done. err: ', err, ' runner: ', runner);
    });
});