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

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

@@ -1,11 +1,12 @@
// @ts-check
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('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"]');
await expect(island).toBeVisible({ timeout: 10000 });
@@ -20,7 +21,8 @@ test.describe('Reactive Island Navigation', () => {
});
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"]');
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 }) => {
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"]');
await expect(counter).toBeVisible({ timeout: 10000 });
@@ -42,7 +45,8 @@ test.describe('Reactive Island Navigation', () => {
if (await tempLink.count() > 0) {
await tempLink.click();
} 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"]');
@@ -58,7 +62,8 @@ test.describe('Reactive Island Navigation', () => {
});
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"]');
await expect(temp).toBeVisible({ timeout: 10000 });
@@ -67,7 +72,8 @@ test.describe('Reactive Island Navigation', () => {
if (await counterLink.count() > 0) {
await counterLink.click();
} 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"]');
@@ -86,11 +92,14 @@ test.describe('Reactive Island Navigation', () => {
const errors = [];
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();
if (await link.count() > 0) await link.click();
await page.waitForTimeout(2000);
if (await link.count() > 0) {
await link.click();
await expect(page).toHaveURL(/temperature/, { timeout: 5000 });
}
const real = errors.filter(e =>
!e.includes('Failed to fetch') && !e.includes('net::ERR')