coop/rose-ash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add sx:ready hydration signal, eliminate test sleeps

Browse Source 
boot-init now sets data-sx-ready on <html> and dispatches an sx:ready
CustomEvent after all islands are hydrated. Playwright tests use this
instead of networkidle + hard-coded sleeps (50+ seconds eliminated).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-30 12:47:52 +00:00
parent fffb5ab0b5
commit e14947cedc
12 changed files with 131 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
shared/static/wasm/sx/boot.sx
View File

@@ -431,4 +431,10 @@
(sx-hydrate-islands nil) (sx-hydrate-islands nil)
(run-post-render-hooks) (run-post-render-hooks)
(process-elements nil) (process-elements nil)
(dom-listen (dom-window) "popstate" (fn (e) (handle-popstate 0)))))) (dom-listen (dom-window) "popstate" (fn (e) (handle-popstate 0)))
(dom-set-attr
(host-get (dom-document) "documentElement")
"data-sx-ready"
"true")
(dom-dispatch (dom-document) "sx:ready" nil)
(log-info "sx:ready"))))

2
shared/static/wasm/sx/boot.sxbc.json
View File

File diff suppressed because one or more lines are too long

9
sx/tests/test_demos.py
View File

@@ -36,13 +36,10 @@ def nav(page: Page, path: str):
js_errors: list[str] = [] js_errors: list[str] = []
page.on("pageerror", lambda err: js_errors.append(str(err))) page.on("pageerror", lambda err: js_errors.append(str(err)))
page.goto(f"{BASE}/sx/{path}", wait_until="networkidle") page.goto(f"{BASE}/sx/{path}", wait_until="domcontentloaded")
# Poll briefly for JS errors — pageerror fires async during networkidle # Wait for SX runtime hydration to complete
for _ in range(10): page.wait_for_selector("html[data-sx-ready]", timeout=15000)
if js_errors:
break
page.wait_for_timeout(100)
# Fail fast on JS errors — don't wait for content that will never appear # Fail fast on JS errors — don't wait for content that will never appear
if js_errors: if js_errors:

52
tests/playwright/demo-interactions.spec.js
View File

