Skip to content

Instantly share code, notes, and snippets.

@michaelcox

michaelcox/SpecRunner.js

Last active January 11, 2024 06:05
Show Gist options
  • Save michaelcox/3800736 to your computer and use it in GitHub Desktop.
Save michaelcox/3800736 to your computer and use it in GitHub Desktop.
Download ZIP
Browser Unit Testing with Backbone Mocha Chai and RequireJS
Raw
index.html
<html>
<head>
<meta charset="utf-8"/>
<title>Backbone Tests</title>
<link rel="stylesheet" href="libs/mocha.css"/>
</head>
<body>
<div id="mocha"></div>
<script data-main="SpecRunner.js" src="/app/libs/require.js"></script>
</body>
</html>
Raw
model-tests.js
define(function(require) {
var models = require('models');
describe('Models', function() {
describe('Sample Model', function() {
it('should default "urlRoot" property to "/api/samples"', function() {
var sample = new models.Sample();
sample.urlRoot.should.equal('/api/samples');
});
});
});
});
Raw
models.js
define(function(require) {
var Backbone = require('backbone');
var models = {};
models.Sample = Backbone.Model.extend({
urlRoot: '/api/samples'
});
return models;
});
Raw
SpecRunner.js
require.config({
baseUrl: '/backbone-tests/',
paths: {
'jquery' : '/app/libs/jquery',
'underscore' : '/app/libs/underscore',
'backbone' : '/app/libs/backbone',
'mocha' : 'libs/mocha',
'chai' : 'libs/chai',
'chai-jquery' : 'libs/chai-jquery',
'models' : '/app/models'
},
shim: {
'chai-jquery': ['jquery', 'chai']
},
urlArgs: 'bust=' + (new Date()).getTime()
});
define(function(require) {
var chai = require('chai');
var mocha = require('mocha');
require('jquery');
require('chai-jquery');
// Chai
var should = chai.should();
chai.use(chaiJquery);
mocha.setup('bdd');
require([
'specs/model-tests.js',
], function(require) {
mocha.run();
});
});
@mikealexander
Copy link

Thank-you @michaelcox and @mike-kelly. Got my tests up and running after a frustrating couple of hours.

@leftclickben
Copy link

Thanks for this, very useful. In my scenario, I wanted the tests to run both under gulp-mocha-requirejs and in the browser. This is what the core of my equivalent to SpecRunner.js looks like:

require.config({
    paths: {
        mocha: '../node_modules/mocha/mocha',
        chai: '../node_modules/chai/chai',
        // ... my modules ...
    },
    shim: {
        mocha: {
            init: function () {
                return this.mocha.setup({
                    ui: 'bdd',
                    reporter: /phantom/i.test(window.navigator.userAgent) ? 'spec' : 'html'
                });
            }
        }
    }
});

require(
    [
        'mocha'
    ],
    function (mocha) {
        require(
            [
                './spec/unit/main.spec'
            ],
            function () {
                mocha.run();
            }
        );
    }
);

The userAgent switch feels a bit hacky but it works.

@amitrai99
Copy link

Great gist, thanks for this.
Is there a way to run a single test using this method?

@maryjanebarger
Copy link

Can someone post their Gruntfile.js or gulpfile.js used to run this code? Thanks.

@bebnev-pro
Copy link

Thank you very much, man. It's really help me to add unit testing in my test-app based on old backbone... Guys, get attention that baseUrl is very important for all your future imports and paths. It will be based on your .html run-test file in your file system. Other thing - very great and really helpfull.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment