test(web): add 57 UI component and hook tests with jsdom cleanup

Fix jsdom environment: add esbuild automatic JSX transform and afterEach cleanup to prevent DOM leakage between tests. Components: Badge (8), Button (13), FilterBar (5), EmptyState (8), ConfirmDialog (8), useSelection hook (15). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-10 17:06:42 +02:00
parent 63db4a09e6
commit c0ba062460
8 changed files with 425 additions and 0 deletions
@@ -0,0 +1,50 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "~/test-utils.js";
+import userEvent from "@testing-library/user-event";
+import { EmptyState } from "./EmptyState.js";
+
+describe("EmptyState", () => {
+  it("renders the title", () => {
+    render(<EmptyState title="No results" />);
+    expect(screen.getByText("No results")).toBeInTheDocument();
+  });
+
+  it("renders detail text when provided", () => {
+    render(<EmptyState title="Empty" detail="Try adjusting your filters" />);
+    expect(screen.getByText("Try adjusting your filters")).toBeInTheDocument();
+  });
+
+  it("does not render detail when not provided", () => {
+    const { container } = render(<EmptyState title="Empty" />);
+    const paragraphs = container.querySelectorAll("p");
+    expect(paragraphs).toHaveLength(1);
+  });
+
+  it("renders an action button when action is provided", () => {
+    const action = { label: "Create new", onClick: vi.fn() };
+    render(<EmptyState title="Empty" action={action} />);
+    expect(screen.getByRole("button", { name: "Create new" })).toBeInTheDocument();
+  });
+
+  it("calls action onClick when button is clicked", async () => {
+    const onClick = vi.fn();
+    render(<EmptyState title="Empty" action={{ label: "Add", onClick }} />);
+    await userEvent.click(screen.getByRole("button", { name: "Add" }));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it("does not render action button when not provided", () => {
+    render(<EmptyState title="Empty" />);
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("renders icon when provided", () => {
+    render(<EmptyState title="Empty" icon={<span data-testid="icon">Icon</span>} />);
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+  });
+
+  it("applies testId to the container", () => {
+    render(<EmptyState title="Empty" testId="empty-state" />);
+    expect(screen.getByTestId("empty-state")).toBeInTheDocument();
+  });
+});