9

Should be a simple question. How do I set the width in a jsDom object?

    jsdom.env({
        url:'http://testdatalocation',
        scripts: ['http://code.jquery.com/jquery.js'],
        done: function(errors, tstWindow) {
            console.log(tstWindow.innerWidth);
};
}
});

I can't figure out how to get the "innerWidth" to be anything but 1024

Skip Huffman
  • 5,239
  • 11
  • 41
  • 51
  • Your last sentence implies you tried to do it but it did not work. What did you try? – Louis Oct 22 '14 at 18:13
  • A number of things. I tried tstWindow.resizeTo(#) tstWindow.resizeBy(#) setting a "width" attribute, setting a innerWidth attribute, and some other things that I don't recall. – Skip Huffman Oct 22 '14 at 18:16
  • I suspect I am running into difficulty partly because of API changes, but also I seem not to have fully groked jsDom. (Thanks for your help on my other question, Louis, this is a continuation of the same thing) – Skip Huffman Oct 22 '14 at 18:19

2 Answers2

5

The resizeTo and resizeBy methods are not implemented. You can see that by searching through the code base of jsdom:

$ grep -P 'resize(To|By)' `find . -type f`
./lib/jsdom/browser/index.js:    resizeBy: NOT_IMPLEMENTED(null, 'window.resizeBy'),
./lib/jsdom/browser/index.js:    resizeTo: NOT_IMPLEMENTED(null, 'window.resizeTo'),

If you just want to set the window size once and for all at initialization time, you could just set the innerWidth value to whatever you want. In a real browser, this is not the right way to do it, but in jsdom it would work.

However, if you have code that depends on resizeTo being present, you can add your own polyfill to the constructor that builds windows:

var jsdom = require("jsdom");

var document = jsdom.env({
    html: "<html></html>",
    done: function (error, w) {
        console.log(w.innerWidth, w.innerHeight);
        w.constructor.prototype.resizeTo = function (width, height) {
            this.innerWidth = this.outerWidth = width;
            this.innerHeight = this.outerHeight = height;
        };
        w.resizeTo(100, 200);
        console.log(w.innerWidth, w.innerHeight);
    }
});

This displays:

1024 768
100 200

The code above is for illustration purposes. I've not thought about all the ins and outs of writing a polyfill for resizeTo. resizeBy would be handled similarly but would add deltas to the size of the window.

Louis
  • 146,715
  • 28
  • 274
  • 320
3

There isn't currently a formal option or API for doing so.

The values of innerWidth and similar properties are simply set to literal values:

DOMWindow.prototype = createFrom(dom || null, {
  // ...
  name: 'nodejs',
  innerWidth: 1024,
  innerHeight: 768,
  outerWidth: 1024,
  outerHeight: 768,
  // ...
});

Beyond test cases and documentation, outerWidth isn't referenced elsewhere else in jsdom, so you could probably assign a new value within the created event, updating outerWidth as well.

The primary use-case for created is to modify the window object (e.g. add new functions on built-in prototypes) before any scripts execute.

created: function (errors, tstWindow) {
    tstWindow.outerWidth = tstWindow.innerWidth = 1440;
},
done: function(errors, tstWindow) {
    console.log(tstWindow.innerWidth);
}
Jonathan Lonowski
  • 121,453
  • 34
  • 200
  • 199