Puppet-strings-open-app NPM

puppet-strings-open-app

npm

An extension to puppet-strings for compiling and opening a web UI in Chrome.

Example

To test a React component in isolation within Chrome:

`ui/component.js`

import { html } from 'htm/react'

export default function Component() {
  return html`
    <div>Hello World!</div>
  `
}

`ui/component.test.js`

import test from 'ava'
import { closeTab, findElement } from 'puppet-strings'
import openApp from 'puppet-strings-open-app'

test('rendering in a browser', async (t) => {
  const app = await openApp({
    path: './app',
    files: {
      'index.html': `
        <!doctype html>
        <script type="module" src="/index.js"></script>
        <div></div>
      `,
      'index.js': `
        import { createRoot } from 'react-dom/client'
        import { html } from 'htm/react'
        import Component from './component'

        const root = createRoot(document.body.firstElementChild)
        root.render(html\`<\${Component} />\`)
      `
    }
  })
  t.teardown(async () => {
    await closeTab(app)
  })

  const root = await findElement(app, 'div')
  t.is(root.innerText, 'Hello World!')
})