rose-ash/tests/playwright/navigation.spec.js

// 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('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
    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 forward to Hypermedia
    await page.click('a[href*="geography.(hypermedia"]:not([href*="example"])');
    await page.waitForTimeout(3000);

    // Verify navigation worked — URL must contain hypermedia
    expect(page.url()).toContain('hypermedia');

    // Go back
    await page.goBack();
    await page.waitForTimeout(3000);

    // 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);
  });

  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 }) => {
    const errors = [];
    page.on('console', msg => {
      if (msg.type() === 'error' && msg.text().includes('FAIL')) {
        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"])');
    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);
  });

  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);
    }
  });
});