<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'); | |
}); | |
}); | |
}); | |
}); |
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(); | |
}); | |
}); |
This comment has been minimized.
This comment has been minimized.
thaddeusalbers
commented
Mar 25, 2013
There's a couple of differences. See http://chaijs.com/guide/styles/#differences and http://chaijs.com/guide/styles/#should-extras. |
This comment has been minimized.
This comment has been minimized.
AlexZeitler
commented
Mar 27, 2013
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) |
This comment has been minimized.
This comment has been minimized.
phillycoder
commented
Apr 1, 2013
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); |
This comment has been minimized.
This comment has been minimized.
kumarharsh
commented
May 11, 2013
@craigrich : Check out this page for the differences between expect & should. http://chaijs.com/guide/styles/ |
This comment has been minimized.
This comment has been minimized.
kumarharsh
commented
May 11, 2013
+1 for this gist. Awesome! |
This comment has been minimized.
This comment has been minimized.
rwestgeest
commented
Jul 9, 2013
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. |
This comment has been minimized.
This comment has been minimized.
mnoble01
commented
Aug 6, 2013
@rwestgeest, thanks so much! I was searching for a solution to @AlexZeitler's same problem for a couple hours. |
This comment has been minimized.
This comment has been minimized.
kucherenko
commented
Aug 21, 2013
Thank you, very useful gist. |
This comment has been minimized.
This comment has been minimized.
htulipe
commented
Sep 8, 2013
Very useful, thanks a lot |
This comment has been minimized.
This comment has been minimized.
chrishokamp
commented
Oct 21, 2013
Thanks for this great gist! I also had to add shims for mocha and chai to get this to work via
|
This comment has been minimized.
This comment has been minimized.
gumaflux
commented
Dec 11, 2013
Thanks @rwestgeest got tripped by same issue head banging for a little while there.. |
This comment has been minimized.
This comment has been minimized.
dminkovsky
commented
Feb 28, 2014
Coolness, thank you. |
This comment has been minimized.
This comment has been minimized.
The1nternet
commented
Mar 14, 2014
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() |
This comment has been minimized.
This comment has been minimized.
steeren
commented
Aug 20, 2014
@michaelcox, great work, thank you - very useful. In specRunner.js it should read: Also, one tiny tiny little thing (not really a bug but more for your information), your require call, requires require :-) Clearly if require is already in scope (its global) then your require call, really shouldn't be requiring itself. // Init Chai /*globals mocha */ require([ }); And finally.... Is indeed misleading and I can't explain the rational behind it, but I can tell you that the magic occurs because the first time you call chai.should() the should() function is defined and initialised (it always helps to read/debug through these libraries - treating any JS library like a blackbox is a mistake - in almost all cases. Still though, it is weird and understandable that it caused confusion. |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
A link to the original blog post as well as some additional thoughts on unit testing in backbone can be found here: |
This comment has been minimized.
This comment has been minimized.
indigofeather
commented
Jan 3, 2015
Very useful, thanks a lot |
This comment has been minimized.
This comment has been minimized.
danascheider
commented
Jan 13, 2015
I've been looking for something like this for weeks, thank you so much! |
This comment has been minimized.
This comment has been minimized.
sfahlberg
commented
Feb 5, 2015
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? |
This comment has been minimized.
This comment has been minimized.
danascheider
commented
Feb 12, 2015
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. |
This comment has been minimized.
This comment has been minimized.
danascheider
commented
Feb 12, 2015
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. |
This comment has been minimized.
This comment has been minimized.
Tallowman
commented
Mar 11, 2015
@sfahlberg - I have had the same problem and have fixed it by simply not assigning require('mocha') to var mocha ie, this line: 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 ): 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 :) |
This comment has been minimized.
This comment has been minimized.
mike-kelly
commented
Mar 20, 2015
@sfahlberg - I had the same issue. This is how I got it to work:
See in particular the shims section. The mocha shim which does 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 @michaelcox - in your gist |
This comment has been minimized.
This comment has been minimized.
mikealexander
commented
Jun 8, 2015
Thank-you @michaelcox and @mike-kelly. Got my tests up and running after a frustrating couple of hours. |
This comment has been minimized.
This comment has been minimized.
leftclickben
commented
Nov 27, 2015
Thanks for this, very useful. In my scenario, I wanted the tests to run both under
The |
This comment has been minimized.
This comment has been minimized.
amitrai99
commented
Jan 18, 2016
Great gist, thanks for this. |
This comment has been minimized.
This comment has been minimized.
maryjanebarger
commented
Jun 30, 2016
Can someone post their Gruntfile.js or gulpfile.js used to run this code? Thanks. |
This comment has been minimized.
craigrich commentedMar 24, 2013
Thanks for this! are there any differences for using 'expect' over 'should' in chai? or is it down to personal preference?