rose-ash/tests/playwright/reactive-nav.spec.js

// @ts-check
const { test, expect } = require('playwright/test');
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013';

test.describe('Reactive Island Navigation', () => {

  test('counter island works on direct load', async ({ page }) => {
    await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'networkidle' });
    await page.waitForTimeout(2000);

    const island = page.locator('[data-sx-island*="counter"]');
    await expect(island).toBeVisible({ timeout: 10000 });

    const buttons = island.locator('button');
    await expect(buttons).toHaveCount(2, { timeout: 5000 });

    const textBefore = await island.textContent();
    await buttons.last().click();
    await page.waitForTimeout(500);
    const textAfter = await island.textContent();
    expect(textAfter).not.toBe(textBefore);
  });

  test('temperature island works on direct load', async ({ page }) => {
    await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.temperature)))', { waitUntil: 'networkidle' });
    await page.waitForTimeout(2000);

    const island = page.locator('[data-sx-island*="temperature"]');
    await expect(island).toBeVisible({ timeout: 10000 });

    // Temperature demo should have an input or interactive element
    const inputs = island.locator('input');
    const buttons = island.locator('button');
    const interactive = (await inputs.count()) + (await buttons.count());
    expect(interactive).toBeGreaterThan(0);
  });

  test('counter → temperature navigation: temperature island is reactive', async ({ page }) => {
    // Step 1: Load counter page directly (full page load)
    await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'networkidle' });
    await page.waitForTimeout(2000);

    // Verify counter works
    const counter = page.locator('[data-sx-island*="counter"]');
    await expect(counter).toBeVisible({ timeout: 10000 });

    // Step 2: Navigate to temperature via client-side link
    const tempLink = page.locator('a[href*="temperature"]').first();
    if (await tempLink.count() === 0) {
      // No link found — try sidebar or nav
      const anyTempLink = page.locator('a').filter({ hasText: /temperature/i }).first();
      if (await anyTempLink.count() > 0) {
        await anyTempLink.click();
      } else {
        // Fall back to evaluating navigation
        await page.evaluate((url) => {
          const a = document.querySelector('a[href*="temperature"]');
          if (a) a.click();
          else window.location.href = url;
        }, '/sx/(geography.(reactive.(examples.temperature)))');
      }
    } else {
      await tempLink.click();
    }

    await page.waitForTimeout(3000);

    // Step 3: Temperature island should exist and be reactive
    const tempIsland = page.locator('[data-sx-island*="temperature"]');
    await expect(tempIsland).toBeVisible({ timeout: 10000 });

    // Step 4: Interact and verify reactivity
    const inputs = tempIsland.locator('input');
    if (await inputs.count() > 0) {
      const input = inputs.first();
      const textBefore = await tempIsland.textContent();
      await input.fill('100');
      await input.press('Enter');
      await page.waitForTimeout(500);
      const textAfter = await tempIsland.textContent();
      expect(textAfter).not.toBe(textBefore);
    } else {
      const buttons = tempIsland.locator('button');
      if (await buttons.count() > 0) {
        const textBefore = await tempIsland.textContent();
        await buttons.first().click();
        await page.waitForTimeout(500);
        const textAfter = await tempIsland.textContent();
        expect(textAfter).not.toBe(textBefore);
      }
    }
  });

  test('temperature → counter navigation: counter island is reactive', async ({ page }) => {
    // Start on temperature
    await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.temperature)))', { waitUntil: 'networkidle' });
    await page.waitForTimeout(2000);

    // Navigate to counter
    const counterLink = page.locator('a[href*="counter"]').first();
    if (await counterLink.count() > 0) {
      await counterLink.click();
    } else {
      await page.evaluate(() => {
        const a = document.querySelector('a[href*="counter"]');
        if (a) a.click();
      });
    }
    await page.waitForTimeout(3000);

    // Counter island should be reactive
    const counter = page.locator('[data-sx-island*="counter"]');
    await expect(counter).toBeVisible({ timeout: 10000 });

    const buttons = counter.locator('button');
    await expect(buttons).toHaveCount(2, { timeout: 5000 });

    const textBefore = await counter.textContent();
    await buttons.last().click();
    await page.waitForTimeout(500);
    const textAfter = await counter.textContent();
    expect(textAfter).not.toBe(textBefore);
  });

  test('no JS errors during reactive navigation', async ({ page }) => {
    const errors = [];
    page.on('pageerror', err => errors.push(err.message));

    await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'networkidle' });
    await page.waitForTimeout(2000);

    // Navigate to temperature
    const link = page.locator('a[href*="temperature"]').first();
    if (await link.count() > 0) await link.click();
    await page.waitForTimeout(3000);

    const real_errors = errors.filter(e =>
      !e.includes('Failed to fetch') && !e.includes('net::ERR')
    );
    expect(real_errors).toEqual([]);
  });
});