Add sx:ready hydration signal, eliminate test sleeps

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:
2026-03-30 12:47:52 +00:00
parent fffb5ab0b5
commit e14947cedc
12 changed files with 131 additions and 137 deletions

View File

@@ -1,7 +1,7 @@
// @ts-check
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))';
/**
@@ -97,8 +97,8 @@ test.describe('Isomorphic SSR', () => {
// Get client DOM (with JS)
const jsContext = await browser.newContext({ javaScriptEnabled: true });
const jsPage = await jsContext.newPage();
await jsPage.goto(BASE_URL + TEST_PAGE, { waitUntil: 'networkidle' });
await jsPage.waitForTimeout(2000); // wait for hydration
await jsPage.goto(BASE_URL + TEST_PAGE, { waitUntil: 'domcontentloaded' });
await waitForSxReady(jsPage);
const clientStructure = await getSxRootStructure(jsPage);
const clientText = await getSxRootText(jsPage);
await jsContext.close();
@@ -137,9 +137,11 @@ test.describe('Isomorphic SSR', () => {
});
test('islands hydrate and reactive signals work', async ({ page }) => {
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' });
await page.waitForSelector('[data-sx-island="layouts/header"]', { timeout: 15000 });
await page.waitForSelector('[data-sx-island="home/stepper"]', { timeout: 5000 });
await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
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
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 }) => {
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' });
await page.waitForTimeout(1000);
await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
// Check all nav links for [object Object] — regression for FFI primitive overrides
const brokenLinks = await page.evaluate(() => {
@@ -177,11 +179,8 @@ test.describe('Isomorphic SSR', () => {
});
test('navigation preserves header island state', async ({ page }) => {
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' });
// Wait for header island to hydrate
await page.waitForSelector('[data-sx-island="layouts/header"]', { timeout: 15000 });
await page.waitForTimeout(1000);
await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
// Click "reactive" to change colour
const reactive = page.locator('[data-sx-island="layouts/header"]').getByText('reactive');
@@ -195,7 +194,7 @@ test.describe('Isomorphic SSR', () => {
// Navigate via SPA link
const geoLink = page.locator('a[sx-get*="geography"]').first();
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)
const colourAfter = await reactive.evaluate(el => el.style.color);