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);
 });
@@ -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,
  },
 });