sokko-g/e2e/toolbox-drawer-layout.spec.js

// 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) {
  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();
  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;
}

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("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);
  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(1440, 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(1440);

  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(page.getByRole("button", { name: "Afficher la toolbox", exact: true })).toHaveAttribute("aria-pressed", "false");
  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("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(72, 0);
  expect(bounds.width).toBeCloseTo(888, 0);
  await expect(drawer.locator(".drawer-resize-handle")).toHaveCSS("display", "none");
  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);
});