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
This commit is contained in:
Bendik Aagaard Lynghaug
co-authored by
Claude Fable 5
Claude Fable 5
parent
13155a3469
commit
63b56144a5
@@ -0,0 +1,96 @@
|
||||
// Real-browser pass (Playwright Chromium): the zero-build page and the
|
||||
// SSR + hydration page, with console output treated as part of the spec —
|
||||
// no errors, no hydration warnings.
|
||||
//
|
||||
// Run with: npm run test:e2e (needs `npx playwright install chromium-headless-shell`)
|
||||
|
||||
import { test, before, after } from 'node:test'
|
||||
import assert from 'node:assert'
|
||||
import { chromium } from 'playwright'
|
||||
|
||||
import { startServer } from './serve.js'
|
||||
|
||||
let browser, ctx, srv
|
||||
|
||||
before(async () => {
|
||||
srv = await startServer()
|
||||
browser = await chromium.launch()
|
||||
ctx = await browser.newContext()
|
||||
})
|
||||
|
||||
after(async () => {
|
||||
await browser?.close()
|
||||
await srv?.close()
|
||||
})
|
||||
|
||||
// renders are raf-batched, so poll instead of reading synchronously
|
||||
function waitForCount (page, text) {
|
||||
return page.waitForFunction(
|
||||
(t) => document.querySelector('h1')?.textContent === t,
|
||||
text,
|
||||
{ timeout: 5000 }
|
||||
)
|
||||
}
|
||||
|
||||
async function openPage (path) {
|
||||
const page = await ctx.newPage()
|
||||
const console_ = { errors: [], warnings: [] }
|
||||
page.on('console', (msg) => {
|
||||
if (msg.type() === 'error') console_.errors.push(msg.text())
|
||||
if (msg.type() === 'warning') console_.warnings.push(msg.text())
|
||||
})
|
||||
page.on('pageerror', (err) => console_.errors.push(String(err)))
|
||||
await page.goto(srv.origin + path)
|
||||
return { page, console_ }
|
||||
}
|
||||
|
||||
test('zero-build page: import map + native ESM, no bundler', async () => {
|
||||
const { page, console_ } = await openPage('/examples/counter/')
|
||||
|
||||
await waitForCount(page, 'count is 0')
|
||||
|
||||
await page.click('button')
|
||||
await waitForCount(page, 'count is 1')
|
||||
|
||||
await page.click('button')
|
||||
await page.click('button')
|
||||
await waitForCount(page, 'count is 3')
|
||||
|
||||
assert.deepStrictEqual(console_.errors, [], 'no console errors')
|
||||
await page.close()
|
||||
})
|
||||
|
||||
test('SSR page: content before JavaScript, then live after hydration', async () => {
|
||||
// the raw response must already contain the rendered view
|
||||
const res = await fetch(srv.origin + '/ssr')
|
||||
const rawHtml = await res.text()
|
||||
assert.match(rawHtml, /count is 0/, 'server sent rendered markup')
|
||||
|
||||
const { page, console_ } = await openPage('/ssr')
|
||||
await waitForCount(page, 'count is 0')
|
||||
|
||||
// hydrated: the server DOM must now respond to clicks
|
||||
await page.click('button')
|
||||
await waitForCount(page, 'count is 1')
|
||||
|
||||
assert.deepStrictEqual(console_.errors, [], 'no console errors')
|
||||
const mismatches = console_.warnings.filter((w) => w.includes('markup differ'))
|
||||
assert.deepStrictEqual(mismatches, [], 'no hydration mismatch warnings')
|
||||
await page.close()
|
||||
})
|
||||
|
||||
test('SSR page: server DOM is adopted, not replaced', async () => {
|
||||
const { page } = await openPage('/ssr')
|
||||
await waitForCount(page, 'count is 0')
|
||||
|
||||
// Prove adoption by a surviving expando: mark the node, force a real
|
||||
// render, and confirm the same node object still holds the marker.
|
||||
await page.evaluate(() => {
|
||||
document.querySelector('h1').__marker = 'server-node'
|
||||
})
|
||||
await page.click('button')
|
||||
await waitForCount(page, 'count is 1')
|
||||
const marker = await page.evaluate(() => document.querySelector('h1').__marker)
|
||||
assert.strictEqual(marker, 'server-node', 'h1 survived that render in place')
|
||||
await page.close()
|
||||
})
|
||||
@@ -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))
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user