test(e2e): real-browser pass in Playwright Chromium

Three end-to-end scenarios against a static+SSR test server: the zero-build page (import map + native ESM, no bundler), the SSR page (rendered content in the raw response, live after hydration, no mismatch warnings), and adoption (an expando on the server-rendered node survives a real render). Renders are raf-batched so assertions poll. Real Chromium flushed out three fixes happy-dom couldn't see: - nanoraf called an extracted requestAnimationFrame bare — Illegal invocation under strict-mode ESM (sloppy CJS had masked it); wrapped. - the counter example only routed '/', so serving it from any subpath threw; it now has a wildcard fallback. - hydration mismatch detection is now whitespace-insensitive (the parser reparents whitespace, e.g. text after </body>), and page scripts belong in <head> when a view owns <body> — same convention bankai v9 used. CI gets an e2e job with chromium-headless-shell. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd
2026-09-08 17:57:27 +02:00
parent 13155a3469
commit 63b56144a5
8 changed files with 230 additions and 7 deletions
@@ -0,0 +1,91 @@
+// Test server for e2e runs: static files from the repo root plus /ssr,
+// which server-renders the counter app and serves a hydration page — the
+// same app module the import map hands to the browser.
+
+import { createServer } from 'node:http'
+import { readFile } from 'node:fs/promises'
+import { join, normalize, extname, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import createApp from '../../examples/counter/app.js'
+
+const root = normalize(join(dirname(fileURLToPath(import.meta.url)), '..', '..'))
+
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8'
+}
+
+const IMPORT_MAP = JSON.stringify({
+  imports: {
+    '@choojs/core': '/packages/core/index.js',
+    '@choojs/core/timing': '/packages/core/lib/timing.js',
+    '@choojs/html': '/packages/html/browser.js',
+    '@choojs/html/raw': '/packages/html/raw.js',
+    '@choojs/html/morph': '/packages/html/morph.js',
+    '@choojs/html/hydrate': '/packages/html/hydrate.js'
+  }
+})
+
+function ssrPage () {
+  const body = createApp().toString('/')
+  // When a view owns <body>, scripts belong in <head>: type="module" is
+  // deferred by definition, and body must contain only what the view
+  // renders or hydration would (rightly) flag the extra nodes.
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>choo v8 ssr counter</title>
+<script type="importmap">${IMPORT_MAP}</script>
+<script type="module">
+import createApp from '/examples/counter/app.js'
+createApp().mount('body')
+</script>
+</head>
+${body}
+</html>`
+}
+
+export function startServer () {
+  const server = createServer(async (req, res) => {
+    const url = new URL(req.url, 'http://localhost')
+
+    if (url.pathname === '/ssr') {
+      res.writeHead(200, { 'content-type': 'text/html; charset=utf-8' })
+      res.end(ssrPage())
+      return
+    }
+
+    let pathname = decodeURIComponent(url.pathname)
+    if (pathname.endsWith('/')) pathname += 'index.html'
+    const file = normalize(join(root, pathname))
+    if (!file.startsWith(root)) {
+      res.writeHead(403).end()
+      return
+    }
+
+    try {
+      const data = await readFile(file)
+      res.writeHead(200, {
+        'content-type': MIME[extname(file)] || 'application/octet-stream'
+      })
+      res.end(data)
+    } catch (e) {
+      res.writeHead(404).end('not found: ' + pathname)
+    }
+  })
+
+  return new Promise((resolve) => {
+    server.listen(0, '127.0.0.1', () => {
+      resolve({
+        server,
+        origin: `http://127.0.0.1:${server.address().port}`,
+        close: () => new Promise((r) => server.close(r))
+      })
+    })
+  })
+}