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('browser back button works after navigation', async ({ page }) => {
    await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
    await page.waitForTimeout(2000);

    // Get initial content
    const initialContent = await page.locator('#main-panel').textContent();
    expect(initialContent).toContain('Geography');

    // Navigate forward to Hypermedia
    await page.click('a[href*="geography.(hypermedia"]:not([href*="example"])');
    await page.waitForTimeout(3000);

    // Verify we navigated — content should be different
    const navContent = await page.locator('#main-panel').textContent();
    expect(navContent).toContain('Hypermedia');
    expect(page.url()).toContain('hypermedia');

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

    // Content should return to Geography — not stay on Hypermedia
    const backContent = await page.locator('#main-panel').textContent();
    expect(backContent).toContain('Geography');
    expect(backContent).toContain('Rendering Pipeline');
    // Should NOT still show Hypermedia content
    expect(page.url()).toContain('geography');
    expect(page.url()).not.toContain('hypermedia');
  });

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