-
-
Save gabeno/8950573 to your computer and use it in GitHub Desktop.
| 'use strict'; | |
| var expect = require('chai').expect; | |
| var jsdom = require('jsdom'); | |
| var jquery = require('jquery'); // option 2 | |
| var TodoView = require('../hello-backbone/views/todo-view'); | |
| describe('Backbone.View', function() { | |
| var $, todoView; // option 1 | |
| before(function(done) { | |
| jsdom.env({ | |
| html: '<html><body></body></html>', | |
| scripts: [jquery], // option 2 | |
| done: function(err, window) { // this means DOM is ready?! | |
| // $ = require('jquery'); // option 1 | |
| // | |
| todoView = new TodoView(); // => Error: jQuery requires a window with a document | |
| done(); | |
| } | |
| }); | |
| }); | |
| it('should be tied to a DOM element when created, based off the property provided', function() { | |
| expect(todoView.el.tagName.toLowerCase()).to.equal('li'); | |
| }); | |
| // ... other tests here | |
| }); |
I have found the problem. Something that probably was escaping me was that jsdom creates a DOM instance (window and its friends). At this point, it needs to have the necessary scripts that you may need e.g. jquery. So I have to define $ within the DOM instance. Here is a solution that works:
before(function(done) {
jsdom.env({
html: '<html><body></body></html>',
scripts: ['scripts/jquery-2.1.0.min.js'],
done: function(err, window) {
if (err) console.log(err);
// console.log(window.jQuery); // referencing jQuery into the DOM instance
var $ = window.jQuery;
var Backbone = require('backbone');
Backbone.$ = $;
done();
}
});
});
and boom!
Backbone.View
✓ should be tied to a DOM element when created, based off the property provided
The downside to this IMO is that I had to use a local copy in scripts directory in my test folder.
tests
| - scripts
| - jquery-2.1.0.min.js
This is my setup because eventually I want to browserify my app.
@todo: Look for a way to reference from the jquery dist directory so that whenever I npm update jquery my test suite does not fall behind if I forget to copy the new distro in the scripts folder which is highly likely.
Hey man, I'm facing the same problem.. can you provide just for testing you backbone view code ?
does it looks like this one?
var Backbone = require("Backbone");
Template = require("templatePath"),
$ = require("jquery");
Backbone.$ = $;
module.exports = Backbone.View.extend({
//view
});
@renancarvalho Did you manage to hack it?
Error is thrown when I try to use both options. I don't get it because the
windowobject returned in thedonecallback hasdocument. Any insights?