@@ -1,16 +1,9 @@
// @ts-check // @ts-check
/** /**
* Demo interaction tests — verify every demo actually functions. * Demo interaction tests — verify every demo actually functions.
* Each test is isolated (fresh page.goto) for reliability.
* Server cache keeps page loads fast.
*/ */
const { test, expect } = require('playwright/test'); const { test, expect } = require('playwright/test');
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013'; const { loadPage } = require('./helpers');
async function loadDemo(page, path) {
await page.goto(BASE_URL + '/sx/' + path, { waitUntil: 'networkidle', timeout: 15000 });
await page.waitForTimeout(500);
}
function island(page, pattern) { function island(page, pattern) {
return page.locator(`[data-sx-island*="${pattern}"]`); return page.locator(`[data-sx-island*="${pattern}"]`);
@@ -32,7 +25,7 @@ async function assertNoClassLeak(page, scope) {
test.describe('Reactive island interactions', () => { test.describe('Reactive island interactions', () => {
test('counter: + and − change count and doubled', async ({ page }) => { test('counter: + and − change count and doubled', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.counter)))'); await loadPage(page, '(geography.(reactive.(examples.counter)))');
const el = island(page, 'counter'); const el = island(page, 'counter');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const buttons = el.locator('button'); const buttons = el.locator('button');
@@ -52,7 +45,7 @@ test.describe('Reactive island interactions', () => {
}); });
test('temperature: +/− change celsius and fahrenheit', async ({ page }) => { test('temperature: +/− change celsius and fahrenheit', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.temperature)))'); await loadPage(page, '(geography.(reactive.(examples.temperature)))');
const el = island(page, 'temperature'); const el = island(page, 'temperature');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const buttons = el.locator('button'); const buttons = el.locator('button');
@@ -65,7 +58,7 @@ test.describe('Reactive island interactions', () => {
}); });
test('stopwatch: start shows elapsed time', async ({ page }) => { test('stopwatch: start shows elapsed time', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.stopwatch)))'); await loadPage(page, '(geography.(reactive.(examples.stopwatch)))');
const el = island(page, 'stopwatch'); const el = island(page, 'stopwatch');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const textBefore = await el.textContent(); const textBefore = await el.textContent();
@@ -75,7 +68,7 @@ test.describe('Reactive island interactions', () => {
}); });
test('input-binding: typing updates live preview', async ({ page }) => { test('input-binding: typing updates live preview', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.input-binding)))'); await loadPage(page, '(geography.(reactive.(examples.input-binding)))');
const el = island(page, 'input-binding'); const el = island(page, 'input-binding');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
await el.locator('input').first().fill('playwright test'); await el.locator('input').first().fill('playwright test');
@@ -84,7 +77,7 @@ test.describe('Reactive island interactions', () => {
}); });
test('dynamic-class: toggle changes element styling', async ({ page }) => { test('dynamic-class: toggle changes element styling', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.dynamic-class)))'); await loadPage(page, '(geography.(reactive.(examples.dynamic-class)))');
const el = island(page, 'dynamic-class'); const el = island(page, 'dynamic-class');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const htmlBefore = await el.innerHTML(); const htmlBefore = await el.innerHTML();
@@ -94,7 +87,7 @@ test.describe('Reactive island interactions', () => {
}); });
test('reactive-list: add button increases items', async ({ page }) => { test('reactive-list: add button increases items', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.reactive-list)))'); await loadPage(page, '(geography.(reactive.(examples.reactive-list)))');
const el = island(page, 'reactive-list'); const el = island(page, 'reactive-list');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const textBefore = await el.textContent(); const textBefore = await el.textContent();
@@ -104,7 +97,7 @@ test.describe('Reactive island interactions', () => {
}); });
test('stores: writer and reader share state', async ({ page }) => { test('stores: writer and reader share state', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.stores)))'); await loadPage(page, '(geography.(reactive.(examples.stores)))');
const writer = island(page, 'store-writer'); const writer = island(page, 'store-writer');
const reader = island(page, 'store-reader'); const reader = island(page, 'store-reader');
await expect(writer).toBeVisible({ timeout: 10000 }); await expect(writer).toBeVisible({ timeout: 10000 });
@@ -114,7 +107,7 @@ test.describe('Reactive island interactions', () => {
}); });
test('refs: focus button focuses input', async ({ page }) => { test('refs: focus button focuses input', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.refs)))'); await loadPage(page, '(geography.(reactive.(examples.refs)))');
const el = island(page, 'refs'); const el = island(page, 'refs');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const textBefore = await el.textContent(); const textBefore = await el.textContent();
@@ -126,7 +119,7 @@ test.describe('Reactive island interactions', () => {
}); });
test('portal: button toggles portal content', async ({ page }) => { test('portal: button toggles portal content', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.portal)))'); await loadPage(page, '(geography.(reactive.(examples.portal)))');
const el = island(page, 'portal'); const el = island(page, 'portal');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const before = await page.locator('#portal-root').innerHTML(); const before = await page.locator('#portal-root').innerHTML();
@@ -136,7 +129,7 @@ test.describe('Reactive island interactions', () => {
}); });
test('imperative: button triggers DOM manipulation', async ({ page }) => { test('imperative: button triggers DOM manipulation', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.imperative)))'); await loadPage(page, '(geography.(reactive.(examples.imperative)))');
const el = island(page, 'imperative'); const el = island(page, 'imperative');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const textBefore = await el.textContent(); const textBefore = await el.textContent();
@@ -146,7 +139,7 @@ test.describe('Reactive island interactions', () => {
}); });
test('error-boundary: trigger shows boundary message', async ({ page }) => { test('error-boundary: trigger shows boundary message', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.error-boundary)))'); await loadPage(page, '(geography.(reactive.(examples.error-boundary)))');
const el = island(page, 'error-boundary'); const el = island(page, 'error-boundary');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const btn = el.locator('button').filter({ hasText: /error|trigger|throw/i }).first(); const btn = el.locator('button').filter({ hasText: /error|trigger|throw/i }).first();
@@ -158,7 +151,7 @@ test.describe('Reactive island interactions', () => {
}); });
test('event-bridge: sender triggers receiver', async ({ page }) => { test('event-bridge: sender triggers receiver', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.event-bridge-demo)))'); await loadPage(page, '(geography.(reactive.(examples.event-bridge-demo)))');
const el = island(page, 'event-bridge'); const el = island(page, 'event-bridge');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const textBefore = await el.textContent(); const textBefore = await el.textContent();
@@ -168,11 +161,10 @@ test.describe('Reactive island interactions', () => {
}); });
test('resource: shows loading then resolved data', async ({ page }) => { test('resource: shows loading then resolved data', async ({ page }) => {
await loadDemo(page, '(geography.(reactive.(examples.resource)))'); await loadPage(page, '(geography.(reactive.(examples.resource)))');
const el = island(page, 'resource'); const el = island(page, 'resource');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
await page.waitForTimeout(2000); await expect(el).toContainText('Ada', { timeout: 5000 });
expect(await el.textContent()).toContain('Ada');
}); });
}); });
@@ -184,7 +176,7 @@ test.describe('Reactive island interactions', () => {
test.describe('Marshes interactions', () => { test.describe('Marshes interactions', () => {
test('hypermedia-feeds: reactive +/− works', async ({ page }) => { test('hypermedia-feeds: reactive +/− works', async ({ page }) => {
await loadDemo(page, '(geography.(marshes.hypermedia-feeds))'); await loadPage(page, '(geography.(marshes.hypermedia-feeds))');
const el = island(page, 'marsh-product'); const el = island(page, 'marsh-product');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const plusBtn = el.locator('button:has-text("+")').first(); const plusBtn = el.locator('button:has-text("+")').first();
@@ -198,7 +190,7 @@ test.describe('Marshes interactions', () => {
}); });
test('on-settle: settle evaluates after swap', async ({ page }) => { test('on-settle: settle evaluates after swap', async ({ page }) => {
await loadDemo(page, '(geography.(marshes.on-settle))'); await loadPage(page, '(geography.(marshes.on-settle))');
const el = island(page, 'marsh-settle'); const el = island(page, 'marsh-settle');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const btn = el.locator('button').first(); const btn = el.locator('button').first();
@@ -212,7 +204,7 @@ test.describe('Marshes interactions', () => {
}); });
test('server-signals: server writes to client signal', async ({ page }) => { test('server-signals: server writes to client signal', async ({ page }) => {
await loadDemo(page, '(geography.(marshes.server-signals))'); await loadPage(page, '(geography.(marshes.server-signals))');
const writer = island(page, 'marsh-store-writer'); const writer = island(page, 'marsh-store-writer');
const reader = island(page, 'marsh-store-reader'); const reader = island(page, 'marsh-store-reader');
await expect(writer).toBeVisible({ timeout: 10000 }); await expect(writer).toBeVisible({ timeout: 10000 });
@@ -220,7 +212,7 @@ test.describe('Marshes interactions', () => {
}); });
test('view-transform: view toggle changes rendering', async ({ page }) => { test('view-transform: view toggle changes rendering', async ({ page }) => {
await loadDemo(page, '(geography.(marshes.view-transform))'); await loadPage(page, '(geography.(marshes.view-transform))');
const el = island(page, 'marsh-view-transform'); const el = island(page, 'marsh-view-transform');
await expect(el).toBeVisible({ timeout: 10000 }); await expect(el).toBeVisible({ timeout: 10000 });
const viewBtns = el.locator('button'); const viewBtns = el.locator('button');
@@ -246,8 +238,7 @@ test.describe('Server health', () => {
const demos = ['counter', 'temperature', 'stopwatch', 'input-binding', const demos = ['counter', 'temperature', 'stopwatch', 'input-binding',
'dynamic-class', 'reactive-list', 'stores', 'resource']; 'dynamic-class', 'reactive-list', 'stores', 'resource'];
for (const demo of demos) { for (const demo of demos) {
await page.goto(BASE_URL + `/sx/(geography.(reactive.(examples.${demo})))`, { waitUntil: 'networkidle', timeout: 15000 }); await loadPage(page, `(geography.(reactive.(examples.${demo})))`);
await page.waitForTimeout(500);
} }
const real = errors.filter(e => !e.includes('net::ERR') && !e.includes('fetch')); const real = errors.filter(e => !e.includes('net::ERR') && !e.includes('fetch'));
expect(real).toEqual([]); expect(real).toEqual([]);
@@ -259,8 +250,7 @@ test.describe('Server health', () => {
const pages = ['hypermedia-feeds', 'on-settle', 'server-signals', const pages = ['hypermedia-feeds', 'on-settle', 'server-signals',
'signal-triggers', 'view-transform']; 'signal-triggers', 'view-transform'];
for (const p of pages) { for (const p of pages) {
await page.goto(BASE_URL + `/sx/(geography.(marshes.${p}))`, { waitUntil: 'networkidle', timeout: 15000 }); await loadPage(page, `(geography.(marshes.${p}))`);
await page.waitForTimeout(500);
} }
const real = errors.filter(e => !e.includes('net::ERR') && !e.includes('fetch')); const real = errors.filter(e => !e.includes('net::ERR') && !e.includes('fetch'));
expect(real).toEqual([]); expect(real).toEqual([]);

17
tests/playwright/geography-demos.spec.js
View File

@@ -1,23 +1,13 @@
// @ts-check // @ts-check
/** /**
* Geography demos — comprehensive page load + interaction tests. * Geography demos — comprehensive page load + interaction tests.
* Each test does a fresh page.goto() for isolation, but cached server
* responses (pre-warmed) keep these fast (~0.5s each vs ~2s uncached).
*/ */
const { test, expect } = require('playwright/test'); const { test, expect } = require('playwright/test');
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013'; const { loadPage } = require('./helpers');
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Helpers // Helpers
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
async function loadPage(page, path) {
await page.goto(BASE_URL + '/sx/' + path, { waitUntil: 'networkidle', timeout: 15000 });
await page.waitForTimeout(500);
const root = page.locator('#sx-root');
await expect(root).toBeVisible({ timeout: 10000 });
return root;
}
async function expectIsland(page, pattern) { async function expectIsland(page, pattern) {
const island = page.locator(`[data-sx-island*="${pattern}"]`); const island = page.locator(`[data-sx-island*="${pattern}"]`);
await expect(island).toBeVisible({ timeout: 8000 }); await expect(island).toBeVisible({ timeout: 8000 });
@@ -44,7 +34,8 @@ test.describe('Geography sections', () => {
for (const [path, text] of sections) { for (const [path, text] of sections) {
test(`${path} loads`, async ({ page }) => { test(`${path} loads`, async ({ page }) => {
const root = await loadPage(page, path); await loadPage(page, path);
const root = page.locator('#sx-root');
expect(await root.textContent()).toContain(text); expect(await root.textContent()).toContain(text);
}); });
} }
@@ -153,7 +144,6 @@ test('counter → temperature → counter: all stay reactive', async ({ page })
const tempLink = page.locator('a[href*="temperature"]').first(); const tempLink = page.locator('a[href*="temperature"]').first();
if (await tempLink.count() > 0) { if (await tempLink.count() > 0) {
await tempLink.click(); await tempLink.click();
await page.waitForTimeout(2000);
el = await expectIsland(page, 'temperature'); el = await expectIsland(page, 'temperature');
buttons = el.locator('button'); buttons = el.locator('button');
if (await buttons.count() >= 2) { if (await buttons.count() >= 2) {
@@ -168,7 +158,6 @@ test('counter → temperature → counter: all stay reactive', async ({ page })
const counterLink = page.locator('a[href*="counter"]').first(); const counterLink = page.locator('a[href*="counter"]').first();
if (await counterLink.count() > 0) { if (await counterLink.count() > 0) {
await counterLink.click(); await counterLink.click();
await page.waitForTimeout(2000);
el = await expectIsland(page, 'counter'); el = await expectIsland(page, 'counter');
buttons = el.locator('button'); buttons = el.locator('button');
before = await el.textContent(); before = await el.textContent();

37
tests/playwright/handler-responses.spec.js
View File

@@ -1,11 +1,10 @@
const { test, expect } = require('playwright/test'); const { test, expect } = require('playwright/test');
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013'; const { loadPage } = require('./helpers');
test.describe('Handler responses render correctly', () => { test.describe('Handler responses render correctly', () => {
test('bulk-update: deactivate renders proper HTML attributes', async ({ page }) => { test('bulk-update: deactivate renders proper HTML attributes', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.bulk-update)))', { waitUntil: 'networkidle' }); await loadPage(page, '(geography.(hypermedia.(example.bulk-update)))');
await page.waitForTimeout(2000);
// Check first row, note its status // Check first row, note its status
const firstCheckbox = page.locator('input[type="checkbox"]').first(); const firstCheckbox = page.locator('input[type="checkbox"]').first();
@@ -13,7 +12,7 @@ test.describe('Handler responses render correctly', () => {
// Click Deactivate // Click Deactivate
await page.locator('button:has-text("Deactivate")').first().click(); await page.locator('button:has-text("Deactivate")').first().click();
await page.waitForTimeout(3000); await page.waitForTimeout(2000);
// The table should still have proper HTML — no raw "class" text visible // The table should still have proper HTML — no raw "class" text visible
const tableText = await page.locator('table').first().textContent(); const tableText = await page.locator('table').first().textContent();
@@ -28,8 +27,7 @@ test.describe('Handler responses render correctly', () => {
}); });
test('delete-row: response renders with proper HTML classes', async ({ page }) => { test('delete-row: response renders with proper HTML classes', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.delete-row)))', { waitUntil: 'networkidle' }); await loadPage(page, '(geography.(hypermedia.(example.delete-row)))');
await page.waitForTimeout(2000);
// Table should have proper class attrs, not text // Table should have proper class attrs, not text
const tableText = await page.locator('table').first().textContent(); const tableText = await page.locator('table').first().textContent();
@@ -38,7 +36,7 @@ test.describe('Handler responses render correctly', () => {
// Click delete and check response doesn't corrupt // Click delete and check response doesn't corrupt
await page.locator('button:has-text("Delete")').first().click(); await page.locator('button:has-text("Delete")').first().click();
await page.waitForTimeout(3000); await page.waitForTimeout(2000);
const afterText = await page.locator('table').first().textContent(); const afterText = await page.locator('table').first().textContent();
expect(afterText).not.toContain('classpx'); expect(afterText).not.toContain('classpx');
@@ -46,14 +44,13 @@ test.describe('Handler responses render correctly', () => {
}); });
test('click-to-load: loaded rows have proper HTML', async ({ page }) => { test('click-to-load: loaded rows have proper HTML', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.click-to-load)))', { waitUntil: 'networkidle' }); await loadPage(page, '(geography.(hypermedia.(example.click-to-load)))');
await page.waitForTimeout(2000);
const rowsBefore = await page.locator('table tbody tr').count(); const rowsBefore = await page.locator('table tbody tr').count();
const loadBtn = page.locator('button:has-text("Load More")').first(); const loadBtn = page.locator('button:has-text("Load More")').first();
if (await loadBtn.count() > 0) { if (await loadBtn.count() > 0) {
await loadBtn.click(); await loadBtn.click();
await page.waitForTimeout(3000); await page.waitForTimeout(2000);
const rowsAfter = await page.locator('table tbody tr').count(); const rowsAfter = await page.locator('table tbody tr').count();
expect(rowsAfter).toBeGreaterThan(rowsBefore); expect(rowsAfter).toBeGreaterThan(rowsBefore);
@@ -66,12 +63,11 @@ test.describe('Handler responses render correctly', () => {
}); });
test('active-search: results render as proper HTML', async ({ page }) => { test('active-search: results render as proper HTML', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.active-search)))', { waitUntil: 'networkidle' }); await loadPage(page, '(geography.(hypermedia.(example.active-search)))');
await page.waitForTimeout(2000);
const input = page.locator('input[placeholder*="earch"], input[name="q"]').first(); const input = page.locator('input[placeholder*="earch"], input[name="q"]').first();
await input.fill('python'); await input.fill('python');
await page.waitForTimeout(3000); await page.waitForTimeout(2000);
const results = page.locator('#search-results'); const results = page.locator('#search-results');
const text = await results.textContent(); const text = await results.textContent();
@@ -81,8 +77,7 @@ test.describe('Handler responses render correctly', () => {
}); });
test('form-submission: response renders as HTML not SX text', async ({ page }) => { test('form-submission: response renders as HTML not SX text', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.form-submission)))', { waitUntil: 'networkidle' }); await loadPage(page, '(geography.(hypermedia.(example.form-submission)))');
await page.waitForTimeout(2000);
const form = page.locator('form').first(); const form = page.locator('form').first();
const inputs = form.locator('input[type="text"], input:not([type])'); const inputs = form.locator('input[type="text"], input:not([type])');
@@ -92,7 +87,7 @@ test.describe('Handler responses render correctly', () => {
const submit = form.locator('button[type="submit"], button').first(); const submit = form.locator('button[type="submit"], button').first();
await submit.click(); await submit.click();
await page.waitForTimeout(3000); await page.waitForTimeout(2000);
// Response should not have raw SX class text // Response should not have raw SX class text
const root = page.locator('#sx-root'); const root = page.locator('#sx-root');
@@ -102,13 +97,12 @@ test.describe('Handler responses render correctly', () => {
}); });
test('edit-row: edited row renders with proper classes', async ({ page }) => { test('edit-row: edited row renders with proper classes', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.edit-row)))', { waitUntil: 'networkidle' }); await loadPage(page, '(geography.(hypermedia.(example.edit-row)))');
await page.waitForTimeout(2000);
const editBtn = page.locator('button:has-text("Edit")').first(); const editBtn = page.locator('button:has-text("Edit")').first();
if (await editBtn.count() > 0) { if (await editBtn.count() > 0) {
await editBtn.click(); await editBtn.click();
await page.waitForTimeout(2000); await page.waitForTimeout(1000);
// Edit form or inline edit should not show raw class text // Edit form or inline edit should not show raw class text
const root = page.locator('#sx-root'); const root = page.locator('#sx-root');
@@ -118,14 +112,13 @@ test.describe('Handler responses render correctly', () => {
}); });
test('tabs: tab content renders as proper HTML', async ({ page }) => { test('tabs: tab content renders as proper HTML', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.tabs)))', { waitUntil: 'networkidle' }); await loadPage(page, '(geography.(hypermedia.(example.tabs)))');
await page.waitForTimeout(2000);
// Click a tab // Click a tab
const tabs = page.locator('[sx-get*="tab"]'); const tabs = page.locator('[sx-get*="tab"]');
if (await tabs.count() >= 2) { if (await tabs.count() >= 2) {
await tabs.nth(1).click(); await tabs.nth(1).click();
await page.waitForTimeout(2000); await page.waitForTimeout(1000);
const root = page.locator('#sx-root'); const root = page.locator('#sx-root');
const text = await root.textContent(); const text = await root.textContent();

22
tests/playwright/helpers.js Normal file
View File

@@ -0,0 +1,22 @@
// Shared helpers for Playwright tests
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013';
/**
* Wait for the SX runtime to finish hydration.
* boot-init sets data-sx-ready="true" on <html> after all islands are hydrated.
*/
async function waitForSxReady(page, timeout = 15000) {
await page.waitForSelector('html[data-sx-ready]', { timeout });
}
/**
* Navigate to an SX page and wait for hydration to complete.
* Replaces the old pattern of networkidle + arbitrary sleep.
*/
async function loadPage(page, path, timeout = 15000) {
await page.goto(BASE_URL + '/sx/' + path, { waitUntil: 'domcontentloaded', timeout });
await waitForSxReady(page);
}
module.exports = { BASE_URL, waitForSxReady, loadPage };

27
tests/playwright/isomorphic.spec.js
View File

@@ -1,7 +1,7 @@
// @ts-check // @ts-check
const { test, expect } = require('playwright/test'); const { test, expect } = require('playwright/test');
const { BASE_URL, waitForSxReady } = require('./helpers');
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013';
const TEST_PAGE = '/sx/(etc.(philosophy.wittgenstein))'; const TEST_PAGE = '/sx/(etc.(philosophy.wittgenstein))';
/** /**
@@ -97,8 +97,8 @@ test.describe('Isomorphic SSR', () => {
// Get client DOM (with JS) // Get client DOM (with JS)
const jsContext = await browser.newContext({ javaScriptEnabled: true }); const jsContext = await browser.newContext({ javaScriptEnabled: true });
const jsPage = await jsContext.newPage(); const jsPage = await jsContext.newPage();
await jsPage.goto(BASE_URL + TEST_PAGE, { waitUntil: 'networkidle' }); await jsPage.goto(BASE_URL + TEST_PAGE, { waitUntil: 'domcontentloaded' });
await jsPage.waitForTimeout(2000); // wait for hydration await waitForSxReady(jsPage);
const clientStructure = await getSxRootStructure(jsPage); const clientStructure = await getSxRootStructure(jsPage);
const clientText = await getSxRootText(jsPage); const clientText = await getSxRootText(jsPage);
await jsContext.close(); await jsContext.close();
@@ -137,9 +137,11 @@ test.describe('Isomorphic SSR', () => {
}); });
test('islands hydrate and reactive signals work', async ({ page }) => { test('islands hydrate and reactive signals work', async ({ page }) => {
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' }); await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });
await page.waitForSelector('[data-sx-island="layouts/header"]', { timeout: 15000 }); await waitForSxReady(page);
await page.waitForSelector('[data-sx-island="home/stepper"]', { timeout: 5000 });
await expect(page.locator('[data-sx-island="layouts/header"]')).toBeVisible({ timeout: 5000 });
await expect(page.locator('[data-sx-island="home/stepper"]')).toBeVisible({ timeout: 5000 });
// Stepper buttons change the count // Stepper buttons change the count
const stepper = page.locator('[data-sx-island="home/stepper"]'); const stepper = page.locator('[data-sx-island="home/stepper"]');
@@ -159,8 +161,8 @@ test.describe('Isomorphic SSR', () => {
}); });
test('navigation links have valid URLs (no [object Object])', async ({ page }) => { test('navigation links have valid URLs (no [object Object])', async ({ page }) => {
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' }); await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });
await page.waitForTimeout(1000); await waitForSxReady(page);
// Check all nav links for [object Object] — regression for FFI primitive overrides // Check all nav links for [object Object] — regression for FFI primitive overrides
const brokenLinks = await page.evaluate(() => { const brokenLinks = await page.evaluate(() => {
@@ -177,11 +179,8 @@ test.describe('Isomorphic SSR', () => {
}); });
test('navigation preserves header island state', async ({ page }) => { test('navigation preserves header island state', async ({ page }) => {
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' }); await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
// Wait for header island to hydrate
await page.waitForSelector('[data-sx-island="layouts/header"]', { timeout: 15000 });
await page.waitForTimeout(1000);
// Click "reactive" to change colour // Click "reactive" to change colour
const reactive = page.locator('[data-sx-island="layouts/header"]').getByText('reactive'); const reactive = page.locator('[data-sx-island="layouts/header"]').getByText('reactive');
@@ -195,7 +194,7 @@ test.describe('Isomorphic SSR', () => {
// Navigate via SPA link // Navigate via SPA link
const geoLink = page.locator('a[sx-get*="geography"]').first(); const geoLink = page.locator('a[sx-get*="geography"]').first();
await geoLink.click(); await geoLink.click();
await page.waitForTimeout(2000); await expect(page).toHaveURL(/geography/, { timeout: 5000 });
// Colour should be preserved (def-store keeps signals across re-hydration) // Colour should be preserved (def-store keeps signals across re-hydration)
const colourAfter = await reactive.evaluate(el => el.style.color); const colourAfter = await reactive.evaluate(el => el.style.color);

50
tests/playwright/navigation.spec.js
View File

@@ -2,7 +2,7 @@
// Verifies navigation works correctly with the OCaml sx-host. // Verifies navigation works correctly with the OCaml sx-host.
const { test, expect } = require('playwright/test'); const { test, expect } = require('playwright/test');
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013'; const { BASE_URL, waitForSxReady, loadPage } = require('./helpers');
test.describe('Page Navigation', () => { test.describe('Page Navigation', () => {
@@ -12,15 +12,11 @@ test.describe('Page Navigation', () => {
if (msg.type() === 'error') errors.push(msg.text()); if (msg.type() === 'error') errors.push(msg.text());
}); });
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' }); await loadPage(page, '(geography)');
await page.waitForTimeout(2000);
// Click "Reactive Islands" nav link // Click "Reactive Islands" nav link
await page.click('a[href*="geography.(reactive)"]:not([href*="runtime"])'); await page.click('a[href*="geography.(reactive)"]:not([href*="runtime"])');
await page.waitForTimeout(3000); await expect(page).toHaveURL(/reactive/, { timeout: 5000 });
// Should have navigated — URL must contain reactive
expect(page.url()).toContain('reactive');
// Page should show Reactive Islands content // Page should show Reactive Islands content
const body = await page.textContent('body'); const body = await page.textContent('body');
@@ -37,15 +33,11 @@ test.describe('Page Navigation', () => {
if (msg.type() === 'error') errors.push(msg.text()); if (msg.type() === 'error') errors.push(msg.text());
}); });
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' }); await loadPage(page, '(geography)');
await page.waitForTimeout(2000);
// Click the logo in the header island // Click the logo in the header island
await page.click('[data-sx-island="layouts/header"] a[href="/sx/"]'); await page.click('[data-sx-island="layouts/header"] a[href="/sx/"]');
await page.waitForTimeout(3000); await expect(page).toHaveURL(/\/sx\/?$/, { timeout: 5000 });
// Should have navigated to home
expect(page.url()).toMatch(/\/sx\/?$/);
// No SX evaluation errors // No SX evaluation errors
const sxErrors = errors.filter(e => e.includes('Undefined symbol')); const sxErrors = errors.filter(e => e.includes('Undefined symbol'));
@@ -58,21 +50,16 @@ test.describe('Page Navigation', () => {
if (msg.type() === 'error') errors.push(msg.text()); if (msg.type() === 'error') errors.push(msg.text());
}); });
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' }); await loadPage(page, '(geography)');
await page.waitForTimeout(2000);
// Navigate to Reactive Islands // Navigate to Reactive Islands
await page.click('a[href*="geography.(reactive)"]:not([href*="runtime"])'); await page.click('a[href*="geography.(reactive)"]:not([href*="runtime"])');
await page.waitForTimeout(3000); await expect(page).toHaveURL(/reactive/, { timeout: 5000 });
expect(page.url()).toContain('reactive');
// Go back // Go back
await page.goBack(); await page.goBack();
await page.waitForTimeout(3000); await expect(page).toHaveURL(/geography/, { timeout: 5000 });
await expect(page).not.toHaveURL(/reactive/);
// Should be back at Geography
expect(page.url()).toContain('geography');
expect(page.url()).not.toContain('reactive');
// Geography heading should be visible // Geography heading should be visible
const heading = await page.locator('h1, h2').first(); const heading = await page.locator('h1, h2').first();
@@ -90,8 +77,7 @@ test.describe('Page Navigation', () => {
errors.push(msg.text()); errors.push(msg.text());
}); });
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' }); await loadPage(page, '(geography)');
await page.waitForTimeout(3000);
// No JIT or SX errors // No JIT or SX errors
const sxErrors = errors.filter(e => const sxErrors = errors.filter(e =>
@@ -100,8 +86,7 @@ test.describe('Page Navigation', () => {
}); });
test('copyright shows current route after SX navigation', async ({ page }) => { test('copyright shows current route after SX navigation', async ({ page }) => {
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' }); await loadPage(page, '');
await page.waitForTimeout(3000);
// Mark the page to verify SX navigation (not full reload) // Mark the page to verify SX navigation (not full reload)
await page.evaluate(() => window.__sx_nav_marker = true); await page.evaluate(() => window.__sx_nav_marker = true);
@@ -113,7 +98,7 @@ test.describe('Page Navigation', () => {
// Navigate via SX (sx-get link) // Navigate via SX (sx-get link)
await page.click('a[sx-get*="(geography)"]'); await page.click('a[sx-get*="(geography)"]');
await page.waitForTimeout(3000); await expect(page).toHaveURL(/geography/, { timeout: 5000 });
// Verify SX navigation (marker survives SX nav, lost on reload) // Verify SX navigation (marker survives SX nav, lost on reload)
const marker = await page.evaluate(() => window.__sx_nav_marker); const marker = await page.evaluate(() => window.__sx_nav_marker);
@@ -126,8 +111,7 @@ test.describe('Page Navigation', () => {
}); });
test('stepper persists index across navigation', async ({ page }) => { test('stepper persists index across navigation', async ({ page }) => {
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' }); await loadPage(page, '');
await page.waitForTimeout(3000);
// Get the initial stepper index // Get the initial stepper index
const getIndex = () => page.evaluate(() => { const getIndex = () => page.evaluate(() => {
@@ -144,21 +128,21 @@ test.describe('Page Navigation', () => {
const btns = document.querySelectorAll('[data-sx-island="home/stepper"] button'); const btns = document.querySelectorAll('[data-sx-island="home/stepper"] button');
if (btns.length >= 2) btns[1].click(); // next button if (btns.length >= 2) btns[1].click(); // next button
}); });
await page.waitForTimeout(500); await page.waitForTimeout(300);
const advanced = await getIndex(); const advanced = await getIndex();
expect(advanced).toBe(initial + 1); expect(advanced).toBe(initial + 1);
// Navigate away // Navigate away
await page.click('a[sx-get*="(geography)"]'); await page.click('a[sx-get*="(geography)"]');
await page.waitForTimeout(2000); await expect(page).toHaveURL(/geography/, { timeout: 5000 });
// Navigate back home // Navigate back home
await page.evaluate(() => { await page.evaluate(() => {
const link = document.querySelector('a[sx-get*="/sx/"]'); const link = document.querySelector('a[sx-get*="/sx/"]');
if (link) link.click(); if (link) link.click();
}); });
await page.waitForTimeout(3000); await expect(page).toHaveURL(/\/sx\/?$/, { timeout: 5000 });
// Stepper should still show the advanced index // Stepper should still show the advanced index
const afterNav = await getIndex(); const afterNav = await getIndex();
@@ -166,7 +150,7 @@ test.describe('Page Navigation', () => {
}); });
test('header island renders with SSR', async ({ page }) => { test('header island renders with SSR', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' }); await loadPage(page, '(geography)');
// Header should be visible // Header should be visible
const header = page.locator('[data-sx-island="layouts/header"]'); const header = page.locator('[data-sx-island="layouts/header"]');

29
tests/playwright/reactive-nav.spec.js
View File

@@ -1,11 +1,12 @@
// @ts-check // @ts-check
const { test, expect } = require('playwright/test'); const { test, expect } = require('playwright/test');
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013'; const { BASE_URL, waitForSxReady } = require('./helpers');
test.describe('Reactive Island Navigation', () => { test.describe('Reactive Island Navigation', () => {
test('counter island works on direct load', async ({ page }) => { test('counter island works on direct load', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'networkidle' }); await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
const island = page.locator('[data-sx-island*="counter"]'); const island = page.locator('[data-sx-island*="counter"]');
await expect(island).toBeVisible({ timeout: 10000 }); await expect(island).toBeVisible({ timeout: 10000 });
@@ -20,7 +21,8 @@ test.describe('Reactive Island Navigation', () => {
}); });
test('temperature island works on direct load', async ({ page }) => { test('temperature island works on direct load', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.temperature)))', { waitUntil: 'networkidle' }); await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.temperature)))', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
const island = page.locator('[data-sx-island*="temperature"]'); const island = page.locator('[data-sx-island*="temperature"]');
await expect(island).toBeVisible({ timeout: 10000 }); await expect(island).toBeVisible({ timeout: 10000 });
@@ -32,7 +34,8 @@ test.describe('Reactive Island Navigation', () => {
}); });
test('counter → temperature: temperature island is reactive after SPA nav', async ({ page }) => { test('counter → temperature: temperature island is reactive after SPA nav', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'networkidle' }); await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
const counter = page.locator('[data-sx-island*="counter"]'); const counter = page.locator('[data-sx-island*="counter"]');
await expect(counter).toBeVisible({ timeout: 10000 }); await expect(counter).toBeVisible({ timeout: 10000 });
@@ -42,7 +45,8 @@ test.describe('Reactive Island Navigation', () => {
if (await tempLink.count() > 0) { if (await tempLink.count() > 0) {
await tempLink.click(); await tempLink.click();
} else { } else {
await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.temperature)))', { waitUntil: 'networkidle' }); await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.temperature)))', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
} }
const tempIsland = page.locator('[data-sx-island*="temperature"]'); const tempIsland = page.locator('[data-sx-island*="temperature"]');
@@ -58,7 +62,8 @@ test.describe('Reactive Island Navigation', () => {
}); });
test('temperature → counter: counter island is reactive after SPA nav', async ({ page }) => { test('temperature → counter: counter island is reactive after SPA nav', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.temperature)))', { waitUntil: 'networkidle' }); await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.temperature)))', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
const temp = page.locator('[data-sx-island*="temperature"]'); const temp = page.locator('[data-sx-island*="temperature"]');
await expect(temp).toBeVisible({ timeout: 10000 }); await expect(temp).toBeVisible({ timeout: 10000 });
@@ -67,7 +72,8 @@ test.describe('Reactive Island Navigation', () => {
if (await counterLink.count() > 0) { if (await counterLink.count() > 0) {
await counterLink.click(); await counterLink.click();
} else { } else {
await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'networkidle' }); await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
} }
const counter = page.locator('[data-sx-island*="counter"]'); const counter = page.locator('[data-sx-island*="counter"]');
@@ -86,11 +92,14 @@ test.describe('Reactive Island Navigation', () => {
const errors = []; const errors = [];
page.on('pageerror', err => errors.push(err.message)); page.on('pageerror', err => errors.push(err.message));
await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'networkidle' }); await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
const link = page.locator('a[href*="temperature"]').first(); const link = page.locator('a[href*="temperature"]').first();
if (await link.count() > 0) await link.click(); if (await link.count() > 0) {
await page.waitForTimeout(2000); await link.click();
await expect(page).toHaveURL(/temperature/, { timeout: 5000 });
}
const real = errors.filter(e => const real = errors.filter(e =>
!e.includes('Failed to fetch') && !e.includes('net::ERR') !e.includes('Failed to fetch') && !e.includes('net::ERR')

7
tests/playwright/stepper.spec.js
View File

@@ -1,9 +1,8 @@
const { test, expect } = require('playwright/test'); const { test, expect } = require('playwright/test');
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013'; const { loadPage } = require('./helpers');
test('home page stepper: no raw SX component calls visible', async ({ page }) => { test('home page stepper: no raw SX component calls visible', async ({ page }) => {
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' }); await loadPage(page, '');
await page.waitForTimeout(5000);
const stepper = page.locator('[data-sx-island="home/stepper"]'); const stepper = page.locator('[data-sx-island="home/stepper"]');
await expect(stepper).toBeVisible({ timeout: 10000 }); await expect(stepper).toBeVisible({ timeout: 10000 });
@@ -23,7 +22,7 @@ test('home page stepper: no raw SX component calls visible', async ({ page }) =>
await expect(buttons).toHaveCount(2); await expect(buttons).toHaveCount(2);
const textBefore = await stepper.textContent(); const textBefore = await stepper.textContent();
await buttons.last().click(); await buttons.last().click();
await page.waitForTimeout(500); await page.waitForTimeout(300);
const textAfter = await stepper.textContent(); const textAfter = await stepper.textContent();
expect(textAfter).not.toBe(textBefore); expect(textAfter).not.toBe(textBefore);
}); });

8
web/boot.sx
View File

@@ -431,4 +431,10 @@
(sx-hydrate-islands nil) (sx-hydrate-islands nil)
(run-post-render-hooks) (run-post-render-hooks)
(process-elements nil) (process-elements nil)
(dom-listen (dom-window) "popstate" (fn (e) (handle-popstate 0)))))) (dom-listen (dom-window) "popstate" (fn (e) (handle-popstate 0)))
(dom-set-attr
(host-get (dom-document) "documentElement")
"data-sx-ready"
"true")
(dom-dispatch (dom-document) "sx:ready" nil)
(log-info "sx:ready"))))