2026-07-01 06:30:09 +00:00
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);
+});
@@ -0,0 +1,21 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const isCI = !!process.env.CI;
+
+export default defineConfig({
+  testDir: 'e2e',
+  testMatch: /.*\.test\.ts$/,
+  forbidOnly: isCI,
+  retries: isCI ? 2 : 0,
+  reporter: isCI ? [['html', { open: 'never' }], ['github']] : [['list']],
+  use: { baseURL: 'http://localhost:5173' },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+  ],
+  webServer: {
+    command: 'yarn dlx http-server . -p 5173 -s',
+    port: 5173,
+    reuseExistingServer: !isCI,
+  },
+});