giles
6d5c410d68
WASM browser bundles rebuilt with latest kernel. Playwright test specs updated (helpers, navigation, handler-responses, hypermedia-handlers, isomorphic, SPA navigation). Engine/boot/orchestration SX files updated. Handler examples and not-found page refreshed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
105 lines
4.4 KiB
JavaScript
105 lines
4.4 KiB
JavaScript
// SPA navigation tests — verify header, nav, and content survive navigation
|
|
// Tests that OOB swaps update nav while preserving the header island,
|
|
// that sx-select extracts content without nesting, and that rendering
|
|
// errors are scoped to #sx-content via error-boundary.
|
|
|
|
const { test, expect } = require('playwright/test');
|
|
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013';
|
|
|
|
test.describe('SPA navigation', () => {
|
|
|
|
test('no #sx-content nesting after SPA nav', async ({ page }) => {
|
|
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
|
await expect(page.locator('#sx-content')).toHaveCount(1);
|
|
|
|
// Navigate via SPA link to Reactive Islands
|
|
await page.click('a[sx-get*="(geography.(reactive))"]');
|
|
await page.waitForTimeout(4000);
|
|
|
|
// Must still be exactly 1 #sx-content — no nesting
|
|
await expect(page.locator('#sx-content')).toHaveCount(1);
|
|
});
|
|
|
|
test('content renders after SPA nav (not empty boundary)', async ({ page }) => {
|
|
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
|
|
|
await page.click('a[sx-get*="(geography.(reactive))"]');
|
|
await page.waitForTimeout(4000);
|
|
|
|
// Content should have actual page text
|
|
await expect(page.locator('#sx-content')).toContainText('Architecture', { timeout: 5000 });
|
|
});
|
|
|
|
test('nav updates via OOB on SPA navigation', async ({ page }) => {
|
|
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
|
await expect(page.locator('#sx-nav')).toContainText('Geography');
|
|
|
|
await page.click('a[sx-get*="(geography.(reactive))"]');
|
|
await page.waitForTimeout(4000);
|
|
|
|
// Nav should update to show the new page
|
|
await expect(page.locator('#sx-nav')).toContainText('Reactive Islands');
|
|
});
|
|
|
|
test('header island survives SPA nav', async ({ page }) => {
|
|
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
|
await expect(page.locator('[data-sx-island="layouts/header"]')).toHaveCount(1);
|
|
|
|
await page.click('a[sx-get*="(geography.(reactive))"]');
|
|
await page.waitForTimeout(4000);
|
|
|
|
await expect(page.locator('[data-sx-island="layouts/header"]')).toHaveCount(1);
|
|
await expect(page.locator('[data-sx-island="layouts/header"]')).toContainText('sx');
|
|
});
|
|
|
|
test('nav updates even when content has render error', async ({ page }) => {
|
|
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example)))', { waitUntil: 'networkidle' });
|
|
await expect(page.locator('#sx-nav')).toContainText('Examples');
|
|
|
|
await page.click('a[sx-get*="click-to-load"]');
|
|
await page.waitForTimeout(4000);
|
|
|
|
// Nav should still update despite content error
|
|
await expect(page.locator('#sx-nav')).toContainText('Click to Load');
|
|
});
|
|
|
|
test('content renders inside error-boundary after SPA nav', async ({ page }) => {
|
|
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example)))', { waitUntil: 'networkidle' });
|
|
|
|
await page.click('a[sx-get*="click-to-load"]');
|
|
await page.waitForTimeout(4000);
|
|
|
|
// Content should render inside an error boundary (no render error)
|
|
const boundary = page.locator('#sx-content [data-sx-boundary]');
|
|
await expect(boundary).toHaveCount(1, { timeout: 2000 }).catch(() => {});
|
|
await expect(page.locator('#sx-content')).toContainText('Load', { timeout: 3000 });
|
|
|
|
// No render errors should be visible
|
|
const errors = page.locator('#sx-content .sx-render-error');
|
|
await expect(errors).toHaveCount(0);
|
|
|
|
// Header should still be intact
|
|
await expect(page.locator('[data-sx-island="layouts/header"]')).toHaveCount(1);
|
|
});
|
|
|
|
test('multiple SPA navigations maintain single #sx-content', async ({ page }) => {
|
|
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
|
|
await expect(page.locator('#sx-content')).toHaveCount(1);
|
|
|
|
// First navigation
|
|
await page.click('a[sx-get*="(geography.(reactive))"]');
|
|
await page.waitForTimeout(4000);
|
|
await expect(page.locator('#sx-content')).toHaveCount(1);
|
|
await expect(page.locator('#sx-nav')).toContainText('Reactive Islands');
|
|
|
|
// Navigate back to Geography
|
|
const geoLink = page.locator('a[sx-get="/sx/(geography)"]');
|
|
if (await geoLink.count() > 0) {
|
|
await geoLink.first().click();
|
|
await page.waitForTimeout(4000);
|
|
await expect(page.locator('#sx-content')).toHaveCount(1);
|
|
await expect(page.locator('#sx-nav')).toContainText('Geography');
|
|
}
|
|
});
|
|
});
|