70 lines
2.9 KiB
TypeScript
70 lines
2.9 KiB
TypeScript
// @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();
|
|
}
|
|
});
|