load-frame
v2.0.0
Published
Isomorphic browser testing using JSDOM and iframes.
Downloads
5
Maintainers
dylanpierceyReadme
Utility for isomorphically loading an iframe with a URL. Makes it easy to bundle your tests in the browser while having a fast running CLI test with JSDOM.
It works by creating a regular iframe in the browser and using jsdom to create a fake iframe when running in node.
This is transparent and uses the package.json's browser field to provide the correct api. Simply build your tests with webpack, rollup or browserify and it should run in the browser.
Installation
npm install load-frameExample (Using Mocha)
const assert = require("assert");
const load = require("load-frame");
describe("My-Page", () => {
// Make sure your server is started already.
let frame;
beforeEach(async () => frame = await load.fromURL("http://localhost:8080"));
afterEach(() => frame.close());
it("should load", () => {
const { window, document } = frame;
assert.equal(document.title, "My Page");
assert.ok(typeof window.addEventListener === "function");
})
})API
#fromURL(url: string) => Promise
Loads up an iframe like object from a url.
// Load from a server.
load.fromURL("http://google.com").then(({ window, document }) => {
window; // The global window for the iframe
document; // The document object for the iframe
})
// Load from a file.
const filePath = path.join(__dirname, 'my-page.html')
load.fromURL(`file://${filePath}`).then(({ window, document }) => {
window; // The global window for the iframe
document; // The document object for the iframe
})#fromString(html: string) => Promise
Loads up an iframe like object from a string of html.
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example Title</title>
</head>
<body>
Example Content
</body>
</html>
`
// Load from html string.
load.fromString(html).then(({ window, document }) => {
window; // The global window for the iframe
document; // The document object for the iframe
})Contributions
- Use
npm testto build and run tests.
Please feel free to create a PR!