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

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

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