-
-
Save javierarques/d95948ac7e9ddc8097612866ecc63a4b to your computer and use it in GitHub Desktop.
| const jsdom = require("jsdom"); | |
| const { JSDOM } = jsdom; | |
| const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>'); | |
| global.window = dom.window; | |
| global.document = dom.window.document; | |
| // Simulate window resize event | |
| const resizeEvent = document.createEvent('Event'); | |
| resizeEvent.initEvent('resize', true, true); | |
| global.window.resizeTo = (width, height) => { | |
| global.window.innerWidth = width || global.window.innerWidth; | |
| global.window.innerHeight = width || global.window.innerHeight; | |
| global.window.dispatchEvent(resizeEvent); | |
| }; |
| const expect = require("chai").expect; | |
| const Nav = require("../source/javascripts/nav"); | |
| const navFixture = require("./fixtures/nav") | |
| const IS_OPEN_CLASS = 'is-open'; | |
| describe("Nav component", function() { | |
| beforeEach(function() { | |
| window.document.body.innerHTML = navFixture; | |
| Nav.init(); | |
| }); | |
| it("closes the menu for screens bigger than 768px", () => { | |
| const nav = document.getElementById("MainNav"); | |
| const toggle = document.getElementById("MainNav-toggle"); | |
| Nav.openMenu(); | |
| window.resizeTo(769, 1000); | |
| expect(nav.classList.contains(IS_OPEN_CLASS)).to.be.false; | |
| expect(toggle.classList.contains(IS_OPEN_CLASS)).to.be.false; | |
| }); | |
| }) |
Probably somebody can help, please. I cannot figure out how to use jsdom-helper. Where should I put it? Should I import it somehow.
I tried to put this code into setupFile and then put it into jest.config.js like this:
jest: {
"setupFiles" : ["/setupFile.js"]
},
But it is still does not work. It does not complain when I do resizeTo, but when I run it it does not change height and width.
Yeah, this doesn't seem to work for me either. From my understanding, JSDom does not draw anything so it doesn't support viewport size changes.
It can be used in a exported function like this( I've changed the function a little, fixed a typo as well):
function resize(width, height) {
const resizeEvent = document.createEvent('Event');
resizeEvent.initEvent('resize', true, true);
global.window.innerWidth = width || global.window.innerWidth;
global.window.innerHeight = height || global.window.innerHeight;
global.window.dispatchEvent(resizeEvent);
}
So I recently made a very tiny window-resizeto testing polyfill to help simplify resize tests, thought I might share here for any readers.
If you're already using Jest:
jest.config.js:
module.exports = {
setupFilesAfterEnv: [
// polyfill window.resizeTo
'window-resizeto/polyfill'
]
}some-test.spec.js:
window.resizeTo(500, 500)
// window is now resize to 500x500Can also use the polyfill standalone as just:
import 'window-resizeto/polyfill'
window.resizeTo(500, 500)
// window is now resized to 500x500Or as a ponyfill:
import { resizeTo } from 'window-resizeto'
resizeTo(window, 500, 500)
// window is now resized to 500x500All these examples are covered in the docs
should this read:
global.window.innerHeight = height || global.window.innerHeight;Thanks for the snippet!