test: spec E2E mobile pour la page Configurations BUG-071

2026-09-22 22:03:42 -04:00
parent dd9224e685
commit 8ad8eaac71
11 changed files with 122 additions and 14 deletions
@@ -0,0 +1,94 @@
+/**
+ * E2E tests for the Configurations modal on mobile (BUG-071).
+ *
+ * Runs only under the `chromium-mobile` Playwright project (viewport ≤ 768px);
+ * skipped on the desktop project that the CI job executes — same convention
+ * as mobile-editor.spec.js.
+ *
+ * Covered:
+ *  - the TOC hamburger (#config-hamburger) is visible and reveals #config-nav,
+ *    which is hidden by default on mobile;
+ *  - picking a TOC entry scrolls to the section, marks the link active and
+ *    collapses the nav;
+ *  - the modal content does not overflow horizontally at 393px.
+ *
+ * Run:
+ *   npx playwright test tests/e2e/config-mobile.spec.js --project=chromium-mobile
+ *   (ObsiGate listening on http://localhost:2029, auth disabled)
+ */
+
+import { test, expect } from '@playwright/test';
+
+const MOBILE_MAX_WIDTH = 768;
+
+async function boot(page) {
+  await page.goto('/');
+  await page.waitForSelector('#app:not(.hidden)', { timeout: 15000 });
+  await expect(page.locator('#header-menu-btn')).toBeVisible({ timeout: 15000 });
+}
+
+async function openConfigModal(page) {
+  await page.locator('#header-menu-btn').click();
+  await page.locator('#config-open-btn').click();
+  await expect(page.locator('#config-modal.active')).toBeVisible();
+}
+
+test.describe('Configurations modal on mobile (BUG-071)', () => {
+  test('hamburger reveals the table of contents', async ({ page, viewport }) => {
+    test.skip((viewport?.width ?? 0) > MOBILE_MAX_WIDTH, 'Mobile viewport required');
+    await boot(page);
+    await openConfigModal(page);
+
+    // TOC hidden by default on mobile, hamburger visible.
+    await expect(page.locator('#config-hamburger')).toBeVisible();
+    await expect(page.locator('#config-nav')).toBeHidden();
+
+    await page.locator('#config-hamburger').click();
+    await expect(page.locator('#config-nav')).toBeVisible();
+  });
+
+  test('picking a section scrolls to it and collapses the nav', async ({ page, viewport }) => {
+    test.skip((viewport?.width ?? 0) > MOBILE_MAX_WIDTH, 'Mobile viewport required');
+    await boot(page);
+    await openConfigModal(page);
+
+    await page.locator('#config-hamburger').click();
+    const link = page.locator('#config-nav a[href="#cfg-tokens"]');
+    await expect(link).toBeVisible();
+    await link.click();
+
+    // Nav collapses on mobile after selection…
+    await expect(page.locator('#config-nav')).toBeHidden();
+    // …the link is marked active…
+    await expect(link).toHaveClass(/active/);
+    // …and the section scrolls into view inside the modal (smooth scroll:
+    // poll for the settled position instead of racing the animation).
+    await expect
+      .poll(
+        async () => {
+          const box = await page.locator('#cfg-tokens').boundingBox();
+          const modalBox = await page.locator('#config-modal').boundingBox();
+          if (!box || !modalBox) return Number.POSITIVE_INFINITY;
+          return box.y - (modalBox.y + modalBox.height);
+        },
+        { timeout: 8000 },
+      )
+      .toBeLessThanOrEqual(0);
+  });
+
+  test('no horizontal overflow at 393px', async ({ page, viewport }) => {
+    test.skip((viewport?.width ?? 0) > MOBILE_MAX_WIDTH, 'Mobile viewport required');
+    await boot(page);
+    await openConfigModal(page);
+
+    for (const section of ['#cfg-ai', '#cfg-tokens', '#cfg-webhooks', '#cfg-partages-publics']) {
+      await page.locator('#config-hamburger').click();
+      await page.locator(`#config-nav a[href="${section}"]`).click();
+    }
+    const overflow = await page.evaluate(() => {
+      const scroller = document.getElementById('config-scroll');
+      return scroller.scrollWidth - scroller.clientWidth;
+    });
+    expect(overflow).toBeLessThanOrEqual(1);
+  });
+});