fix(ui) : simplify admin controls and artifact selection

2026-10-14 22:39:53 +07:00
parent d229cb3942
commit 024553b516
21 changed files with 148 additions and 73 deletions
@@ -0,0 +1,69 @@
+// @vitest-environment happy-dom
+
+import { act, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+
+import { ArtifactSelect } from "./catalog-select";
+
+const items = ["Gladiator", "Wanderer", "Emblem"].map((name) => ({
+  key: name.toLowerCase(), name, imageUrl: "/artifact.png", rarity: 5,
+}));
+
+function Picker() {
+  const [values, setValues] = useState<string[]>([]);
+  return <ArtifactSelect multiple presentation="dropdown" items={items} values={values}
+    onValuesChange={setValues} label="Artifact sets" placeholder="Search artifacts" />;
+}
+
+it("selects at most two artifact sets and allows removing and clearing them", async () => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  const container = document.createElement("div");
+  document.body.append(container);
+  const root = createRoot(container);
+  const option = (name: string) => Array.from(document.querySelectorAll<HTMLElement>("[role=option]"))
+    .find((element) => element.textContent?.includes(name))!;
+  const click = async (element: HTMLElement) => {
+    await act(async () => { element.click(); });
+  };
+  try {
+    await act(async () => { root.render(<Picker />); });
+    const trigger = container.querySelector<HTMLButtonElement>("[data-slot=combobox-trigger]")!;
+    await click(trigger);
+    const input = document.querySelector<HTMLInputElement>('input[placeholder="Search artifacts"]')!;
+    const search = async (value: string) => {
+      await act(async () => {
+        Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(input, value);
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+    };
+    await search("gladiatr");
+    expect(document.querySelectorAll("[role=option]")).toHaveLength(1);
+    expect(option("Gladiator")).toBeDefined();
+    await act(async () => {
+      input.focus();
+      input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    });
+    await act(async () => {
+      input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    });
+    expect(trigger.textContent).toContain("Gladiator");
+    await search("");
+    await click(option("Wanderer"));
+    expect(trigger.textContent).toContain("Gladiator + Wanderer");
+    expect(option("Emblem").getAttribute("aria-disabled")).toBe("true");
+    await click(option("Gladiator"));
+    expect(trigger.textContent).toContain("Wanderer");
+    expect(trigger.textContent).not.toContain("Gladiator");
+    expect(option("Emblem").getAttribute("aria-disabled")).not.toBe("true");
+    await click(trigger);
+    await click(trigger);
+    expect(trigger.textContent).toContain("Wanderer");
+    await click(document.querySelector<HTMLElement>("[data-slot=combobox-clear]")!);
+    expect(trigger.textContent).toContain("Artifact sets");
+  } finally {
+    await act(async () => { root.unmount(); });
+    container.remove();
+    vi.unstubAllGlobals();
+  }
+});