Add toolbox spaces and recover from stale asset bundles

e2e/toolbox-spaces.spec.js

@@ -0,0 +1,148 @@
+// Rôle : vérifie la gestion, la limite et les déplacements entre espaces toolbox.
+import { expect, test } from "@playwright/test";
+import { resetSokkoStorage } from "./helpers/storage.js";
+
+async function seedToolbox(page, toolbox, links = {}) {
+  await resetSokkoStorage(page);
+  await page.evaluate(async ({ value, links }) => {
+    const db = await import("/src/utils/indexedDbStorage.js");
+    await db.setToolboxSnapshot([value], links, {});
+  }, { value: toolbox, links });
+  await page.goto(`/#/toolbox/${toolbox.id}`);
+  await page.reload();
+}
+
+async function addSpace(page, name) {
+  await page.getByRole("button", { name: "Nouvel espace", exact: true }).click();
+  const dialog = page.getByRole("dialog", { name: "Créer un espace" });
+  await dialog.getByLabel("Nom").fill(name);
+  await dialog.getByRole("button", { name: "Enregistrer" }).click();
+}
+
+async function dragModuleToTab(page, title, tab, hoverMs = 0) {
+  await page.getByRole("button", { name: `Déplacer ${title}`, exact: true }).hover();
+  await page.mouse.down();
+  const box = await tab.boundingBox();
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, { steps: 4 });
+  if (hoverMs) await page.waitForTimeout(hoverMs);
+  await page.mouse.up();
+}
+
+test("creates at most five spaces and moves tools with the accessible selector", async ({ page }) => {
+  await seedToolbox(page, {
+    id: "spaces",
+    name: "Spaces",
+    modules: [{ id: "a", type: "counters", title: "Alpha" }],
+    moduleOrder: { one: ["a"], two: [["a"], []] }
+  });
+
+  await expect(page.getByRole("tab")).toHaveCount(0);
+  await addSpace(page, "Boss");
+  const compactAddButton = page.getByRole("button", { name: "Nouvel espace", exact: true });
+  await expect(compactAddButton).toHaveClass(/toolbox-space-add-compact/);
+  await expect(compactAddButton).not.toContainText("Nouvel espace");
+  for (const name of ["Farm", "Build", "Notes"]) await addSpace(page, name);
+  await expect(page.getByRole("tab")).toHaveCount(5);
+  await expect(page.getByRole("button", { name: "Limite de 5 espaces atteinte" })).toBeDisabled();
+
+  await page.getByRole("button", { name: "Renommer l’espace actif" }).click();
+  const renameDialog = page.getByRole("dialog", { name: "Renommer l’espace" });
+  await renameDialog.getByLabel("Nom").fill("Divers");
+  await renameDialog.getByRole("button", { name: "Enregistrer" }).click();
+  await expect(page.getByRole("tab", { name: "Divers" })).toHaveAttribute("aria-selected", "true");
+
+  await page.getByRole("tab", { name: "Défaut" }).click();
+  await page.getByRole("combobox", { name: "Déplacer vers… — Alpha" }).selectOption({ label: "Divers" });
+  await expect(page.locator("[data-module-id='a']")).toHaveCount(0);
+  await page.getByRole("tab", { name: "Divers" }).click();
+  await expect(page.locator("[data-module-id='a']")).toBeVisible();
+
+  await page.getByRole("button", { name: "Supprimer l’espace actif" }).click();
+  await page.getByRole("dialog", { name: "Supprimer l’espace" }).getByRole("button", { name: "Supprimer l’espace actif" }).click();
+  await expect(page.getByRole("button", { name: "Nouvel espace" })).toBeEnabled();
+  await expect(page.getByRole("tab", { name: "Défaut" })).toHaveAttribute("aria-selected", "true");
+  await expect(page.locator("[data-module-id='a']")).toBeVisible();
+  await page.reload();
+  await expect(page.getByRole("tab", { name: "Défaut" })).toHaveAttribute("aria-selected", "true");
+});
+
+test("shows the tab insertion indicator on the correct side while reordering", async ({ page }) => {
+  await seedToolbox(page, {
+    id: "reorder-spaces",
+    name: "Reorder spaces",
+    modules: [],
+    spaces: [
+      { id: "default", name: "Défaut", moduleOrder: { one: [], two: [[], []] } },
+      { id: "boss", name: "Boss", moduleOrder: { one: [], two: [[], []] } },
+      { id: "farm", name: "Farm", moduleOrder: { one: [], two: [[], []] } }
+    ],
+    defaultSpaceId: "default",
+    activeSpaceId: "default"
+  });
+
+  const farmTabWrap = page.getByRole("tab", { name: "Farm" }).locator("..");
+  const farmBox = await farmTabWrap.boundingBox();
+  const bossDragHandle = page.getByRole("button", { name: "Réordonner l’espace Boss" });
+  await expect.poll(() => bossDragHandle.evaluate((element) => globalThis.getComputedStyle(element).marginLeft)).toBe("4px");
+  await bossDragHandle.hover();
+  await page.mouse.down();
+  await page.mouse.move(farmBox.x + farmBox.width - 2, farmBox.y + farmBox.height / 2, { steps: 4 });
+  await expect(farmTabWrap).toHaveClass(/is-drop-target/);
+  await expect(farmTabWrap).toHaveClass(/drop-after/);
+  await expect.poll(() => farmTabWrap.evaluate((element) => globalThis.getComputedStyle(element, "::before").right)).toBe("0px");
+  await page.mouse.up();
+
+  await expect(page.getByRole("tab")).toHaveText(["Défaut", "Farm", "Boss"]);
+});
+
+test("quick drop stays on the source while prolonged hover opens the destination", async ({ page }) => {
+  await seedToolbox(page, {
+    id: "drag-spaces",
+    name: "Drag spaces",
+    modules: [
+      { id: "a", type: "counters", title: "Alpha" },
+      { id: "b", type: "counters", title: "Beta" }
+    ],
+    spaces: [
+      { id: "default", name: "Défaut", moduleOrder: { one: ["a", "b"], two: [["a"], ["b"]] } },
+      { id: "boss", name: "Boss", moduleOrder: { one: [], two: [[], []] } }
+    ],
+    defaultSpaceId: "default",
+    activeSpaceId: "default"
+  });
+  const bossTab = page.getByRole("tab", { name: "Boss" });
+
+  await dragModuleToTab(page, "Alpha", bossTab);
+  await expect(page.getByRole("tab", { name: "Défaut" })).toHaveAttribute("aria-selected", "true");
+  await expect(page.locator("[data-module-id='a']")).toHaveCount(0);
+
+  await dragModuleToTab(page, "Beta", bossTab, 700);
+  await expect(bossTab).toHaveAttribute("aria-selected", "true");
+  await expect(page.locator("[data-module-id='a']")).toBeVisible();
+  await expect(page.locator("[data-module-id='b']")).toBeVisible();
+});
+
+test("the linked game drawer shares the persisted active space", async ({ page }) => {
+  await seedToolbox(page, {
+    id: "drawer-spaces",
+    name: "Drawer spaces",
+    modules: [{ id: "a", type: "counters", title: "Alpha" }],
+    spaces: [
+      { id: "default", name: "Défaut", moduleOrder: { one: [], two: [[], []] } },
+      { id: "boss", name: "Boss", moduleOrder: { one: ["a"], two: [["a"], []] } }
+    ],
+    defaultSpaceId: "default",
+    activeSpaceId: "boss"
+  }, { mhwilds: "drawer-spaces" });
+
+  await page.goto("/#/games/mhwilds");
+  await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click();
+  const drawer = page.locator("#toolbox-drawer");
+  await expect(drawer.getByRole("tab", { name: "Boss" })).toHaveAttribute("aria-selected", "true");
+  await expect(drawer.locator("[data-module-id='a']")).toBeVisible();
+  await drawer.getByRole("tab", { name: "Défaut" }).click();
+  await expect(drawer.locator("[data-module-id='a']")).toHaveCount(0);
+  await page.reload();
+  await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click();
+  await expect(page.locator("#toolbox-drawer").getByRole("tab", { name: "Défaut" })).toHaveAttribute("aria-selected", "true");
+});