Playwright tests

Author: johansatge

.github/workflows/test.yml

@@ -0,0 +1,35 @@
+name: test
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    # Container to avoid slowly installing playwright deps each time
+    # https://playwright.dev/docs/ci#via-containers
+    container:
+      image: mcr.microsoft.com/playwright:v1.50.1-noble
+      options: --user 1001
+    strategy:
+      matrix:
+        node-version: [22.x]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Cache node_modules
+        id: cache-node-modules
+        uses: actions/cache@v3
+        with:
+          key: ${{ runner.os }}-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}
+          path: node_modules
+      - name: Install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: npm ci
+      #- name: Install Playwright browsers
+      #  run: npx playwright install --with-deps
+        timeout-minutes: 2
+      - name: Run Playwright tests
+        run: npm run test-playwright

.gitignore

@@ -1 +1 @@
-dist
+dist

build.js

@@ -1,14 +1,14 @@
 const esbuild = require('esbuild')
-const fs = require('fs')
-const fsp = require('fs').promises
-const path = require('path')
+const fs = require('node:fs')
+const fsp = require('node:fs').promises
+const path = require('node:path')
+const httpdir = require('httpdir')
 
 const srcPath = path.join(__dirname, 'src')
 const distPath = path.join(__dirname, 'dist')
 
 build()
 if (process.argv.includes('--watch')) {
-  const httpdir = require('/usr/local/lib/node_modules/httpdir')
   const server = httpdir.createServer({ basePath: distPath, httpPort: 9697 })
   server.onStart(({ urls }) => {
     console.log(urls.join('\n'))

package-lock.json

@@ -5,7 +5,8 @@
   "author": "Johan Satgé",
   "private": true,
   "scripts": {
-    "build": "node build.js"
+    "build": "node build.js",
+    "test-playwright": "npm run build && playwright test"
   },
   "repository": {
     "type": "git",
@@ -25,5 +26,9 @@
     "htm": "^3.1.1",
     "preact": "^10.23.1",
     "prismjs": "^1.29.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "httpdir": "^2.1.0"
   }
 }

package.json

@@ -0,0 +1,19 @@
+const { defineConfig } = require('@playwright/test')
+const httpdir = require('httpdir')
+
+export default defineConfig({
+  use: {
+    baseURL: 'http://localhost:9698',
+    headless: true,
+    acceptDownloads: true,
+  },
+  testMatch: 'tests/*.spec.js',
+  outputDir: 'dist/tests-results',
+  webServer: {
+    command: 'node_modules/.bin/httpdir dist 9698',
+    url: 'http://localhost:9698',
+    reuseExistingServer: true,
+    stdout: 'ignore',
+    stderr: 'pipe',
+  },
+})

playwright.config.js

@@ -1,5 +1,7 @@
 # Standalone Preact Builder ⚛️
 
+[![Test](https://github.com/johansatge/standalone-preact-builder/actions/workflows/test.yml/badge.svg)](https://github.com/johansatge/standalone-preact-builder/actions)
+
 > Build custom, self-contained & self-hosted Preact script in the browser
 
 ---

readme.md

@@ -31,7 +31,6 @@ function wasmJsResolver() {
 // Function sends back the code, sample usage code and stats
 export async function buildBundle(requestedImports, format) {
   const { bundleSource, bundleComments, usage } = getBundleSource(requestedImports, format)
-  console.log('BUNDLE SOURCE', bundleSource)
   await esbuildInitPromise
   const params = {
     stdin: {
@@ -139,7 +138,8 @@ function getAppUsageWithHtm(withSignals, withUseState,) {
       '        const value = count.value',
       '        return html`',
       '          <h1>Hello ${props.name}!</h1>',
-      '          <button onclick=${() => count.value += 1}>Increment (count: ${value})</button>',
+      '          <p>Count: ${count.value}</p>',
+      '          <button onclick=${() => count.value += 1}>Increment</button>',
       '        `',
       '      }',
       '',
@@ -153,7 +153,8 @@ function getAppUsageWithHtm(withSignals, withUseState,) {
       '        const [value, setValue] = useState(0)',
       '        return html`',
       '          <h1>Hello ${props.name}!</h1>',
-      '          <button onclick=${() => setValue(value + 1)}>Increment (count: ${value})</button>',
+      '          <p>Count: ${value}</p>',
+      '          <button onclick=${() => setValue(value + 1)}>Increment</button>',
       '        `',
       '      }',
       '',
@@ -162,21 +163,46 @@ function getAppUsageWithHtm(withSignals, withUseState,) {
   }
   return [
     '',
-    '      function App(props) {',
-    '        return html`<h1>Hello ${props.name}!</h1>`',
+    '      class App extends Component {',
+    '        constructor(props) {',
+    '          super(props)',
+    '          this.state = { count: 0 }',
+    '        }',
+    '        incrementCount = () => {',
+    '          this.setState((prevState) => ({ count: prevState.count + 1 }))',
+    '        }',
+    '        render() {',
+    '          return html`',
+    '            <h1>Hello ${this.props.name}!</h1>',
+    '            <p>Count: ${this.state.count}</p>',
+    '            <button onclick=${this.incrementCount}>Increment</button>',
+    '          `',
+    '        }',
     '      }',
-    '',
-    '      render(html`<${App} name="World" />`, document.querySelector(\'#root\'))', 
+    '      render(h(App, { name: \'World\' }), document.querySelector(\'#root\'))',
   ]
-
 }
 
 function getAppUsageWithoutHtm() {
   return [
-    '      function App(props) {',
-    '        return h(\'h1\', null, `Hello ${props.name}!`)',
+    '',
+    '      class App extends Component {',
+    '        constructor(props) {',
+    '          super(props)',
+    '          this.state = { count: 0 }',
+    '        }',
+    '        incrementCount = () => {',
+    '          this.setState((prevState) => ({ count: prevState.count + 1 }))',
+    '        }',
+    '        render() {',
+    '          return h(\'div\', null, [',
+    '            h(\'h1\', null, [`Hello ${this.props.name}!`]),',
+    '            h(\'p\', null, [`Count: ${this.state.count}`]),',
+    '            h(\'button\', { onClick: this.incrementCount }, [\'Increment\']),',
+    '          ])',
+    '        }',
     '      }',
-    '      render(App({ name: \'World\' }), document.querySelector(\'#root\'))',
+    '      render(h(App, { name: \'World\' }), document.querySelector(\'#root\'))',
   ]
 }
 

src/bundler.js

@@ -172,6 +172,11 @@ body {
   border-radius: 4px;
 }
 
+.check-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .columns {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -278,6 +283,11 @@ input[type="radio"]:checked::after {
   border-radius: 50%;
 }
 
+input[type="radio"]:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .loader {
   position: absolute;
   box-sizing: border-box;