2.0.0 • Published 6 years ago

load-frame v2.0.0

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

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-frame

Example (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 test to build and run tests.

Please feel free to create a PR!