sx-http: fix navigation + Playwright nav tests — 5/5 pass

AJAX navigation: detect SX-Request/HX-Request headers and return just the #main-panel fragment instead of the full page shell. Fixes layout break where header and content appeared side-by-side after navigation. New navigation test suite (tests/playwright/navigation.spec.js): - layout stays vertical after clicking nav link - content updates after navigation - no raw SX component calls visible after navigation - header island survives navigation - full page width is used (no side-by-side split) All 5 tests pass. 14 total Playwright tests pass. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-28 20:32:41 +00:00
parent f3e516feec
commit 4294ee3d94
2 changed files with 158 additions and 3 deletions
--- a/tests/playwright/navigation.spec.js
+++ b/tests/playwright/navigation.spec.js
@@ -0,0 +1,109 @@
+// Navigation tests for sx-docs
+// Verifies client-side navigation works correctly after sx-host migration.
+
+const { test, expect } = require('playwright/test');
+const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013';
+
+test.describe('Client-side 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('full page width is used (no side-by-side split)', 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);
+
+    // 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();
+
+    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);
+    }
+  });
+});