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,16 +1,9 @@
|
||||
// @ts-check
|
||||
/**
|
||||
* 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 BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013';
|
||||
|
||||
async function loadDemo(page, path) {
|
||||
await page.goto(BASE_URL + '/sx/' + path, { waitUntil: 'networkidle', timeout: 15000 });
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
const { loadPage } = require('./helpers');
|
||||
|
||||
function island(page, pattern) {
|
||||
return page.locator(`[data-sx-island*="${pattern}"]`);
|
||||
@@ -32,7 +25,7 @@ async function assertNoClassLeak(page, scope) {
|
||||
test.describe('Reactive island interactions', () => {
|
||||
|
||||
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');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
const buttons = el.locator('button');
|
||||
@@ -52,7 +45,7 @@ test.describe('Reactive island interactions', () => {
|
||||
});
|
||||
|
||||
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');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
const buttons = el.locator('button');
|
||||
@@ -65,7 +58,7 @@ test.describe('Reactive island interactions', () => {
|
||||
});
|
||||
|
||||
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');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
const textBefore = await el.textContent();
|
||||
@@ -75,7 +68,7 @@ test.describe('Reactive island interactions', () => {
|
||||
});
|
||||
|
||||
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');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
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 }) => {
|
||||
await loadDemo(page, '(geography.(reactive.(examples.dynamic-class)))');
|
||||
await loadPage(page, '(geography.(reactive.(examples.dynamic-class)))');
|
||||
const el = island(page, 'dynamic-class');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
const htmlBefore = await el.innerHTML();
|
||||
@@ -94,7 +87,7 @@ test.describe('Reactive island interactions', () => {
|
||||
});
|
||||
|
||||
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');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
const textBefore = await el.textContent();
|
||||
@@ -104,7 +97,7 @@ test.describe('Reactive island interactions', () => {
|
||||
});
|
||||
|
||||
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 reader = island(page, 'store-reader');
|
||||
await expect(writer).toBeVisible({ timeout: 10000 });
|
||||
@@ -114,7 +107,7 @@ test.describe('Reactive island interactions', () => {
|
||||
});
|
||||
|
||||
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');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
const textBefore = await el.textContent();
|
||||
@@ -126,7 +119,7 @@ test.describe('Reactive island interactions', () => {
|
||||
});
|
||||
|
||||
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');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
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 }) => {
|
||||
await loadDemo(page, '(geography.(reactive.(examples.imperative)))');
|
||||
await loadPage(page, '(geography.(reactive.(examples.imperative)))');
|
||||
const el = island(page, 'imperative');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
const textBefore = await el.textContent();
|
||||
@@ -146,7 +139,7 @@ test.describe('Reactive island interactions', () => {
|
||||
});
|
||||
|
||||
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');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
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 }) => {
|
||||
await loadDemo(page, '(geography.(reactive.(examples.event-bridge-demo)))');
|
||||
await loadPage(page, '(geography.(reactive.(examples.event-bridge-demo)))');
|
||||
const el = island(page, 'event-bridge');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
const textBefore = await el.textContent();
|
||||
@@ -168,11 +161,10 @@ test.describe('Reactive island interactions', () => {
|
||||
});
|
||||
|
||||
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');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
await page.waitForTimeout(2000);
|
||||
expect(await el.textContent()).toContain('Ada');
|
||||
await expect(el).toContainText('Ada', { timeout: 5000 });
|
||||
});
|
||||
});
|
||||
|
||||
@@ -184,7 +176,7 @@ test.describe('Reactive island interactions', () => {
|
||||
test.describe('Marshes interactions', () => {
|
||||
|
||||
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');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
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 }) => {
|
||||
await loadDemo(page, '(geography.(marshes.on-settle))');
|
||||
await loadPage(page, '(geography.(marshes.on-settle))');
|
||||
const el = island(page, 'marsh-settle');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
const btn = el.locator('button').first();
|
||||
@@ -212,7 +204,7 @@ test.describe('Marshes interactions', () => {
|
||||
});
|
||||
|
||||
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 reader = island(page, 'marsh-store-reader');
|
||||
await expect(writer).toBeVisible({ timeout: 10000 });
|
||||
@@ -220,7 +212,7 @@ test.describe('Marshes interactions', () => {
|
||||
});
|
||||
|
||||
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');
|
||||
await expect(el).toBeVisible({ timeout: 10000 });
|
||||
const viewBtns = el.locator('button');
|
||||
@@ -246,8 +238,7 @@ test.describe('Server health', () => {
|
||||
const demos = ['counter', 'temperature', 'stopwatch', 'input-binding',
|
||||
'dynamic-class', 'reactive-list', 'stores', 'resource'];
|
||||
for (const demo of demos) {
|
||||
await page.goto(BASE_URL + `/sx/(geography.(reactive.(examples.${demo})))`, { waitUntil: 'networkidle', timeout: 15000 });
|
||||
await page.waitForTimeout(500);
|
||||
await loadPage(page, `(geography.(reactive.(examples.${demo})))`);
|
||||
}
|
||||
const real = errors.filter(e => !e.includes('net::ERR') && !e.includes('fetch'));
|
||||
expect(real).toEqual([]);
|
||||
@@ -259,8 +250,7 @@ test.describe('Server health', () => {
|
||||
const pages = ['hypermedia-feeds', 'on-settle', 'server-signals',
|
||||
'signal-triggers', 'view-transform'];
|
||||
for (const p of pages) {
|
||||
await page.goto(BASE_URL + `/sx/(geography.(marshes.${p}))`, { waitUntil: 'networkidle', timeout: 15000 });
|
||||
await page.waitForTimeout(500);
|
||||
await loadPage(page, `(geography.(marshes.${p}))`);
|
||||
}
|
||||
const real = errors.filter(e => !e.includes('net::ERR') && !e.includes('fetch'));
|
||||
expect(real).toEqual([]);
|
||||
|
||||
@@ -1,23 +1,13 @@
|
||||
// @ts-check
|
||||
/**
|
||||
* 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 BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013';
|
||||
const { loadPage } = require('./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) {
|
||||
const island = page.locator(`[data-sx-island*="${pattern}"]`);
|
||||
await expect(island).toBeVisible({ timeout: 8000 });
|
||||
@@ -44,7 +34,8 @@ test.describe('Geography sections', () => {
|
||||
|
||||
for (const [path, text] of sections) {
|
||||
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);
|
||||
});
|
||||
}
|
||||
@@ -153,7 +144,6 @@ test('counter → temperature → counter: all stay reactive', async ({ page })
|
||||
const tempLink = page.locator('a[href*="temperature"]').first();
|
||||
if (await tempLink.count() > 0) {
|
||||
await tempLink.click();
|
||||
await page.waitForTimeout(2000);
|
||||
el = await expectIsland(page, 'temperature');
|
||||
buttons = el.locator('button');
|
||||
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();
|
||||
if (await counterLink.count() > 0) {
|
||||
await counterLink.click();
|
||||
await page.waitForTimeout(2000);
|
||||
el = await expectIsland(page, 'counter');
|
||||
buttons = el.locator('button');
|
||||
before = await el.textContent();
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
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('bulk-update: deactivate renders proper HTML attributes', async ({ page }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.bulk-update)))', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
await loadPage(page, '(geography.(hypermedia.(example.bulk-update)))');
|
||||
|
||||
// Check first row, note its status
|
||||
const firstCheckbox = page.locator('input[type="checkbox"]').first();
|
||||
@@ -13,7 +12,7 @@ test.describe('Handler responses render correctly', () => {
|
||||
|
||||
// Click Deactivate
|
||||
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
|
||||
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 }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.delete-row)))', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
await loadPage(page, '(geography.(hypermedia.(example.delete-row)))');
|
||||
|
||||
// Table should have proper class attrs, not text
|
||||
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
|
||||
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();
|
||||
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 }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.click-to-load)))', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
await loadPage(page, '(geography.(hypermedia.(example.click-to-load)))');
|
||||
|
||||
const rowsBefore = await page.locator('table tbody tr').count();
|
||||
const loadBtn = page.locator('button:has-text("Load More")').first();
|
||||
if (await loadBtn.count() > 0) {
|
||||
await loadBtn.click();
|
||||
await page.waitForTimeout(3000);
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
const rowsAfter = await page.locator('table tbody tr').count();
|
||||
expect(rowsAfter).toBeGreaterThan(rowsBefore);
|
||||
@@ -66,12 +63,11 @@ test.describe('Handler responses render correctly', () => {
|
||||
});
|
||||
|
||||
test('active-search: results render as proper HTML', async ({ page }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.active-search)))', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
await loadPage(page, '(geography.(hypermedia.(example.active-search)))');
|
||||
|
||||
const input = page.locator('input[placeholder*="earch"], input[name="q"]').first();
|
||||
await input.fill('python');
|
||||
await page.waitForTimeout(3000);
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
const results = page.locator('#search-results');
|
||||
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 }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.form-submission)))', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
await loadPage(page, '(geography.(hypermedia.(example.form-submission)))');
|
||||
|
||||
const form = page.locator('form').first();
|
||||
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();
|
||||
await submit.click();
|
||||
await page.waitForTimeout(3000);
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Response should not have raw SX class text
|
||||
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 }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.edit-row)))', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
await loadPage(page, '(geography.(hypermedia.(example.edit-row)))');
|
||||
|
||||
const editBtn = page.locator('button:has-text("Edit")').first();
|
||||
if (await editBtn.count() > 0) {
|
||||
await editBtn.click();
|
||||
await page.waitForTimeout(2000);
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Edit form or inline edit should not show raw class text
|
||||
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 }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.tabs)))', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
await loadPage(page, '(geography.(hypermedia.(example.tabs)))');
|
||||
|
||||
// Click a tab
|
||||
const tabs = page.locator('[sx-get*="tab"]');
|
||||
if (await tabs.count() >= 2) {
|
||||
await tabs.nth(1).click();
|
||||
await page.waitForTimeout(2000);
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
const root = page.locator('#sx-root');
|
||||
const text = await root.textContent();
|
||||
|
||||
22
tests/playwright/helpers.js
Normal file
22
tests/playwright/helpers.js
Normal 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 };
|
||||
@@ -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);
|
||||
|
||||
@@ -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"]');
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
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 }) => {
|
||||
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(5000);
|
||||
await loadPage(page, '');
|
||||
|
||||
const stepper = page.locator('[data-sx-island="home/stepper"]');
|
||||
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);
|
||||
const textBefore = await stepper.textContent();
|
||||
await buttons.last().click();
|
||||
await page.waitForTimeout(500);
|
||||
await page.waitForTimeout(300);
|
||||
const textAfter = await stepper.textContent();
|
||||
expect(textAfter).not.toBe(textBefore);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user