import { expect, test } from '@playwright/test';

declare global {
  interface Window {
    c: { next(): void; readonly index: number };
  }
}

const scrollLeft = () => document.getElementById('t')?.scrollLeft ?? 0;

test('next() scrolls the track and updates index', async ({ page }) => {
  await page.goto('/e2e/demo.html');
  const before = await page.evaluate(scrollLeft);
  await page.evaluate(() => window.c.next());
  await page.waitForTimeout(500); // smooth scroll settle
  const after = await page.evaluate(scrollLeft);
  expect(after).toBeGreaterThan(before);
  await expect.poll(() => page.evaluate(() => window.c.index)).toBe(1);
});

test('clicking a dot navigates (fallback path on Firefox)', async ({ page, browserName }) => {
  // dots() self-gates: on Chromium native ::scroll-marker is present, so it no-ops.
  // Firefox lacks native markers — the JS fallback is the path that must pass.
  test.skip(browserName !== 'firefox', 'dots() no-ops where native ::scroll-marker exists');
  await page.goto('/e2e/demo.html');
  await page.locator('#dots button').nth(2).click();
  await page.waitForTimeout(500);
  await expect.poll(() => page.evaluate(() => window.c.index)).toBe(2);
});