95 lines
3.6 KiB
JavaScript
95 lines
3.6 KiB
JavaScript
/**
|
|
* 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);
|
|
});
|
|
});
|