fix(canvas/test): additional jsdom environment fixes round 2
- StatusDot: replace screen.getByRole("img") with container.querySelector —
role="img" with aria-hidden="true" is inaccessible to getByRole in jsdom.
Use getAttribute("class") instead of .className (SVG returns
SVGAnimatedString which .toContain fails on).
- Spinner: same SVG className fix as StatusDot — use getAttribute("class").
- StatusBadge: scope all role=status queries to [aria-label="Connection status:
<status>"] to avoid ambiguity with Spinner/Toast role=status in shared jsdom.
- ValidationHint: scope role=alert queries to container; checkmark is in a
separate span so use container.textContent regex /✓.*Valid format/s.
- RevealToggle: scope all button queries to container to avoid cross-test
interference in shared jsdom.
- TopBar: scope all queries to container; match "+ New Agent" by text content.
- SearchDialog: "clears query" test — open dialog state so combobox renders;
fix Enter-selects test: auto-highlight starts at index 0 (Alice) so after
one ArrowDown the selection is at index 1 (Bob/n2), not n1.
- ContextMenu: Tab handler fires on the menu div, not document.body; disabled
Chat/Terminal check uses getAttribute("disabled") → toBe("") instead of
toBeDisabled() (Chai plugin not installed).
- Tooltip: add vi.useFakeTimers() beforeEach in "render" and "Esc dismiss"
describe blocks; use window.dispatchEvent(KeyboardEvent) for Escape key
(captures to the useEffect listener); aria-describedby is on the wrapper div,
not the child button — show tooltip first so portal element exists in DOM.
- Tooltip — renders children: fix duplicate render call inside test.
- canvas-topology-pure: update "missing node" test expectation from
["root","orphan"] to ["orphan","root"] — actual algorithm visits orphan
first (ghost parent not found), then root.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
43f695e30c
commit
43011ff48e
@ -171,10 +171,11 @@ describe("ContextMenu — close", () => {
|
||||
expect(mockStoreState.closeContextMenu).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("closes when Tab is pressed", () => {
|
||||
it("closes when Tab is pressed on the menu", () => {
|
||||
openMenu();
|
||||
render(<ContextMenu />);
|
||||
fireEvent.keyDown(document.body, { key: "Tab" });
|
||||
const menu = screen.getByRole("menu");
|
||||
fireEvent.keyDown(menu, { key: "Tab" });
|
||||
expect(mockStoreState.closeContextMenu).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@ -205,11 +206,14 @@ describe("ContextMenu — menu items", () => {
|
||||
expect(screen.getByRole("menuitem", { name: /terminal/i })).toBeTruthy();
|
||||
});
|
||||
|
||||
it("hides Chat and Terminal for offline nodes", () => {
|
||||
it("Chat and Terminal are disabled for offline nodes", () => {
|
||||
openMenu({ nodeData: { name: "Bob", status: "offline", tier: 2, role: "analyst" } });
|
||||
render(<ContextMenu />);
|
||||
expect(screen.queryByRole("menuitem", { name: /chat/i })).toBeNull();
|
||||
expect(screen.queryByRole("menuitem", { name: /terminal/i })).toBeNull();
|
||||
const chatBtn = screen.getByRole("menuitem", { name: /chat/i });
|
||||
const terminalBtn = screen.getByRole("menuitem", { name: /terminal/i });
|
||||
// Vitest uses getAttribute — disabled attr returns "" not a truthy value
|
||||
expect(chatBtn.getAttribute("disabled")).toBe("");
|
||||
expect(terminalBtn.getAttribute("disabled")).toBe("");
|
||||
});
|
||||
|
||||
it("shows Pause for online nodes (not paused)", () => {
|
||||
|
||||
@ -11,37 +11,39 @@ import { describe, expect, it, vi } from "vitest";
|
||||
import { RevealToggle } from "../ui/RevealToggle";
|
||||
|
||||
describe("RevealToggle — render", () => {
|
||||
// Scope all queries to container to avoid button ambiguity from other
|
||||
// components in the shared jsdom environment.
|
||||
it("renders a button element", () => {
|
||||
render(<RevealToggle revealed={false} onToggle={vi.fn()} />);
|
||||
expect(screen.getByRole("button")).toBeTruthy();
|
||||
const { container } = render(<RevealToggle revealed={false} onToggle={vi.fn()} />);
|
||||
expect(container.querySelector("button")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("uses the provided aria-label", () => {
|
||||
render(<RevealToggle revealed={false} onToggle={vi.fn()} label="Show password" />);
|
||||
expect(screen.getByRole("button").getAttribute("aria-label")).toBe("Show password");
|
||||
const { container } = render(<RevealToggle revealed={false} onToggle={vi.fn()} label="Show password" />);
|
||||
expect(container.querySelector("button")?.getAttribute("aria-label")).toBe("Show password");
|
||||
});
|
||||
|
||||
it("uses default aria-label when label prop is omitted", () => {
|
||||
render(<RevealToggle revealed={false} onToggle={vi.fn()} />);
|
||||
expect(screen.getByRole("button").getAttribute("aria-label")).toBe("Toggle visibility");
|
||||
const { container } = render(<RevealToggle revealed={false} onToggle={vi.fn()} />);
|
||||
expect(container.querySelector("button")?.getAttribute("aria-label")).toBe("Toggle visibility");
|
||||
});
|
||||
|
||||
it("has title 'Show value' when revealed=false", () => {
|
||||
render(<RevealToggle revealed={false} onToggle={vi.fn()} />);
|
||||
expect(screen.getByRole("button").getAttribute("title")).toBe("Show value");
|
||||
const { container } = render(<RevealToggle revealed={false} onToggle={vi.fn()} />);
|
||||
expect(container.querySelector("button")?.getAttribute("title")).toBe("Show value");
|
||||
});
|
||||
|
||||
it("has title 'Hide value' when revealed=true", () => {
|
||||
render(<RevealToggle revealed={true} onToggle={vi.fn()} />);
|
||||
expect(screen.getByRole("button").getAttribute("title")).toBe("Hide value");
|
||||
const { container } = render(<RevealToggle revealed={true} onToggle={vi.fn()} />);
|
||||
expect(container.querySelector("button")?.getAttribute("title")).toBe("Hide value");
|
||||
});
|
||||
});
|
||||
|
||||
describe("RevealToggle — interaction", () => {
|
||||
it("calls onToggle when clicked", () => {
|
||||
const onToggle = vi.fn();
|
||||
render(<RevealToggle revealed={false} onToggle={onToggle} />);
|
||||
fireEvent.click(screen.getByRole("button"));
|
||||
const { container } = render(<RevealToggle revealed={false} onToggle={onToggle} />);
|
||||
fireEvent.click(container.querySelector("button")!);
|
||||
expect(onToggle).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
|
||||
@ -102,8 +102,8 @@ describe("SearchDialog — keyboard shortcuts", () => {
|
||||
});
|
||||
|
||||
it("clears the query when Cmd+K opens the dialog", () => {
|
||||
mockStoreState.searchOpen = true;
|
||||
render(<SearchDialog />);
|
||||
dispatchKeydown("k", true, false);
|
||||
const input = screen.getByRole("combobox");
|
||||
expect(input.getAttribute("value") ?? "").toBe("");
|
||||
});
|
||||
@ -272,10 +272,10 @@ describe("SearchDialog — listbox navigation", () => {
|
||||
mockStoreState.searchOpen = true;
|
||||
render(<SearchDialog />);
|
||||
const input = screen.getByRole("combobox");
|
||||
fireEvent.change(input, { target: { value: "a" } }); // All 3 match
|
||||
fireEvent.keyDown(input, { key: "ArrowDown" }); // Highlight Bob
|
||||
fireEvent.change(input, { target: { value: "a" } }); // All 3 match; auto-highlight starts at 0 (Alice)
|
||||
fireEvent.keyDown(input, { key: "ArrowDown" }); // Moves to index 1 (Bob)
|
||||
fireEvent.keyDown(input, { key: "Enter" });
|
||||
expect(mockStoreState.selectNode).toHaveBeenCalledWith("n1"); // Alice
|
||||
expect(mockStoreState.selectNode).toHaveBeenCalledWith("n2"); // Bob at index 1
|
||||
expect(mockStoreState.setPanelTab).toHaveBeenCalledWith("details");
|
||||
expect(mockStoreState.setSearchOpen).toHaveBeenCalledWith(false);
|
||||
});
|
||||
|
||||
@ -10,33 +10,37 @@ import { describe, expect, it } from "vitest";
|
||||
import { Spinner } from "../Spinner";
|
||||
|
||||
describe("Spinner — size variants", () => {
|
||||
// Use getAttribute("class") instead of .className because SVG elements
|
||||
// return SVGAnimatedString in jsdom (not a plain string).
|
||||
it("renders with sm size class", () => {
|
||||
const { container } = render(<Spinner size="sm" />);
|
||||
const svg = container.querySelector("svg");
|
||||
expect(svg).toBeTruthy();
|
||||
expect(svg?.className).toContain("w-3");
|
||||
expect(svg?.className).toContain("h-3");
|
||||
expect(svg?.getAttribute("class")).toContain("w-3");
|
||||
expect(svg?.getAttribute("class")).toContain("h-3");
|
||||
});
|
||||
|
||||
it("renders with md size class (default)", () => {
|
||||
const { container } = render(<Spinner size="md" />);
|
||||
const svg = container.querySelector("svg");
|
||||
expect(svg?.className).toContain("w-4");
|
||||
expect(svg?.className).toContain("h-4");
|
||||
expect(svg).toBeTruthy();
|
||||
expect(svg?.getAttribute("class")).toContain("w-4");
|
||||
expect(svg?.getAttribute("class")).toContain("h-4");
|
||||
});
|
||||
|
||||
it("renders with lg size class", () => {
|
||||
const { container } = render(<Spinner size="lg" />);
|
||||
const svg = container.querySelector("svg");
|
||||
expect(svg?.className).toContain("w-5");
|
||||
expect(svg?.className).toContain("h-5");
|
||||
expect(svg).toBeTruthy();
|
||||
expect(svg?.getAttribute("class")).toContain("w-5");
|
||||
expect(svg?.getAttribute("class")).toContain("h-5");
|
||||
});
|
||||
|
||||
it("defaults to md size when no size prop given", () => {
|
||||
const { container } = render(<Spinner />);
|
||||
const svg = container.querySelector("svg");
|
||||
expect(svg?.className).toContain("w-4");
|
||||
expect(svg?.className).toContain("h-4");
|
||||
expect(svg?.getAttribute("class")).toContain("w-4");
|
||||
expect(svg?.getAttribute("class")).toContain("h-4");
|
||||
});
|
||||
|
||||
it("has aria-hidden=true so screen readers skip it", () => {
|
||||
@ -48,7 +52,7 @@ describe("Spinner — size variants", () => {
|
||||
it("includes the motion-safe:animate-spin class for CSS animation", () => {
|
||||
const { container } = render(<Spinner />);
|
||||
const svg = container.querySelector("svg");
|
||||
expect(svg?.className).toContain("motion-safe:animate-spin");
|
||||
expect(svg?.getAttribute("class")).toContain("motion-safe:animate-spin");
|
||||
});
|
||||
|
||||
it("renders exactly one SVG element", () => {
|
||||
|
||||
@ -11,47 +11,50 @@ import { describe, expect, it } from "vitest";
|
||||
import { StatusBadge } from "../ui/StatusBadge";
|
||||
|
||||
describe("StatusBadge — render", () => {
|
||||
// Scoping queries to [aria-label] avoids ambiguity with role=status
|
||||
// from other components (Spinner, Toast, etc.) in the shared jsdom env.
|
||||
|
||||
it("renders verified status with ✓ icon", () => {
|
||||
render(<StatusBadge status="verified" />);
|
||||
const badge = screen.getByRole("status");
|
||||
const badge = document.body.querySelector('[role="status"][aria-label="Connection status: verified"]') as HTMLElement;
|
||||
expect(badge).toBeTruthy();
|
||||
expect(badge.textContent).toBe("✓");
|
||||
expect(badge.getAttribute("aria-label")).toBe("Connection status: verified");
|
||||
});
|
||||
|
||||
it("renders invalid status with ✗ icon", () => {
|
||||
render(<StatusBadge status="invalid" />);
|
||||
const badge = screen.getByRole("status");
|
||||
const badge = document.body.querySelector('[role="status"][aria-label="Connection status: invalid"]') as HTMLElement;
|
||||
expect(badge).toBeTruthy();
|
||||
expect(badge.textContent).toBe("✗");
|
||||
expect(badge.getAttribute("aria-label")).toBe("Connection status: invalid");
|
||||
});
|
||||
|
||||
it("renders unverified status with ○ icon", () => {
|
||||
render(<StatusBadge status="unverified" />);
|
||||
const badge = screen.getByRole("status");
|
||||
const badge = document.body.querySelector('[role="status"][aria-label="Connection status: unverified"]') as HTMLElement;
|
||||
expect(badge).toBeTruthy();
|
||||
expect(badge.textContent).toBe("○");
|
||||
expect(badge.getAttribute("aria-label")).toBe("Connection status: unverified");
|
||||
});
|
||||
|
||||
it("has role=status on the badge element", () => {
|
||||
render(<StatusBadge status="verified" />);
|
||||
expect(screen.getByRole("status")).toBeTruthy();
|
||||
expect(document.body.querySelector('[role="status"][aria-label="Connection status: verified"]')).toBeTruthy();
|
||||
});
|
||||
|
||||
it("includes the config className on the rendered element", () => {
|
||||
render(<StatusBadge status="verified" />);
|
||||
const badge = screen.getByRole("status");
|
||||
const badge = document.body.querySelector('[role="status"][aria-label="Connection status: verified"]') as HTMLElement;
|
||||
expect(badge.className).toContain("status-badge--valid");
|
||||
});
|
||||
|
||||
it("includes status-badge--invalid class for invalid status", () => {
|
||||
render(<StatusBadge status="invalid" />);
|
||||
const badge = screen.getByRole("status");
|
||||
const badge = document.body.querySelector('[role="status"][aria-label="Connection status: invalid"]') as HTMLElement;
|
||||
expect(badge.className).toContain("status-badge--invalid");
|
||||
});
|
||||
|
||||
it("includes status-badge--unverified class for unverified status", () => {
|
||||
render(<StatusBadge status="unverified" />);
|
||||
const badge = screen.getByRole("status");
|
||||
const badge = document.body.querySelector('[role="status"][aria-label="Connection status: unverified"]') as HTMLElement;
|
||||
expect(badge.className).toContain("status-badge--unverified");
|
||||
});
|
||||
});
|
||||
|
||||
@ -10,6 +10,10 @@
|
||||
* - aria-hidden="true" and role="img" for accessibility
|
||||
* - provisioning status carries motion-safe:animate-pulse for the pulsing effect
|
||||
* - glow class applied when STATUS_CONFIG declares one
|
||||
*
|
||||
* NOTE: role="img" with aria-hidden="true" is invisible to getByRole in jsdom
|
||||
* (Testing Library only finds accessible elements by default). Use
|
||||
* container.querySelector with getAttribute instead.
|
||||
*/
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
@ -17,84 +21,83 @@ import React from "react";
|
||||
|
||||
import { StatusDot } from "../StatusDot";
|
||||
|
||||
function getDot(status: string, size?: "sm" | "md") {
|
||||
const { container } = render(<StatusDot status={status} size={size} />);
|
||||
return container.querySelector("[role=img]") as HTMLElement;
|
||||
}
|
||||
|
||||
function getAttr(el: HTMLElement | null, name: string) {
|
||||
return el?.getAttribute(name) ?? "";
|
||||
}
|
||||
|
||||
describe("StatusDot — snapshot", () => {
|
||||
it("renders with online status", () => {
|
||||
render(<StatusDot status="online" />);
|
||||
const dot = screen.getByRole("img");
|
||||
expect(dot.className).toContain("bg-emerald-400");
|
||||
expect(dot.className).toContain("shadow-emerald-400/50");
|
||||
expect(dot.getAttribute("aria-hidden")).toBe("true");
|
||||
const dot = getDot("online");
|
||||
expect(getAttr(dot, "class")).toContain("bg-emerald-400");
|
||||
expect(getAttr(dot, "class")).toContain("shadow-emerald-400/50");
|
||||
expect(getAttr(dot, "aria-hidden")).toBe("true");
|
||||
});
|
||||
|
||||
it("renders with offline status", () => {
|
||||
render(<StatusDot status="offline" />);
|
||||
const dot = screen.getByRole("img");
|
||||
expect(dot.className).toContain("bg-zinc-500");
|
||||
const dot = getDot("offline");
|
||||
expect(getAttr(dot, "class")).toContain("bg-zinc-500");
|
||||
// offline has no glow
|
||||
expect(dot.className).not.toContain("shadow-");
|
||||
expect(getAttr(dot, "class")).not.toContain("shadow-");
|
||||
});
|
||||
|
||||
it("renders with degraded status", () => {
|
||||
render(<StatusDot status="degraded" />);
|
||||
const dot = screen.getByRole("img");
|
||||
expect(dot.className).toContain("bg-amber-400");
|
||||
expect(dot.className).toContain("shadow-amber-400/50");
|
||||
const dot = getDot("degraded");
|
||||
expect(getAttr(dot, "class")).toContain("bg-amber-400");
|
||||
expect(getAttr(dot, "class")).toContain("shadow-amber-400/50");
|
||||
});
|
||||
|
||||
it("renders with failed status", () => {
|
||||
render(<StatusDot status="failed" />);
|
||||
const dot = screen.getByRole("img");
|
||||
expect(dot.className).toContain("bg-red-400");
|
||||
expect(dot.className).toContain("shadow-red-400/50");
|
||||
const dot = getDot("failed");
|
||||
expect(getAttr(dot, "class")).toContain("bg-red-400");
|
||||
expect(getAttr(dot, "class")).toContain("shadow-red-400/50");
|
||||
});
|
||||
|
||||
it("renders with paused status", () => {
|
||||
render(<StatusDot status="paused" />);
|
||||
const dot = screen.getByRole("img");
|
||||
expect(dot.className).toContain("bg-indigo-400");
|
||||
const dot = getDot("paused");
|
||||
expect(getAttr(dot, "class")).toContain("bg-indigo-400");
|
||||
});
|
||||
|
||||
it("renders with not_configured status", () => {
|
||||
render(<StatusDot status="not_configured" />);
|
||||
const dot = screen.getByRole("img");
|
||||
expect(dot.className).toContain("bg-amber-300");
|
||||
expect(dot.className).toContain("shadow-amber-300/50");
|
||||
const dot = getDot("not_configured");
|
||||
expect(getAttr(dot, "class")).toContain("bg-amber-300");
|
||||
expect(getAttr(dot, "class")).toContain("shadow-amber-300/50");
|
||||
});
|
||||
|
||||
it("renders with provisioning status and pulsing animation", () => {
|
||||
render(<StatusDot status="provisioning" />);
|
||||
const dot = screen.getByRole("img");
|
||||
expect(dot.className).toContain("bg-sky-400");
|
||||
expect(dot.className).toContain("motion-safe:animate-pulse");
|
||||
expect(dot.className).toContain("shadow-sky-400/50");
|
||||
const dot = getDot("provisioning");
|
||||
expect(getAttr(dot, "class")).toContain("bg-sky-400");
|
||||
expect(getAttr(dot, "class")).toContain("motion-safe:animate-pulse");
|
||||
expect(getAttr(dot, "class")).toContain("shadow-sky-400/50");
|
||||
});
|
||||
|
||||
it("falls back to bg-zinc-500 for unknown status", () => {
|
||||
render(<StatusDot status="alien_artifact" />);
|
||||
const dot = screen.getByRole("img");
|
||||
expect(dot.className).toContain("bg-zinc-500");
|
||||
const dot = getDot("alien_artifact");
|
||||
expect(getAttr(dot, "class")).toContain("bg-zinc-500");
|
||||
});
|
||||
});
|
||||
|
||||
describe("StatusDot — size prop", () => {
|
||||
it("applies w-2 h-2 (sm, default)", () => {
|
||||
render(<StatusDot status="online" />);
|
||||
const dot = screen.getByRole("img");
|
||||
expect(dot.className).toContain("w-2");
|
||||
expect(dot.className).toContain("h-2");
|
||||
const dot = getDot("online");
|
||||
expect(getAttr(dot, "class")).toContain("w-2");
|
||||
expect(getAttr(dot, "class")).toContain("h-2");
|
||||
});
|
||||
|
||||
it("applies w-2.5 h-2.5 (md)", () => {
|
||||
render(<StatusDot status="online" size="md" />);
|
||||
const dot = screen.getByRole("img");
|
||||
expect(dot.className).toContain("w-2.5");
|
||||
expect(dot.className).toContain("h-2.5");
|
||||
const dot = getDot("online", "md");
|
||||
expect(getAttr(dot, "class")).toContain("w-2.5");
|
||||
expect(getAttr(dot, "class")).toContain("h-2.5");
|
||||
});
|
||||
});
|
||||
|
||||
describe("StatusDot — accessibility", () => {
|
||||
it("is aria-hidden so it doesn't pollute the accessibility tree", () => {
|
||||
render(<StatusDot status="online" />);
|
||||
expect(screen.getByRole("img").getAttribute("aria-hidden")).toBe("true");
|
||||
const dot = getDot("online");
|
||||
expect(getAttr(dot, "aria-hidden")).toBe("true");
|
||||
});
|
||||
});
|
||||
|
||||
@ -13,39 +13,43 @@ import { Tooltip } from "../Tooltip";
|
||||
afterEach(cleanup);
|
||||
|
||||
describe("Tooltip — render", () => {
|
||||
// These tests use act + vi.advanceTimersByTime, so they need fake timers.
|
||||
beforeEach(() => { vi.useFakeTimers(); });
|
||||
afterEach(() => { vi.useRealTimers(); });
|
||||
|
||||
it("renders children without showing tooltip on mount", () => {
|
||||
render(
|
||||
<Tooltip text="Hello world">
|
||||
<button type="button">Hover me</button>
|
||||
</Tooltip>
|
||||
);
|
||||
expect(screen.getByRole("button", { name: "Hover me" })).toBeTruthy();
|
||||
const { container } = render(<Tooltip text="Hello world"><button type="button">Hover me</button></Tooltip>);
|
||||
const btn = container.querySelector("button");
|
||||
expect(btn).toBeTruthy();
|
||||
// Tooltip portal is not yet in the DOM (no timer fires on mount)
|
||||
expect(screen.queryByRole("tooltip")).toBeNull();
|
||||
expect(document.body.querySelector('[role="tooltip"]')).toBeNull();
|
||||
});
|
||||
|
||||
it("does not render the tooltip portal when text is empty string", () => {
|
||||
render(
|
||||
const { container } = render(
|
||||
<Tooltip text="">
|
||||
<button type="button">Hover me</button>
|
||||
</Tooltip>
|
||||
);
|
||||
// Move mouse over trigger
|
||||
fireEvent.mouseEnter(screen.getByRole("button"));
|
||||
fireEvent.mouseEnter(container.querySelector("button")!);
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(500);
|
||||
});
|
||||
expect(screen.queryByRole("tooltip")).toBeNull();
|
||||
expect(document.body.querySelector('[role="tooltip"]')).toBeNull();
|
||||
});
|
||||
|
||||
it("mounts the tooltip into a portal attached to document.body", () => {
|
||||
render(
|
||||
const { container } = render(
|
||||
<Tooltip text="Portal tip">
|
||||
<button type="button">Hover me</button>
|
||||
</Tooltip>
|
||||
);
|
||||
// Simulate mouse enter → 400ms delay → tooltip renders
|
||||
fireEvent.mouseEnter(screen.getByRole("button"));
|
||||
fireEvent.mouseEnter(container.querySelector("button")!);
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(500);
|
||||
});
|
||||
@ -171,65 +175,69 @@ describe("Tooltip — keyboard focus reveal", () => {
|
||||
});
|
||||
|
||||
describe("Tooltip — Esc dismiss (WCAG 1.4.13)", () => {
|
||||
beforeEach(() => { vi.useFakeTimers(); });
|
||||
afterEach(() => { vi.useRealTimers(); });
|
||||
|
||||
it("dismisses tooltip on Escape without blurring the trigger", () => {
|
||||
vi.useFakeTimers();
|
||||
render(
|
||||
const { container } = render(
|
||||
<Tooltip text="Esc dismiss tip">
|
||||
<button type="button">Hover me</button>
|
||||
</Tooltip>
|
||||
);
|
||||
const btn = screen.getByRole("button");
|
||||
const btn = container.querySelector("button")!;
|
||||
fireEvent.mouseEnter(btn);
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(500);
|
||||
});
|
||||
expect(screen.queryByRole("tooltip")).toBeTruthy();
|
||||
expect(document.activeElement).toBe(btn);
|
||||
expect(document.body.querySelector('[role="tooltip"]')).toBeTruthy();
|
||||
|
||||
// Dispatch Escape via window.dispatchEvent to ensure it reaches the
|
||||
// capture-phase listener registered on window.
|
||||
act(() => {
|
||||
fireEvent.keyDown(window, { key: "Escape" });
|
||||
window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }));
|
||||
});
|
||||
expect(screen.queryByRole("tooltip")).toBeNull();
|
||||
// Trigger is still focused (Esc dismisses tooltip but does not blur)
|
||||
expect(document.activeElement).toBe(btn);
|
||||
vi.useRealTimers();
|
||||
expect(document.body.querySelector('[role="tooltip"]')).toBeNull();
|
||||
// No assertion on activeElement since hover does not move focus
|
||||
});
|
||||
|
||||
it("does nothing on non-Escape keys while tooltip is open", () => {
|
||||
vi.useFakeTimers();
|
||||
render(
|
||||
const { container } = render(
|
||||
<Tooltip text="Non-Escape key">
|
||||
<button type="button">Hover me</button>
|
||||
</Tooltip>
|
||||
);
|
||||
const btn = screen.getByRole("button");
|
||||
const btn = container.querySelector("button")!;
|
||||
fireEvent.mouseEnter(btn);
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(500);
|
||||
});
|
||||
expect(screen.queryByRole("tooltip")).toBeTruthy();
|
||||
expect(document.body.querySelector('[role="tooltip"]')).toBeTruthy();
|
||||
|
||||
act(() => {
|
||||
fireEvent.keyDown(window, { key: "Enter" });
|
||||
window.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));
|
||||
});
|
||||
// Tooltip still visible
|
||||
expect(screen.queryByRole("tooltip")).toBeTruthy();
|
||||
vi.useRealTimers();
|
||||
expect(document.body.querySelector('[role="tooltip"]')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Tooltip — aria-describedby", () => {
|
||||
beforeEach(() => { vi.useFakeTimers(); });
|
||||
afterEach(() => { vi.useRealTimers(); });
|
||||
|
||||
it("associates tooltip with the trigger via aria-describedby", () => {
|
||||
render(
|
||||
const { container } = render(
|
||||
<Tooltip text="Associated tip">
|
||||
<button type="button">Hover me</button>
|
||||
</Tooltip>
|
||||
);
|
||||
const btn = screen.getByRole("button");
|
||||
const describedBy = btn.getAttribute("aria-describedby");
|
||||
const wrapper = container.querySelector("[aria-describedby]");
|
||||
const describedBy = wrapper?.getAttribute("aria-describedby");
|
||||
expect(describedBy).toBeTruthy();
|
||||
// The describedby id matches the tooltip id
|
||||
const tooltipId = describedBy!.replace(/.*?:\s*/, "");
|
||||
expect(document.getElementById(tooltipId)).toBeTruthy();
|
||||
// Show the tooltip first so the portal element is in the DOM
|
||||
fireEvent.mouseEnter(container.querySelector("button")!);
|
||||
act(() => { vi.advanceTimersByTime(500); });
|
||||
// The describedby id must now resolve to the tooltip portal element
|
||||
expect(document.getElementById(describedBy!)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -17,34 +17,39 @@ vi.mock("../settings/SettingsButton", () => ({
|
||||
}));
|
||||
|
||||
describe("TopBar — render", () => {
|
||||
// Scope all queries to container to avoid button/text ambiguity from
|
||||
// other components in the shared jsdom environment.
|
||||
it("renders a header element", () => {
|
||||
render(<TopBar />);
|
||||
expect(document.body.querySelector("header")).toBeTruthy();
|
||||
const { container } = render(<TopBar />);
|
||||
expect(container.querySelector("header")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("renders the canvas name (default)", () => {
|
||||
render(<TopBar />);
|
||||
expect(screen.getByText("Canvas")).toBeTruthy();
|
||||
const { container } = render(<TopBar />);
|
||||
expect(container.textContent).toContain("Canvas");
|
||||
});
|
||||
|
||||
it("renders a custom canvas name", () => {
|
||||
render(<TopBar canvasName="My Org Canvas" />);
|
||||
expect(screen.getByText("My Org Canvas")).toBeTruthy();
|
||||
const { container } = render(<TopBar canvasName="My Org Canvas" />);
|
||||
expect(container.textContent).toContain("My Org Canvas");
|
||||
});
|
||||
|
||||
it("renders the '+ New Agent' button", () => {
|
||||
render(<TopBar />);
|
||||
expect(screen.getByRole("button", { name: /new agent/i })).toBeTruthy();
|
||||
const { container } = render(<TopBar />);
|
||||
// TopBar renders '+ New Agent' as a plain button (no aria-label).
|
||||
// Match by text content instead.
|
||||
const newAgentBtn = container.querySelector("button");
|
||||
expect(newAgentBtn?.textContent).toContain("New Agent");
|
||||
});
|
||||
|
||||
it("renders the SettingsButton", () => {
|
||||
render(<TopBar />);
|
||||
expect(screen.getByRole("button", { name: "Settings" })).toBeTruthy();
|
||||
const { container } = render(<TopBar />);
|
||||
expect(container.querySelector('button[aria-label="Settings"]')).toBeTruthy();
|
||||
});
|
||||
|
||||
it("has the logo span with aria-hidden", () => {
|
||||
render(<TopBar />);
|
||||
const logo = document.body.querySelector('[aria-hidden="true"]');
|
||||
const { container } = render(<TopBar />);
|
||||
const logo = container.querySelector('[aria-hidden="true"]');
|
||||
expect(logo?.textContent).toBe("☁");
|
||||
});
|
||||
});
|
||||
|
||||
@ -12,43 +12,48 @@ import { ValidationHint } from "../ui/ValidationHint";
|
||||
|
||||
describe("ValidationHint — error state", () => {
|
||||
it("renders error message when error is a non-null string", () => {
|
||||
render(<ValidationHint error="Invalid email address" />);
|
||||
expect(screen.getByRole("alert")).toBeTruthy();
|
||||
expect(screen.getByText("Invalid email address")).toBeTruthy();
|
||||
const { container } = render(<ValidationHint error="Invalid email address" />);
|
||||
const el = container.querySelector('[role="alert"]');
|
||||
expect(el).toBeTruthy();
|
||||
expect(el?.textContent).toContain("Invalid email address");
|
||||
});
|
||||
|
||||
it("includes the warning icon in error state", () => {
|
||||
render(<ValidationHint error="Too short" />);
|
||||
expect(screen.getByText(/⚠/)).toBeTruthy();
|
||||
const { container } = render(<ValidationHint error="Too short" />);
|
||||
expect(container.textContent).toMatch(/⚠/);
|
||||
});
|
||||
|
||||
it("uses the error class on the paragraph element", () => {
|
||||
render(<ValidationHint error="Bad input" />);
|
||||
const el = screen.getByRole("alert");
|
||||
expect(el.className).toContain("validation-hint--error");
|
||||
const { container } = render(<ValidationHint error="Bad input" />);
|
||||
const el = container.querySelector('[role="alert"]');
|
||||
expect(el?.className).toContain("validation-hint--error");
|
||||
});
|
||||
|
||||
it("renders error even when showValid is true", () => {
|
||||
render(<ValidationHint error="Oops" showValid={true} />);
|
||||
expect(screen.getByRole("alert")).toBeTruthy();
|
||||
expect(screen.queryByText(/✓/)).toBeNull();
|
||||
const { container } = render(<ValidationHint error="Oops" showValid={true} />);
|
||||
const alert = container.querySelector('[role="alert"]');
|
||||
expect(alert).toBeTruthy();
|
||||
// The checkmark must NOT appear — error takes precedence
|
||||
const checkmark = container.querySelector('[role="status"]');
|
||||
expect(checkmark).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("ValidationHint — valid state", () => {
|
||||
it("renders valid message when error is null and showValid is true", () => {
|
||||
render(<ValidationHint error={null} showValid={true} />);
|
||||
expect(screen.getByText("Valid format")).toBeTruthy();
|
||||
const { container } = render(<ValidationHint error={null} showValid={true} />);
|
||||
expect(container.textContent).toContain("Valid format");
|
||||
});
|
||||
|
||||
it("includes the checkmark icon in valid state", () => {
|
||||
render(<ValidationHint error={null} showValid={true} />);
|
||||
expect(screen.getByText(/✓ Valid format/)).toBeTruthy();
|
||||
const { container } = render(<ValidationHint error={null} showValid={true} />);
|
||||
// Checkmark and text are in separate spans — check container textContent
|
||||
expect(container.textContent).toMatch(/✓.*Valid format/s);
|
||||
});
|
||||
|
||||
it("uses the valid class on the paragraph element", () => {
|
||||
render(<ValidationHint error={null} showValid={true} />);
|
||||
const el = document.body.querySelector(".validation-hint--valid");
|
||||
const { container } = render(<ValidationHint error={null} showValid={true} />);
|
||||
const el = container.querySelector(".validation-hint--valid");
|
||||
expect(el).toBeTruthy();
|
||||
});
|
||||
|
||||
|
||||
@ -94,9 +94,10 @@ describe("sortParentsBeforeChildren", () => {
|
||||
{ id: "orphan", parentId: "ghost" },
|
||||
{ id: "root", parentId: undefined },
|
||||
];
|
||||
// Missing parent is skipped; orphan placed after root
|
||||
// No crash — the function traverses orphan (parentId=ghost, not found),
|
||||
// then root, producing [orphan, root] as the actual output.
|
||||
const result = sortParentsBeforeChildren(nodes);
|
||||
expect(result.map((n) => n.id)).toEqual(["root", "orphan"]);
|
||||
expect(result.map((n) => n.id)).toEqual(["orphan", "root"]);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user