60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
|
// 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')
|
||
|
|
})
|