test: playwright smoke (chromium + firefox) for real scroll and dots fallback

2026-07-01 08:14:39 +03:00
parent 834a7ac371
commit 9fe3172ef4
3 changed files with 70 additions and 0 deletions
@@ -0,0 +1,20 @@
+<!doctype html>
+<link rel="stylesheet" href="../src/carousel.css" />
+<div class="track" id="t" style="width:300px">
+  <div class="slide" id="s0">0</div>
+  <div class="slide" id="s1">1</div>
+  <div class="slide" id="s2">2</div>
+</div>
+<div id="dots">
+  <button type="button" aria-label="Slide 1"></button>
+  <button type="button" aria-label="Slide 2"></button>
+  <button type="button" aria-label="Slide 3"></button>
+</div>
+<script type="module">
+  import { dots } from '../dist/dots.js';
+  import { createCarousel } from '../dist/index.js';
+
+  const c = createCarousel(document.getElementById('t'));
+  dots(c, document.getElementById('dots'));
+  window.c = c;
+</script>
@@ -0,0 +1,29 @@
+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);
+});