feat(openApp): Allow the ability to provide virtual files.

BREAKING CHANGE: openApp() now takes an object as argument
vinsonchuong · Mar 3, 2023 · f95eb1a · f95eb1a
1 parent e88a86c
commit f95eb1a
Show file tree

Hide file tree

Showing 7 changed files with 299 additions and 194 deletions.
diff --git a/README.md b/README.md
@@ -5,41 +5,54 @@
 [![devDependencies Status](https://david-dm.org/vinsonchuong/puppet-strings-open-app/dev-status.svg)](https://david-dm.org/vinsonchuong/puppet-strings-open-app?type=dev)
 
 An extension to [puppet-strings](https://github.com/vinsonchuong/puppet-strings)
-for compiling and opening a web application in Chrome
+for compiling and opening a web UI in Chrome.
 
 ## Example
+To test a React component in isolation within Chrome:
 
-### `app/index.html`
-```html
-<!doctype html>
-<meta charset="utf-8">
-<script async src="index.js"></script>
-<div id="root"></div>
-```
-
-### `app/index.js`
-```js
-import React from 'react'
-import { render } from 'react-dom'
+### `ui/component.js`
+```javascript
+import { html } from 'htm/react'
 
-render(<div>Hello World!</div>, window.root)
+export default function Component() {
+  return html`
+    <div>Hello World!</div>
+  `
+}
 ```
 
-### `test.js`
-```js
+### `ui/component.test.js`
+```javascript
+import test from 'ava'
 import { closeTab, findElement } from 'puppet-strings'
 import openApp from 'puppet-strings-open-app'
 
-async function run() {
-  const app = await openApp('app/index.html')
-  const root = await findElement(app, '#root')
+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'
 
-  console.log(root.innerText)
-
-  await closeTab(app)
-}
+        const root = createRoot(document.body.firstElementChild)
+        root.render(html\`<\${Component} />\`)
+      `
+    }
+  })
+  t.teardown(async () => {
+    await closeTab(app)
+  })
 
-run()
+  const root = await findElement(app, 'div')
+  t.is(root.innerText, 'Hello World!')
+})
 ```
 
 

diff --git a/fixtures/index.html b/fixtures/index.html
diff --git a/fixtures/index.js b/fixtures/index.js
diff --git a/index.js b/index.js
@@ -6,13 +6,14 @@ import serveUi from 'passing-notes-ui'
 
 export const logger = new Logger()
 
-export default async function openApp(appPath) {
+export default async function openApp({path, files}) {
   const port = await getPort()
   const server = await startServer(
     {port},
     compose(
       serveUi({
-        path: appPath,
+        path,
+        files,
         logger,
       }),
       () => () => ({status: 404}),

diff --git a/index.test.js b/index.test.js
@@ -1,14 +1,44 @@
 import test from 'ava'
+import {useTemporaryDirectory} from 'ava-patterns'
 import {closeTab, findElement} from 'puppet-strings'
 import openApp, {logger} from './index.js'
 
 test('compiling and opening a web application', async (t) => {
+  const directory = await useTemporaryDirectory(t)
+  await directory.writeFile(
+    'component.js',
+    `
+    import { html } from 'htm/react'
+
+    export default function() {
+      return html\`<span>Hello World!</span>\`
+    }
+  `,
+  )
+
   logger.on('log', (_, message) => t.log(message))
+  const app = await openApp({
+    path: directory.path,
+    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.js'
 
-  const app = await openApp('./fixtures')
-  const root = await findElement(app, '#root')
+        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.textContent, 'Hello World!')
-
-  await closeTab(app)
 })
diff --git a/package.json b/package.json
@@ -21,16 +21,17 @@
   "dependencies": {
     "get-port": "^6.1.2",
     "passing-notes": "^6.5.7",
-    "passing-notes-ui": "^1.1.5",
+    "passing-notes-ui": "^1.2.0",
     "puppet-strings": "^4.1.3",
     "puppet-strings-chrome": "^2.0.3"
   },
   "devDependencies": {
     "ava": "^5.2.0",
+    "ava-patterns": "^3.2.0",
     "htm": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "semantic-release": "^20.1.0",
+    "semantic-release": "^20.1.1",
     "xo": "^0.53.1"
   },
   "ava": {