81 lines
3.9 KiB
JavaScript
81 lines
3.9 KiB
JavaScript
// Rôle : vérifie la réservation hybride, le redimensionnement et le mode mobile du drawer toolbox.
|
|
import { test, expect } from "@playwright/test";
|
|
|
|
async function openDrawer(page) {
|
|
await page.locator(".drawer-button").click();
|
|
const drawer = page.locator("#toolbox-drawer");
|
|
await expect(drawer.locator(".drawer-panel")).toBeVisible();
|
|
return drawer;
|
|
}
|
|
|
|
async function resizeDrawer(page, deltaX) {
|
|
const handle = page.locator(".drawer-resize-handle");
|
|
const bounds = await handle.boundingBox();
|
|
await page.mouse.move(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
|
|
await page.mouse.down();
|
|
await page.mouse.move(bounds.x + bounds.width / 2 + deltaX, bounds.y + bounds.height / 2);
|
|
await page.mouse.up();
|
|
}
|
|
|
|
test("drawer reserves 700px while additional width overlays the page", async ({ page }) => {
|
|
await page.setViewportSize({ width: 1280, height: 900 });
|
|
await page.goto("/#/games/mhwilds/monsters");
|
|
|
|
const drawer = await openDrawer(page);
|
|
const panel = drawer.locator(".drawer-panel");
|
|
const shell = page.locator(".app-shell");
|
|
const contentShell = page.locator(".content-shell");
|
|
const main = page.locator(".content-shell > main");
|
|
const sidebar = page.locator(".sidebar");
|
|
await expect(shell).toHaveClass(/toolbox-drawer-open/);
|
|
await expect(sidebar).toHaveAttribute("data-variant", "compact");
|
|
await expect(sidebar).toHaveCSS("width", "72px");
|
|
await expect(drawer.locator(".drawer-backdrop")).toHaveCount(0);
|
|
|
|
const contentBounds = await contentShell.boundingBox();
|
|
const initialPanelBounds = await panel.boundingBox();
|
|
const initialMainBounds = await main.boundingBox();
|
|
const topbarBounds = await page.locator(".topbar").boundingBox();
|
|
expect(initialPanelBounds.width).toBeCloseTo(700, 0);
|
|
expect(initialPanelBounds.x).toBeCloseTo(contentBounds.x + contentBounds.width - 700, 0);
|
|
expect(topbarBounds.x + topbarBounds.width).toBeCloseTo(1280, 0);
|
|
|
|
const search = page.locator(".nds-filter-search input").first();
|
|
await search.fill("rath");
|
|
await expect(search).toHaveValue("rath");
|
|
await expect(panel).toBeVisible();
|
|
|
|
await resizeDrawer(page, -100);
|
|
await expect.poll(async () => (await panel.boundingBox()).width).toBeCloseTo(800, 0);
|
|
const expandedPanelBounds = await panel.boundingBox();
|
|
const expandedMainBounds = await main.boundingBox();
|
|
expect(expandedPanelBounds.x).toBeCloseTo(initialPanelBounds.x - 100, 0);
|
|
expect(expandedMainBounds.x).toBeCloseTo(initialMainBounds.x, 0);
|
|
expect(expandedMainBounds.width).toBeCloseTo(initialMainBounds.width, 0);
|
|
expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(1280);
|
|
|
|
await resizeDrawer(page, 300);
|
|
await expect.poll(async () => (await panel.boundingBox()).width).toBeCloseTo(700, 0);
|
|
|
|
await resizeDrawer(page, -100);
|
|
await expect.poll(async () => (await panel.boundingBox()).width).toBeCloseTo(800, 0);
|
|
await drawer.getByRole("button", { name: "Fermer", exact: true }).click();
|
|
await expect(drawer).toHaveCount(0);
|
|
await expect(sidebar).not.toHaveAttribute("data-variant");
|
|
await expect(sidebar).toHaveCSS("width", "248px");
|
|
const reopenedDrawer = await openDrawer(page);
|
|
await expect.poll(async () => (await reopenedDrawer.locator(".drawer-panel").boundingBox()).width).toBeCloseTo(700, 0);
|
|
});
|
|
|
|
test("drawer becomes a non-resizable full-width overlay below 700px", async ({ page }) => {
|
|
await page.setViewportSize({ width: 390, height: 900 });
|
|
await page.goto("/#/games/mhwilds/monsters");
|
|
|
|
const drawer = await openDrawer(page);
|
|
const panel = drawer.locator(".drawer-panel");
|
|
const bounds = await panel.boundingBox();
|
|
expect(bounds.x).toBeCloseTo(0, 0);
|
|
expect(bounds.width).toBeCloseTo(390, 0);
|
|
await expect(drawer.locator(".drawer-resize-handle")).toHaveCSS("display", "none");
|
|
expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(390);
|
|
});
|