30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
|
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);
|
||
|
|
});
|