public
michaelcox / SpecRunner.js
Last active

Browser Unit Testing with Backbone Mocha Chai and RequireJS

  • Download Gist
SpecRunner.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 
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: {
    'underscore': {
      exports: '_'
    },
    'jquery': {
      exports: '$'
    },
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    'chai-jquery': ['jquery', 'chai']
  },
  urlArgs: 'bust=' + (new Date()).getTime()
});
 
require(['require', 'chai', 'chai-jquery', 'mocha', 'jquery'], function(require, chai, chaiJquery){
 
  // Chai
  var should = chai.should();
  chai.use(chaiJquery);
 
  /*globals mocha */
  mocha.setup('bdd');
 
  require([
    'specs/model-test.js',
  ], function(require) {
    mocha.run();
  });
 
});
index.html
HTML
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 
<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>
model-tests.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 
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');
      });
    });
 
  });
 
});
models.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 
define(function(require) {
  var Backbone = require('backbone');
 
  var models = {};
 
  models.Sample = Backbone.Model.extend({
    urlRoot: '/api/samples'
  });
 
  return models;
 
});
craigrich commented

Thanks for this! are there any differences for using 'expect' over 'should' in chai? or is it down to personal preference?

thaddeusalbers commented

There's a couple of differences. See http://chaijs.com/guide/styles/#differences and http://chaijs.com/guide/styles/#should-extras.

AlexZeitler commented

Thanks for sharing. I'm using a similar structure which works fine inside the browser but it fails when using mocha-phantomjs (http://stackoverflow.com/questions/15657458/mocha-init-timeout-with-mocha-phantomjs). Did you ever test your solution with mocha-phantomjs? (https://github.com/metaskills/mocha-phantomjs)

phillycoder commented

Thanks for this gist, very useful.

I had to add a line after setup, to let mocha continue run tests after first fail.

  mocha.setup('bdd');
  mocha.bail(false);
kumarharsh commented

@craigrich : Check out this page for the differences between expect & should. http://chaijs.com/guide/styles/

kumarharsh commented

+1 for this gist. Awesome!

rwestgeest commented

Thanks for sharing. I have searched for hours for such a clear example. Found lots. This one really helped.

@AlexZeitler To run with mocha-phantomjs:

change: 

    mocha.run();

to 

    if (window.mochaPhantomJS) {
      mochaPhantomJS.run();
    }
    else {
      mocha.run();
    }

in SpecRunner.js

to use with expect i had to add th following line to SpecRunner.js

expect = chai.expect;  // note no 'var'

near

var should = chai.should();

(actually, I replaced that line.

mnoble01 commented

@rwestgeest, thanks so much! I was searching for a solution to @AlexZeitler's same problem for a couple hours.

kucherenko commented

Thank you, very useful gist.
Is it possible to run this tests with mocha command in terminal without phantomjs?

htulipe commented

Very useful, thanks a lot

chrishokamp commented

Thanks for this great gist!

I also had to add shims for mocha and chai to get this to work via grunt test:

shim: {
    ...,
    mocha: {
         exports: 'mocha'
    },
    chai: {
         exports: 'chai'
    }
},
gumaflux commented

Thanks @rwestgeest got tripped by same issue head banging for a little while there..

dminkovsky commented

Coolness, thank you.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.