import { cleanup, render, screen } from "@testing-library/react"; import { afterEach, describe, expect, it } from "vitest"; import { TaskPriorityIndicator } from "./task-priority-indicator"; afterEach(cleanup); describe("TaskPriorityIndicator", () => { it.each(["critical", "high", "low"] as const)("renders an indicator for %s", (priority) => { render(); expect(screen.getByTestId("task-priority-indicator")).not.toBeNull(); }); it("renders nothing for medium, the default and majority case", () => { const { container } = render(); expect(container.querySelector('[data-testid="task-priority-indicator"]')).toBeNull(); expect(container.textContent).toBe(""); }); it.each([undefined, null, "", "urgent"])( "renders nothing and no raw text for an unrecognized value (%s)", (priority) => { const { container } = render(); expect(container.querySelector('[data-testid="task-priority-indicator"]')).toBeNull(); expect(container.textContent).toBe(""); }, ); it("renders a visually distinct treatment for each of critical, high and low", () => { const { container: critical } = render(); const { container: high } = render(); const { container: low } = render(); expect(critical.querySelector("svg")?.outerHTML).not.toBe(high.querySelector("svg")?.outerHTML); expect(high.querySelector("svg")?.outerHTML).not.toBe(low.querySelector("svg")?.outerHTML); expect(critical.querySelector("svg")).not.toBeNull(); expect(high.querySelector("svg")).not.toBeNull(); expect(low.querySelector("svg")).not.toBeNull(); }); it("gives the indicator an accessible name including the localized label", () => { render(); expect(screen.getByRole("img", { name: /Critical/i })).not.toBeNull(); }); });