❤
npm
Sign UpSign In

load-frame
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published


Load-Frame
API Stability TypeScript Styled with prettier Build status Test Coverage NPM Version Downloads

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!

Readme

Keywords

Package Sidebar

Install

npm i load-frame

Repository

github.com/DylanPiercey/load-frame

Homepage

github.com/DylanPiercey/load-frame

Weekly Downloads

2

Version

2.0.0

License

MIT

Last publish

Collaborators

  • dylanpiercey
Try on RunKit
Report malware