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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user