Fix island state loss on SX navigation + cache busting
Island markers rendered during SX navigation responses had no data-sx-state attribute, so hydration found empty kwargs and path was nil in the copyright display. Now adapter-dom.sx serializes keyword args into data-sx-state on island markers, matching what adapter-html.sx does for SSR. Also fix post-swap to use parent element for outerHTML swaps in SX responses (was using detached old target). Add SX source file hashes to wasm_hash for proper browser cache busting — changing any .sx file now busts the cache. Remove stale .sxbc bytecode cache files. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,120 +1,12 @@
|
||||
// Navigation tests for sx-docs
|
||||
// Verifies client-side navigation works correctly after sx-host migration.
|
||||
// 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';
|
||||
|
||||
test.describe('Client-side Navigation', () => {
|
||||
test.describe('Page Navigation', () => {
|
||||
|
||||
test('layout stays vertical after clicking nav link', async ({ page }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Click "Reactive Islands" nav link
|
||||
await page.click('a[href*="geography.(reactive"]:not([href*="runtime"])');
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// Page should have navigated
|
||||
expect(page.url()).toContain('reactive');
|
||||
|
||||
// After navigation, the page title/heading should be visible and centered
|
||||
// NOT pushed to the right side by the header
|
||||
const heading = await page.locator('h1, h2').first().boundingBox();
|
||||
const viewport = page.viewportSize();
|
||||
|
||||
if (heading && viewport) {
|
||||
// The heading should be centered-ish, not pushed far right
|
||||
// If it's past 60% of viewport width, layout is broken (side-by-side)
|
||||
expect(heading.x).toBeLessThan(viewport.width * 0.5);
|
||||
}
|
||||
|
||||
// The page should NOT have two visible columns where header and content
|
||||
// are side by side
|
||||
const screenshot = await page.screenshot();
|
||||
// Just verify the content area starts near the top
|
||||
if (heading) {
|
||||
expect(heading.y).toBeLessThan(400); // Content should be within first 400px
|
||||
}
|
||||
});
|
||||
|
||||
test('content updates after navigation', async ({ page }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
||||
|
||||
// Geography page should have "Geography" heading
|
||||
const geoText = await page.textContent('body');
|
||||
expect(geoText).toContain('Geography');
|
||||
|
||||
// Click on "CEK Machine" link
|
||||
const cekLink = page.locator('a:has-text("CEK Machine")');
|
||||
if (await cekLink.count() > 0) {
|
||||
await cekLink.first().click();
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// Content should now mention CEK
|
||||
const bodyText = await page.textContent('body');
|
||||
expect(bodyText).toContain('CEK');
|
||||
}
|
||||
});
|
||||
|
||||
test('no raw SX component calls visible after navigation', async ({ page }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
||||
|
||||
// Click a nav link
|
||||
await page.click('a[href*="hypermedia"]:not([href*="example"])');
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// Check no raw SX calls visible in the main content area
|
||||
const mainText = await page.locator('#main-panel, #root-panel, main').first().textContent();
|
||||
// ~cssx/tw calls should be expanded, not visible as text
|
||||
const rawCssx = (mainText.match(/~cssx\/tw/g) || []).length;
|
||||
expect(rawCssx).toBeLessThan(3); // Allow a few in documentation text
|
||||
});
|
||||
|
||||
test('header island survives navigation', async ({ page }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
||||
await page.waitForSelector('[data-sx-island="layouts/header"]', { timeout: 10000 });
|
||||
|
||||
// Header should have the logo
|
||||
const headerText = await page.locator('[data-sx-island="layouts/header"]').textContent();
|
||||
expect(headerText).toContain('sx');
|
||||
|
||||
// Navigate
|
||||
await page.click('a[href*="hypermedia"]:not([href*="example"])');
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// Header should still be present and have content
|
||||
const headerAfter = await page.locator('[data-sx-island="layouts/header"]');
|
||||
await expect(headerAfter).toBeVisible();
|
||||
const headerTextAfter = await headerAfter.textContent();
|
||||
expect(headerTextAfter).toContain('sx');
|
||||
});
|
||||
|
||||
test('navigation does not create side-by-side layout', async ({ page }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Navigate to Hypermedia
|
||||
await page.click('a[href*="geography.(hypermedia"]:not([href*="example"])');
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// The header/nav should NOT be beside the content (side by side)
|
||||
// Check that there's no element with the logo text at x < 300
|
||||
// while content heading is at x > 300
|
||||
const logo = await page.locator('[data-sx-island="layouts/header"]').boundingBox();
|
||||
const heading = await page.locator('h1, h2').first().boundingBox();
|
||||
|
||||
if (logo && heading) {
|
||||
// Both should be roughly centered, not one left and one right
|
||||
const logoCenter = logo.x + logo.width / 2;
|
||||
const headingCenter = heading.x + heading.width / 2;
|
||||
const drift = Math.abs(logoCenter - headingCenter);
|
||||
// If drift > 300px, they're side by side (broken layout)
|
||||
expect(drift).toBeLessThan(300);
|
||||
}
|
||||
});
|
||||
|
||||
test('browser back button restores previous page content', async ({ page }) => {
|
||||
// Collect console errors
|
||||
test('clicking nav button navigates to new page', async ({ page }) => {
|
||||
const errors = [];
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error') errors.push(msg.text());
|
||||
@@ -123,89 +15,127 @@ test.describe('Client-side Navigation', () => {
|
||||
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Navigate forward to Hypermedia
|
||||
await page.click('a[href*="geography.(hypermedia"]:not([href*="example"])');
|
||||
// Click "Reactive Islands" nav link
|
||||
await page.click('a[href*="geography.(reactive)"]:not([href*="runtime"])');
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// Verify navigation worked — URL must contain hypermedia
|
||||
expect(page.url()).toContain('hypermedia');
|
||||
// Should have navigated — URL must contain reactive
|
||||
expect(page.url()).toContain('reactive');
|
||||
|
||||
// Go back
|
||||
await page.goBack();
|
||||
await page.waitForTimeout(3000);
|
||||
// Page should show Reactive Islands content
|
||||
const body = await page.textContent('body');
|
||||
expect(body).toContain('Reactive Islands');
|
||||
|
||||
// URL should return
|
||||
expect(page.url()).toContain('geography');
|
||||
expect(page.url()).not.toContain('hypermedia');
|
||||
|
||||
// Content MUST change back — the main heading should say Geography,
|
||||
// NOT still show Hypermedia content
|
||||
const heading = await page.locator('#main-panel h1, #main-panel h2').first();
|
||||
await expect(heading).toContainText('Geography', { timeout: 5000 });
|
||||
|
||||
// No JIT errors should have occurred during navigation
|
||||
const jitErrors = errors.filter(e => e.includes('Not callable: nil'));
|
||||
expect(jitErrors.length).toBe(0);
|
||||
// No SX evaluation errors
|
||||
const sxErrors = errors.filter(e => e.includes('Undefined symbol'));
|
||||
expect(sxErrors).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('back button preserves layout (no side-by-side)', async ({ page }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Navigate forward
|
||||
await page.click('a[href*="geography.(reactive"]:not([href*="runtime"])');
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// Go back
|
||||
await page.goBack();
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// Check layout is vertical — heading should be within top part of page
|
||||
const heading = await page.locator('h1, h2').first().boundingBox();
|
||||
if (heading) {
|
||||
expect(heading.y).toBeLessThan(500);
|
||||
const viewport = page.viewportSize();
|
||||
if (viewport) {
|
||||
expect(heading.x).toBeLessThan(viewport.width * 0.5);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test('no JIT errors during navigation', async ({ page }) => {
|
||||
test('clicking header logo navigates home', async ({ page }) => {
|
||||
const errors = [];
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error' && msg.text().includes('FAIL')) {
|
||||
errors.push(msg.text());
|
||||
}
|
||||
if (msg.type() === 'error') errors.push(msg.text());
|
||||
});
|
||||
|
||||
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Navigate
|
||||
await page.click('a[href*="geography.(hypermedia"]:not([href*="example"])');
|
||||
// Click the logo in the header island
|
||||
await page.click('[data-sx-island="layouts/header"] a[href="/sx/"]');
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// Check for JIT errors — these indicate broken CSSX function resolution
|
||||
const jitErrors = errors.filter(e => e.includes('Not callable: nil'));
|
||||
expect(jitErrors.length).toBe(0);
|
||||
// Should have navigated to home
|
||||
expect(page.url()).toMatch(/\/sx\/?$/);
|
||||
|
||||
// No SX evaluation errors
|
||||
const sxErrors = errors.filter(e => e.includes('Undefined symbol'));
|
||||
expect(sxErrors).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('full page width is used (no side-by-side split)', async ({ page }) => {
|
||||
test('back button works after navigation', async ({ page }) => {
|
||||
const errors = [];
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error') errors.push(msg.text());
|
||||
});
|
||||
|
||||
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Navigate to Reactive Islands
|
||||
await page.click('a[href*="geography.(reactive)"]:not([href*="runtime"])');
|
||||
await page.waitForTimeout(3000);
|
||||
expect(page.url()).toContain('reactive');
|
||||
|
||||
// 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');
|
||||
|
||||
// Geography heading should be visible
|
||||
const heading = await page.locator('h1, h2').first();
|
||||
await expect(heading).toContainText('Geography', { timeout: 5000 });
|
||||
|
||||
// No SX errors
|
||||
const sxErrors = errors.filter(e => e.includes('Undefined symbol'));
|
||||
expect(sxErrors).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('no console errors on page load', async ({ page }) => {
|
||||
const errors = [];
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error' && !msg.text().includes('404'))
|
||||
errors.push(msg.text());
|
||||
});
|
||||
|
||||
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// No JIT or SX errors
|
||||
const sxErrors = errors.filter(e =>
|
||||
e.includes('Undefined symbol') || e.includes('Not callable'));
|
||||
expect(sxErrors).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('copyright shows current route after SX navigation', async ({ page }) => {
|
||||
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' });
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// Mark the page to verify SX navigation (not full reload)
|
||||
await page.evaluate(() => window.__sx_nav_marker = true);
|
||||
|
||||
// Before: copyright shows the current path
|
||||
const before = await page.evaluate(() =>
|
||||
document.querySelector('[data-sx-lake="copyright"]')?.textContent);
|
||||
expect(before).toContain('/sx/');
|
||||
|
||||
// Navigate via SX (sx-get link)
|
||||
await page.click('a[sx-get*="(geography)"]');
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// Verify SX navigation (marker survives SX nav, lost on reload)
|
||||
const marker = await page.evaluate(() => window.__sx_nav_marker);
|
||||
expect(marker).toBe(true);
|
||||
|
||||
// After: copyright must still show a route path
|
||||
const after = await page.evaluate(() =>
|
||||
document.querySelector('[data-sx-lake="copyright"]')?.textContent);
|
||||
expect(after).toContain('geography');
|
||||
});
|
||||
|
||||
test('header island renders with SSR', async ({ page }) => {
|
||||
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
||||
|
||||
// Navigate to a child page
|
||||
await page.click('a[href*="reactive"]:not([href*="runtime"])');
|
||||
await page.waitForTimeout(3000);
|
||||
// Header should be visible
|
||||
const header = page.locator('[data-sx-island="layouts/header"]');
|
||||
await expect(header).toBeVisible();
|
||||
|
||||
// The main content area should use most of the viewport width
|
||||
const viewport = page.viewportSize();
|
||||
const content = await page.locator('h1, h2, [id="main-panel"]').first().boundingBox();
|
||||
// Should contain the logo
|
||||
await expect(header).toContainText('sx');
|
||||
|
||||
if (content && viewport) {
|
||||
// Content should not be squeezed to one side
|
||||
// It should start within the first 40% of viewport width
|
||||
expect(content.x).toBeLessThan(viewport.width * 0.4);
|
||||
}
|
||||
// Should contain copyright
|
||||
await expect(header).toContainText('Giles Bradshaw');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user