50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
|
import { render, screen, waitFor } from "@testing-library/react";
|
||
|
|
import { describe, expect, it, vi } from "vitest";
|
||
|
|
import { WorkItemDetailPanel } from "./WorkItemDetailPanel";
|
||
|
|
|
||
|
|
vi.mock("../api/client", () => ({
|
||
|
|
api: {
|
||
|
|
getWorkItemContent: vi.fn().mockResolvedValue({
|
||
|
|
content: "# Big Title\n\nSome content here.",
|
||
|
|
stage: "current",
|
||
|
|
name: "Big Title Story",
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
}));
|
||
|
|
|
||
|
|
describe("WorkItemDetailPanel", () => {
|
||
|
|
it("renders the story name in the header", async () => {
|
||
|
|
render(<WorkItemDetailPanel storyId="237_bug_test" onClose={() => {}} />);
|
||
|
|
await waitFor(() => {
|
||
|
|
expect(screen.getByTestId("detail-panel-title")).toHaveTextContent(
|
||
|
|
"Big Title Story",
|
||
|
|
);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it("shows loading state initially", () => {
|
||
|
|
render(<WorkItemDetailPanel storyId="237_bug_test" onClose={() => {}} />);
|
||
|
|
expect(screen.getByTestId("detail-panel-loading")).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it("calls onClose when close button is clicked", async () => {
|
||
|
|
const onClose = vi.fn();
|
||
|
|
render(<WorkItemDetailPanel storyId="237_bug_test" onClose={onClose} />);
|
||
|
|
const closeButton = screen.getByTestId("detail-panel-close");
|
||
|
|
closeButton.click();
|
||
|
|
expect(onClose).toHaveBeenCalledTimes(1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it("renders markdown headings with constrained inline font size", async () => {
|
||
|
|
render(<WorkItemDetailPanel storyId="237_bug_test" onClose={() => {}} />);
|
||
|
|
await waitFor(() => {
|
||
|
|
const content = screen.getByTestId("detail-panel-content");
|
||
|
|
const h1 = content.querySelector("h1");
|
||
|
|
expect(h1).not.toBeNull();
|
||
|
|
// Headings must have a constrained fontSize inline style
|
||
|
|
// Browser-default 2em is too large for the work item detail panel
|
||
|
|
expect(h1?.style.fontSize).toBeTruthy();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|