shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refocus responsive layouts on compact desktop use
All checks were successful
Deploy Sokko G / deploy (push) Successful in 19s
Details

Browse source
This commit is contained in:
Shinuwa 2026-10-05 15:47:46 +02:00
parent 96d058293d
commit 0ac1a0974e
27 changed files with 610 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

69
e2e/toolbox-drawer-layout.spec.js
View file

@ -1,11 +1,16 @@
// Rôle : vérifie la réservation hybride, le redimensionnement et le mode mobile du drawer toolbox.
// Rôle : vérifie le panneau large et la bascule guide/toolbox en fenêtre compacte.
import { test, expect } from "@playwright/test";
async function openDrawer(page) {
const trigger = page.getByRole("button", { name: "Afficher la toolbox", exact: true });
await page.locator(".topbar-actions").waitFor();
const compactTrigger = page.getByRole("tab", { name: "Toolbox", exact: true });
const trigger = await compactTrigger.isVisible()
? compactTrigger
: page.getByRole("button", { name: "Afficher la toolbox", exact: true });
await expect(trigger).toBeVisible();
await trigger.click();
await expect(page.getByRole("button", { name: "Masquer la toolbox", exact: true })).toHaveAttribute("aria-pressed", "true");
if (await compactTrigger.isVisible()) await expect(compactTrigger).toHaveAttribute("aria-selected", "true");
else await expect(page.getByRole("button", { name: "Masquer la toolbox", exact: true })).toHaveAttribute("aria-pressed", "true");
const drawer = page.locator("#toolbox-drawer");
await expect(drawer.locator(".drawer-panel")).toBeVisible();
return drawer;
@ -20,8 +25,8 @@ async function resizeDrawer(page, deltaX) {
await page.mouse.up();
}
test("drawer reserves 700px while additional width overlays the page", async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 900 });
test("wide drawer reserves 700px while additional width overlays the page", async ({ page }) => {
await page.setViewportSize({ width: 1440, height: 900 });
await page.goto("/#/games/mhwilds/monsters");
const drawer = await openDrawer(page);
@ -41,7 +46,7 @@ test("drawer reserves 700px while additional width overlays the page", async ({
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);
expect(topbarBounds.x + topbarBounds.width).toBeCloseTo(1440, 0);
const search = page.locator(".nds-filter-search input").first();
await search.fill("rath");
@ -55,7 +60,7 @@ test("drawer reserves 700px while additional width overlays the page", async ({
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);
expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(1440);
await resizeDrawer(page, 300);
await expect.poll(async () => (await panel.boundingBox()).width).toBeCloseTo(700, 0);
@ -71,15 +76,55 @@ test("drawer reserves 700px while additional width overlays the page", async ({
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 });
test("compact game view switches between mounted guide and toolbox", async ({ page }) => {
await page.setViewportSize({ width: 960, height: 720 });
await page.goto("/#/games/mhwilds/monsters");
const guide = page.locator(".route-content-view");
const search = page.locator(".nds-filter-search input").first();
await search.fill("rath");
await page.evaluate(() => globalThis.window.scrollTo(0, 240));
const guideScroll = await page.evaluate(() => globalThis.window.scrollY);
const viewSwitch = page.locator(".compact-game-view-switch");
const guideTab = page.getByRole("tab", { name: "Guide" });
const toolboxTab = page.getByRole("tab", { name: "Toolbox", exact: true });
await expect(guideTab).toHaveAttribute("aria-selected", "true");
await expect(viewSwitch).toHaveCSS("min-width", "184px");
await expect(guideTab).toHaveCSS("min-height", "34px");
await expect(toolboxTab).toHaveCSS("padding-left", "10px");
const [guideBounds, toolboxBounds] = await Promise.all([guideTab.boundingBox(), toolboxTab.boundingBox()]);
expect(guideBounds.width).toBeCloseTo(toolboxBounds.width, 0);
await expect(guide).toBeVisible();
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);
expect(bounds.x).toBeCloseTo(72, 0);
expect(bounds.width).toBeCloseTo(888, 0);
await expect(drawer.locator(".drawer-resize-handle")).toHaveCSS("display", "none");
expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(390);
await expect(toolboxTab).toHaveAttribute("aria-selected", "true");
await expect(guide).toBeHidden();
await guideTab.click();
await expect(guide).toBeVisible();
await expect(drawer).toBeHidden();
await expect(drawer).toHaveCount(1);
await expect(search).toHaveValue("rath");
await expect.poll(() => page.evaluate(() => globalThis.window.scrollY)).toBe(guideScroll);
expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(960);
});
test("compact toolbox intent survives the 1440px transition", async ({ page }) => {
await page.setViewportSize({ width: 1439, height: 720 });
await page.goto("/#/games/mhwilds/monsters");
await openDrawer(page);
await page.setViewportSize({ width: 1440, height: 720 });
const drawer = page.locator("#toolbox-drawer");
await expect(drawer.locator(".drawer-panel")).toBeVisible();
await expect(drawer.locator(".drawer-panel")).toHaveCSS("width", "700px");
await expect(page.locator(".app-shell")).toHaveClass(/toolbox-drawer-open/);
await expect(page.getByRole("button", { name: "Masquer la toolbox", exact: true })).toBeFocused();
await page.setViewportSize({ width: 1439, height: 720 });
await page.getByRole("tab", { name: "Guide" }).click();
await page.setViewportSize({ width: 1440, height: 720 });
await expect(drawer).toHaveCount(0);
});