-
Star
(180)
You must be signed in to star a gist -
Fork
(30)
You must be signed in to fork a gist
-
-
Save michaelcox/3800736 to your computer and use it in GitHub Desktop.
| <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> |
| 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'); | |
| }); | |
| }); | |
| }); | |
| }); |
| define(function(require) { | |
| var Backbone = require('backbone'); | |
| var models = {}; | |
| models.Sample = Backbone.Model.extend({ | |
| urlRoot: '/api/samples' | |
| }); | |
| return models; | |
| }); |
| 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(); | |
| }); | |
| }); |
A link to the original blog post as well as some additional thoughts on unit testing in backbone can be found here:
Very useful, thanks a lot
I've been looking for something like this for weeks, thank you so much!
I'm having difficulty loading mocha (it says: "Uncaught TypeError: Cannot read property 'setup' of undefined"). The reason is because the variable "mocha" is undefined. I downloaded mocha.js from https://github.com/mochajs/mocha/blob/master/mocha.js but for some reason that doesn't seem to be the right code. I looked online and everyone says to use npm and nobody mentions copying. Can someone clarify?
sfahlberg - take a look and see if my gist helps you. I changed a few things from this one because I had a some problems on account of the fact that I didn't want my index.html to consist of the test code, but I remember I also had problems like the one you're describing and they are gone now.
https://gist.github.com/danascheider/82eda70a4f7152841dca
Let me know if this helps.
And michaelcox, I just wanted to thank you again for this gist, I have been testing successfully for weeks now and honestly don't know if I would have gotten to this point without it. You added some much-needed clarity to a hair-pulling process.
@sfahlberg - I have had the same problem and have fixed it by simply not assigning require('mocha') to var mocha ie, this line:
var mocha = require('mocha');
becomes
require('mocha');
I am very new to TDD and require, and I'm not really sure why this works. I also copied the code, but from here, the link I found on another blog post ( it looks like the same code ):
https://github.com/visionmedia/mocha/raw/master/mocha.js
If anyone can tell me why I've had to apply this fix, or if you have found a solution sfalhberg, to making it work with the copied code I would be most grateful :)
@sfahlberg - I had the same issue. This is how I got it to work:
requirejs.config({
baseUrl: '../client/js/',
paths: {
'jquery' : 'libs/jquery',
'underscore' : 'libs/underscore',
'backbone' : 'libs/backbone',
'mocha' : '../../tests/libs/mocha',
'chai' : '../../tests/libs/chai',
'chai-jquery' : '../../tests/libs/chai-jquery',
'cardmodels' : 'app/models/cardmodels'
},
shim: {
'chai-jquery': ['jquery', 'chai'],
'mocha': {
init: function () {
this.mocha.setup('bdd');
return this.mocha;
}
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
}
},
urlArgs: 'bust=' + (new Date()).getTime()
});
define([
'chai',
'chai-jquery',
'mocha'
],
function (chai, chaiJquery, mocha) {
// Chai
var should = chai.should();
chai.use(chaiJquery);
require([
'specs/cardmodels-tests.js',
], function(require) {
mocha.run();
});
});
See in particular the shims section. The mocha shim which does mocha.setup was what got mocha working for me.
I also had to shim Backbone to get it working with the actual tests.
Also note that my paths are different, as I've set this up to run from a tests folder in my working app. The index.html file is inside tests
@michaelcox - in your gist chaiJquery is undefined since the recent file revision
Thank-you @michaelcox and @mike-kelly. Got my tests up and running after a frustrating couple of hours.
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.
Great gist, thanks for this.
Is there a way to run a single test using this method?
Can someone post their Gruntfile.js or gulpfile.js used to run this code? Thanks.
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.
Thanks @steeren - it's been a while since I wrote this, but I fixed the two things you pointed out. Yes I wouldn't need to require "require", and the link to model-tests.js was incorrect.
For the "mocha" require, however, I think it should work without a shim. The latest version of mocha at least has support for requirejs.