9def2d7c24
Render condition picker via React portal with fixed positioning so it is no longer clipped by the overflow-y-auto combatant list container. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
// @vitest-environment jsdom
|
|
import "@testing-library/jest-dom/vitest";
|
|
|
|
import { CONDITION_DEFINITIONS, type ConditionId } from "@initiative/domain";
|
|
import { cleanup, render, screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { createRef, type RefObject } from "react";
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import { ConditionPicker } from "../condition-picker";
|
|
|
|
afterEach(cleanup);
|
|
|
|
function renderPicker(
|
|
overrides: Partial<{
|
|
activeConditions: readonly ConditionId[];
|
|
onToggle: (conditionId: ConditionId) => void;
|
|
onClose: () => void;
|
|
}> = {},
|
|
) {
|
|
const onToggle = overrides.onToggle ?? vi.fn();
|
|
const onClose = overrides.onClose ?? vi.fn();
|
|
const anchorRef = createRef<HTMLElement>() as RefObject<HTMLElement>;
|
|
const anchor = document.createElement("div");
|
|
document.body.appendChild(anchor);
|
|
(anchorRef as { current: HTMLElement }).current = anchor;
|
|
const result = render(
|
|
<ConditionPicker
|
|
anchorRef={anchorRef}
|
|
activeConditions={overrides.activeConditions ?? []}
|
|
onToggle={onToggle}
|
|
onClose={onClose}
|
|
/>,
|
|
);
|
|
return { ...result, onToggle, onClose };
|
|
}
|
|
|
|
describe("ConditionPicker", () => {
|
|
it("renders all condition definitions from domain", () => {
|
|
renderPicker();
|
|
for (const def of CONDITION_DEFINITIONS) {
|
|
expect(screen.getByText(def.label)).toBeInTheDocument();
|
|
}
|
|
});
|
|
|
|
it("active conditions are visually distinguished", () => {
|
|
renderPicker({ activeConditions: ["blinded"] });
|
|
const blindedButton = screen.getByText("Blinded").closest("button");
|
|
expect(blindedButton?.className).toContain("bg-card/50");
|
|
});
|
|
|
|
it("clicking a condition calls onToggle with that condition's ID", async () => {
|
|
const user = userEvent.setup();
|
|
const { onToggle } = renderPicker();
|
|
await user.click(screen.getByText("Poisoned"));
|
|
expect(onToggle).toHaveBeenCalledWith("poisoned");
|
|
});
|
|
|
|
it("non-active conditions render with muted styling", () => {
|
|
renderPicker({ activeConditions: [] });
|
|
const label = screen.getByText("Charmed");
|
|
expect(label.className).toContain("text-muted-foreground");
|
|
});
|
|
|
|
it("active condition labels use foreground color", () => {
|
|
renderPicker({ activeConditions: ["charmed"] });
|
|
const label = screen.getByText("Charmed");
|
|
expect(label.className).toContain("text-foreground");
|
|
});
|
|
});
|