Playwright tests

Author: johansatge

.github/workflows/test.yml

@@ -0,0 +1,29 @@
+name: test
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+    strategy:
+      matrix:
+        node-version: [18.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
+      - name: Run Playwright tests
+        run: npm run test-playwright

.gitignore

@@ -1 +1,2 @@
-dist
+dist
+tests/results

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,13 @@
+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: 'tests/results',
+  globalSetup: 'playwright.globalsetup.js',
+})

playwright.config.js

@@ -0,0 +1,13 @@
+const httpdir = require('httpdir')
+
+module.exports = () => {
+  return new Promise((resolve, reject) => {
+    const server = httpdir.createServer({
+      basePath: 'dist',
+      httpPort: 9698,
+    })
+    server.onStart(resolve)
+    server.onError(reject)
+    server.start()
+  })
+}

playwright.globalsetup.js

@@ -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: {

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;

src/ui.css

@@ -159,18 +159,25 @@ function App({ defaultImports }) {
           Feel free to fine-tune the imports you need to get a fully customized version of Preact though!
         </div>
       `}
-      <button class="check-button" onClick=${onCheckAllImports}>Check all</button>
-      <button class="check-button" onClick=${onCheckNoImports}>Check none</button>
+      <button class="check-button" onClick=${onCheckAllImports} disabled=${isLoadingBundle}>
+        Check all
+      </button>
+      <button class="check-button" onClick=${onCheckNoImports} disabled=${isLoadingBundle} data-testid="checkNone">
+        Check none
+      </button>
       <div class="columns">
         ${Object.keys(window.preactEcosystem.imports).map((pkg) => html`
           <div class="column" key=${pkg}>
             <h3 class="column-title">
               ${pkg}
-              <span class="version">${window.preactEcosystem.versions[pkg]}</span>
+              <span class="version" data-testid=${`${pkg}Version`}>
+                ${window.preactEcosystem.versions[pkg]}
+              </span>
             </h3>
             <${ImportsList}
               pkg="${pkg}" imports=${window.preactEcosystem.imports[pkg]}
               selectedImports=${selectedImports} onImportChange=${onImportChange}
+              isLoadingBundle=${isLoadingBundle}
             />
           </div>
         `)}
@@ -187,6 +194,7 @@ function App({ defaultImports }) {
             type="radio" name="format" value="esm"
             onChange=${onFormatChange}
             checked=${format === 'esm'}
+            disabled=${isLoadingBundle}
           />
           ESM
         </label>
@@ -195,6 +203,7 @@ function App({ defaultImports }) {
             type="radio" name="format" value="iife"
             onChange=${onFormatChange}
             checked=${format === 'iife'}
+            disabled=${isLoadingBundle}
           />
           IIFE
         </label>
@@ -209,7 +218,9 @@ function App({ defaultImports }) {
         <button class="action ${hasCopied ? 'copied' : ''}" onClick=${onCopyToClipboard} disabled=${!bundle.filename}>
           Copy to clipboard
         </button>
-        <button class="action" onClick=${onDownload} disabled=${!bundle.filename}>Download file</button>
+        <button class="action" onClick=${onDownload} disabled=${!bundle.filename} data-testid="downloadBundle">
+          Download file
+        </button>
         <span class="size">
           Size: ${bundle.sizeKb || 0}Kb (${bundle.sizeGzippedKb || 0}Kb gzipped)
         </span>
@@ -221,6 +232,7 @@ function App({ defaultImports }) {
         <code
           class="code"
           dangerouslySetInnerHTML=${{__html: highlightedBundleUsage}}
+          data-testid="htmlExample"
         ></code>
       </pre>
     </section>
@@ -230,13 +242,13 @@ function App({ defaultImports }) {
   `
 }
 
-function ImportsList({ pkg, imports, selectedImports, onImportChange }) {
+function ImportsList({ pkg, imports, selectedImports, onImportChange, isLoadingBundle }) {
   return imports.map((imp) => html`
     <label class="input-label" key=${pkg + imp}>
       <input
         type="checkbox" autocomplete="off"
         data-pkg=${pkg} data-imp=${imp}
-        disabled=${mandatoryImports[pkg] && mandatoryImports[pkg].includes(imp)}
+        disabled=${isLoadingBundle || (mandatoryImports[pkg] && mandatoryImports[pkg].includes(imp))}
         checked=${typeof selectedImports[pkg] === 'object' && selectedImports[pkg].includes(imp)}
         value="1"
         onChange=${onImportChange}

src/ui.js

@@ -0,0 +1,46 @@
+const { test, expect } = require('@playwright/test')
+const path = require('node:path')
+const fsp = require('node:fs').promises
+
+async function downloadPreactBundle({ page }) {
+  const downloadPromise = page.waitForEvent('download')
+  await page.getByTestId('downloadBundle').click()
+  const download = await downloadPromise
+  const downloadName = download.suggestedFilename()
+  const downloadPath = path.join(__dirname, '../dist', downloadName)
+  await download.saveAs(downloadPath)
+  return {
+    preactBundleFilename: downloadName,
+    preactBundle: await fsp.readFile(downloadPath, 'utf8')
+  }
+}
+
+async function downloadHtmlExample({ page, preactBundleFilename }) {
+  const htmlExample = await page.getByTestId('htmlExample').innerText()
+  const htmlFilename = preactBundleFilename.replace('.js', '.html')
+  await fsp.writeFile(path.join(__dirname, '../dist', htmlFilename), htmlExample)
+  return htmlFilename
+}
+
+test('Generate a minimal Preact bundle', async({ page }) => {
+  await page.goto('index.html')
+  // Check the less possible dependencies
+  await page.getByTestId('checkNone').click()
+  // Download & test Preact bundle contents
+  const { preactBundleFilename, preactBundle } = await downloadPreactBundle({ page })
+  const preactVersion = await page.getByTestId('preactVersion').innerText()
+  expect(preactBundle).toContain(`// preact@${preactVersion}`)
+  expect(preactBundle).not.toContain('// preact/hooks')
+  expect(preactBundle).not.toContain('// @preact/signals')
+  expect(preactBundle).not.toContain('// htm')
+  // Download & test HTML example
+  const htmlExampleFilemane = await downloadHtmlExample({ page, preactBundleFilename })
+  await page.goto(htmlExampleFilemane)
+  await expect(page.getByText('Hello World!')).toBeVisible()
+})
+
+// @todo more tests
+// - with htm
+// - with htm & hooks
+// - with htm & signals
+// - with IIFE & ESM