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.

The1nternet commented

Would someone be kind enough to explain how var should = chai.should() works when using RequireJS like in this example? Using "var" will scope "should" to within that single require function, therefore making it not available in the test fixtures. When I follow the example, it does not make "should" available in my test fixtures. Instead, i have to use the alias Should(), and I have to assign it to the window object like this: window.Should = chai.Should()
How are all of you able to get "should" to work in your tests without doing what i just described?
When i do this then, in my tests, i have to use Should, instead of should...
Here's a little explanation of why you have to do this, if you're making "should" global: https://github.com/chaijs/chai/issues/86
and if you're NOT making it global, then how is it available in your tests?

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.