etlolap (2) [Avatar] Offline
#1
I followed the chapter B.4.1 "Get Node.js to load our modules" and executed "node nodeunit.js", but it leads to error( "jQuery requires a window with a document" ), which is located at the code line of "var $t = $( '<div/>' );"

I installed the jquery and nodeunit locally under webapp
ode_modules. Is it an issue?


Can you please help?
michael.mikowski (247) [Avatar] Offline
#2
Re: Node nodeunit.js to error( "jQuery requires a window with a document" )
Please check out the listings on GitHub at

https://github.com/mmikowski/spa/tree/master/listings

I did some investigating, and the problem is with the version of jQuery. Apparently, the latest is 2.1.0-beta3. This does not appear to include the jsdom package, and therefore a window document object is not available.

npm view jquery versions shows the jquery versions available. At time of writing, we were using 1.8.3. I'm certain installing that version would solve the problem. First remove the node_modules directory, and do the following under listings/apx0B/c.4.1:

npm install // installs package spec
npm install jquery@1.8.3 // install jQuery 1.8.3 and jsdom

I tested and it works.

I tried to load the latest version of jsdom and jquery to see if they play nice together:

npm install jsdom@0.8.10 jquery@2.1.0-beta3

And ... they don't smilie. I explored ways around this, but wasn't successful in the short time I had available.
michael.mikowski (247) [Avatar] Offline
#3
Re: Node nodeunit.js to error( "jQuery requires a window with a document" )
PLEASE see the Errata - It has been updated to include this fix.
etlolap (2) [Avatar] Offline
#4
Re: Node nodeunit.js to error( "jQuery requires a window with a document" )
Michael,

Thanks for your tips, which indeed worked.

May I know where exactly this code has used jsdom vs. jquery? Then I may continue to investigate and find out a way with these two modules separately.

Thanks
michael.mikowski (247) [Avatar] Offline
#5
Re: Node nodeunit.js to error( "jQuery requires a window with a document" )
Hi etlolap:

I didn't ever need to make the distinction before, so I can't tell you exactly where jsdom is used and where it isn't. However, the move to separate the DOM from other jQuery functions makes a lot of sense, as a lot of jQuery features can be useful without the DOM - like jQuery events and promises.

What I can tell you is that the jQuery 1.8.3 package for Node presented a document object by default. Now, in 2.1.0-beta3, it doesn't. In my job-that-pays-the-bills, I have code to set up the document. However, my first attempt to use this kind of code with jQuery 2.1.0-beta3 didn't work. Here is that code:

"use strict";
var
jsdom = require( 'jsdom' ).jsdom,
fake_html
= '<!doctype html><html><head></head>'
+ '<body>hello jsdom</body></html>'
;

global.document = jsdom( fake_html );
global.window = document.createWindow();
global.navigator = window.navigator;

global.getComputedStyle = window.getComputedStyle;
413870 (7) [Avatar] Offline
#6
Re: Node nodeunit.js to error( "jQuery requires a window with a document" )
michael.mikowski wrote:PLEASE see the Errata - It has been updated to include this fix.


I used this link and did not see this mentioned...thanks for the strong forum support!

https://manning-content.s3.amazonaws.com/download/7/1760041-20f7-4709-834d-5f3b7c88a3cc/Mikowski_SinglePageWebApps_Err1.html
413870 (7) [Avatar] Offline
#7
Took me 2 days to getworking using chai 3.5, jquery 2.2.3, jsdom 9.2.1, mocha 2.4.5. From a mocha spa-spec.js test file:
var
  // require mocha stuff
  jsdom = require('jsdom').jsdom,
  document = jsdom('<div/'),
  window = document.defaultView,
  $ = jQuery = require('jquery')(window);

describe('Our spa client...', function() {
  var $t,
         $defer = $.Deferred();

  beforeEach(function() {
     // async callback happening in the above var module scoped variables are requiring this global 
     // override to happen here
     global.$ = $;

  });

  it('has access to jquery and $', function() {
    expect($('body').html()).to.have.string('<div><\div>');
  });

Rhynri (1) [Avatar] Offline
#8
For those running into this issue...

First install jsdom globally:

 npm install -g jsdom 


Then add these two lines to the top of your nodeunit_suite.js:

global.jsdom = require( 'jsdom' ).jsdom;
global.window = jsdom(
    '<!doctype html><html><head></head><body></body></html>'
        ).defaultView;


You should be able to run the test normally:

Projects\spa>node nodeunit_suite.js
Fake Environment enabled... 
// ^^ console.log output to let you know it's working,
// added directly after last 'require()' call 
Login user is: { cid: 'id_5',
  name: 'Fred',
  css_map: { top: 25, left: 25, 'background-color': '#8F8' },
  ___id: 'T000002R000003',
  ___s: true,
  id: 'id_5' }

Enjoy!