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

// Navigation tests for sx-docs
// Verifies navigation works correctly with the OCaml sx-host.

const { test, expect } = require('playwright/test');
const { BASE_URL, waitForSxReady, loadPage } = require('./helpers');

test.describe('Page Navigation', () => {

  test('clicking nav button navigates to new page', async ({ page }) => {
    const errors = [];
    page.on('console', msg => {
      if (msg.type() === 'error') errors.push(msg.text());
    });

    await loadPage(page, '(geography)');

    // Click "Reactive Islands" nav link
    await page.click('a[href*="geography.(reactive)"]:not([href*="runtime"])');
    await expect(page).toHaveURL(/reactive/, { timeout: 5000 });

    // Page should show Reactive Islands content
    const body = await page.textContent('body');
    expect(body).toContain('Reactive Islands');

    // No SX evaluation errors
    const sxErrors = errors.filter(e => e.includes('Undefined symbol'));
    expect(sxErrors).toHaveLength(0);
  });

  test('clicking header logo navigates home', async ({ page }) => {
    const errors = [];
    page.on('console', msg => {
      if (msg.type() === 'error') errors.push(msg.text());
    });

    await loadPage(page, '(geography)');

    // Click the logo in the header island
    await page.click('[data-sx-island="layouts/header"] a[href="/sx/"]');
    await expect(page).toHaveURL(/\/sx\/?$/, { timeout: 5000 });

    // No SX evaluation errors
    const sxErrors = errors.filter(e => e.includes('Undefined symbol'));
    expect(sxErrors).toHaveLength(0);
  });

  test('back button works after navigation', async ({ page }) => {
    const errors = [];
    page.on('console', msg => {
      if (msg.type() === 'error') errors.push(msg.text());
    });

    await loadPage(page, '(geography)');

    // Navigate to Reactive Islands
    await page.click('a[href*="geography.(reactive)"]:not([href*="runtime"])');
    await expect(page).toHaveURL(/reactive/, { timeout: 5000 });

    // Go back
    await page.goBack();
    await expect(page).toHaveURL(/geography/, { timeout: 5000 });
    await expect(page).not.toHaveURL(/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 loadPage(page, '(geography)');

    // 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 loadPage(page, '');

    // 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 expect(page).toHaveURL(/geography/, { timeout: 5000 });

    // 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('stepper persists index across navigation', async ({ page }) => {
    await loadPage(page, '');

    // Get the initial stepper index
    const getIndex = () => page.evaluate(() => {
      const el = document.querySelector('[data-sx-island="home/stepper"]');
      const m = el && el.textContent.match(/(\d+)\s*\/\s*\d+/);
      return m ? parseInt(m[1]) : null;
    });

    const initial = await getIndex();
    expect(initial).not.toBeNull();

    // Advance the stepper
    await page.evaluate(() => {
      const btns = document.querySelectorAll('[data-sx-island="home/stepper"] button');
      if (btns.length >= 2) btns[1].click();  // next button
    });
    await page.waitForTimeout(300);

    const advanced = await getIndex();
    expect(advanced).toBe(initial + 1);

    // Navigate away
    await page.click('a[sx-get*="(geography)"]');
    await expect(page).toHaveURL(/geography/, { timeout: 5000 });

    // Navigate back home
    await page.evaluate(() => {
      const link = document.querySelector('a[sx-get*="/sx/"]');
      if (link) link.click();
    });
    await expect(page).toHaveURL(/\/sx\/?$/, { timeout: 5000 });

    // Stepper should still show the advanced index
    const afterNav = await getIndex();
    expect(afterNav).toBe(advanced);
  });

  test('sx-get link fetches SX not HTML and preserves layout', async ({ page }) => {
    await loadPage(page, '');

    // Mark page so we can detect full reload vs SPA nav
    await page.evaluate(() => window.__spa_marker = true);

    // Click a nav link (Geography)
    await page.click('a[sx-get*="(geography)"]');
    await expect(page).toHaveURL(/geography/, { timeout: 5000 });

    // Must be SPA navigation — marker survives (full reload clears it)
    const marker = await page.evaluate(() => window.__spa_marker);
    expect(marker).toBe(true);

    // After navigation, #sx-nav and #main-content should still be
    // vertically stacked (not side-by-side). Check that nav is above content.
    const layout = await page.evaluate(() => {
      const nav = document.querySelector('#sx-nav');
      const main = document.querySelector('#main-content, #main-panel');
      if (!nav || !main) return { error: 'missing elements', nav: !!nav, main: !!main };
      const navRect = nav.getBoundingClientRect();
      const mainRect = main.getBoundingClientRect();
      return {
        navBottom: navRect.bottom,
        mainTop: mainRect.top,
        navRight: navRect.right,
        mainLeft: mainRect.left,
        // Nav should end before main starts (vertically stacked)
        verticallyStacked: navRect.bottom <= mainRect.top + 5,
        // Nav and main should overlap horizontally (not side-by-side)
        horizontalOverlap: navRect.left < mainRect.right && mainRect.left < navRect.right
      };
    });
    expect(layout.verticallyStacked).toBe(true);
    expect(layout.horizontalOverlap).toBe(true);
  });

  test('header island renders with SSR', async ({ page }) => {
    await loadPage(page, '(geography)');

    // Header should be visible
    const header = page.locator('[data-sx-island="layouts/header"]');
    await expect(header).toBeVisible();

    // Should contain the logo
    await expect(header).toContainText('sx');

    // Should contain copyright
    await expect(header).toContainText('Giles Bradshaw');
  });
});