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

    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(300);
    expect(await island.textContent()).not.toBe(textBefore);
  });

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

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

    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: temperature island is reactive after SPA nav', async ({ page }) => {
    await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'networkidle' });

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

    // Navigate to temperature via link
    const tempLink = page.locator('a[href*="temperature"]').first();
    if (await tempLink.count() > 0) {
      await tempLink.click();
    } else {
      await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.temperature)))', { waitUntil: 'networkidle' });
    }

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

    const buttons = tempIsland.locator('button');
    if (await buttons.count() > 0) {
      const textBefore = await tempIsland.textContent();
      await buttons.first().click();
      await page.waitForTimeout(300);
      expect(await tempIsland.textContent()).not.toBe(textBefore);
    }
  });

  test('temperature → counter: counter island is reactive after SPA nav', async ({ page }) => {
    await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.temperature)))', { waitUntil: 'networkidle' });

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

    const counterLink = page.locator('a[href*="counter"]').first();
    if (await counterLink.count() > 0) {
      await counterLink.click();
    } else {
      await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'networkidle' });
    }

    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(300);
    expect(await counter.textContent()).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' });

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

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