test+docs: full-app browser integration test and the isomorphic counter example

The integration test runs the counter through the real browser path in happy-dom: start(), store events, raf-batched morph, DOM click handlers, emit coalescing. examples/counter is the Phase 2 exit criterion: one app module mounted zero-build in a browser via import map and string-rendered by node examples/counter/render.js. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd
2026-09-08 16:56:54 +02:00
parent c696e00d4f
commit 870aa79668
5 changed files with 152 additions and 5 deletions
@@ -0,0 +1,59 @@
+// End-to-end in happy-dom: the counter app running the real browser path —
+// start(), store, emit, nanoraf-batched re-render, nanomorph in place.
+
+import { test, before } from 'node:test'
+import assert from 'node:assert'
+import { Window } from 'happy-dom'
+
+let choo, html
+
+before(async () => {
+  const win = new Window({ url: 'http://localhost/' })
+  globalThis.window = win
+  globalThis.document = win.document
+  globalThis.requestAnimationFrame = win.requestAnimationFrame.bind(win)
+  ;({ default: choo } = await import('@choojs/core'))
+  ;({ default: html } = await import('@choojs/html/browser'))
+})
+
+const tick = (ms = 30) => new Promise((resolve) => setTimeout(resolve, ms))
+
+test('a full app renders, emits, and morphs in the browser', async () => {
+  const app = choo()
+
+  app.use((state, emitter) => {
+    state.count = 0
+    emitter.on('increment', (n) => {
+      state.count += n
+      emitter.emit('render')
+    })
+  })
+
+  app.route('/', (state, emit) => {
+    return html`
+      <body>
+        <h1>count is ${state.count}</h1>
+        <button onclick=${() => emit('increment', 1)}>Increment</button>
+      </body>
+    `
+  })
+
+  const tree = app.start()
+  assert.strictEqual(tree.querySelector('h1').textContent, 'count is 0')
+
+  // state event → render event → raf-batched morph of the same tree
+  app.emit('increment', 1)
+  await tick()
+  assert.strictEqual(tree.querySelector('h1').textContent, 'count is 1', 'emit re-rendered in place')
+
+  // and through an actual DOM click on the interpolated handler
+  tree.querySelector('button').click()
+  await tick()
+  assert.strictEqual(tree.querySelector('h1').textContent, 'count is 2', 'click handler emitted')
+
+  // raf batching: two synchronous emits, one render
+  app.emit('increment', 1)
+  app.emit('increment', 1)
+  await tick()
+  assert.strictEqual(tree.querySelector('h1').textContent, 'count is 4', 'batched emits coalesced')
+})