* test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) Establishes the unit-test runtime AGENTS.md mandates: a vitest "unit" project alongside the existing storybook project, RTL + jest-dom + happy-dom, a Mantine-aware render helper, and a 90%-line per-file coverage gate enforced by CI. Adds 66 test files covering all 62 components under elements/groups/screens/views, plus core/mcp and clients/web/src/utils. Total: 577 tests, 98.7% line coverage globally. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * test(coverage): address PR #1269 review feedback - AGENTS.md: correct coverage gate description (lines ≥ 90, statements ≥ 85, functions ≥ 80, branches ≥ 50) with rationale for the relaxed branch threshold - InspectorView.test.tsx: document what the Math.random() mock values (0.1 / 0.99) control vs. STUB_SUCCESS_RATE in InspectorView.tsx - vite.config.ts / tsconfig.test.json: drop unused `globals: true` and the `vitest/globals` type now that every test file imports describe/it/expect/vi explicitly; manual `afterEach(cleanup)` in setup.ts remains required because testing-library auto-cleanup relies on globalThis.afterEach Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cliff Hall
GitHub
parent
64a42e645b
commit
75f74d64c1
68 changed files with 8117 additions and 30 deletions
|
|
@ -0,0 +1,37 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { AnnotationBadge } from "./AnnotationBadge";
|
||||
|
||||
describe("AnnotationBadge", () => {
|
||||
it("renders audience labels", () => {
|
||||
renderWithMantine(<AnnotationBadge facet="audience" value={["user"]} />);
|
||||
expect(screen.getByText("audience: user")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("joins multiple audience entries", () => {
|
||||
renderWithMantine(
|
||||
<AnnotationBadge facet="audience" value={["user", "assistant"]} />,
|
||||
);
|
||||
expect(screen.getByText("audience: user, assistant")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it.each([
|
||||
[0.9, "priority: high"],
|
||||
[0.5, "priority: medium"],
|
||||
[0.2, "priority: low"],
|
||||
])("maps priority %s to %s", (value, label) => {
|
||||
renderWithMantine(<AnnotationBadge facet="priority" value={value} />);
|
||||
expect(screen.getByText(label)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it.each([
|
||||
["readOnlyHint", "read-only"],
|
||||
["destructiveHint", "destructive"],
|
||||
["idempotentHint", "idempotent"],
|
||||
["openWorldHint", "open-world"],
|
||||
["longRunHint", "long-running"],
|
||||
] as const)("renders hint label for %s", (facet, label) => {
|
||||
renderWithMantine(<AnnotationBadge facet={facet} value={true} />);
|
||||
expect(screen.getByText(label)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { CapabilityItem } from "./CapabilityItem";
|
||||
|
||||
describe("CapabilityItem", () => {
|
||||
it("renders the supported check mark", () => {
|
||||
renderWithMantine(<CapabilityItem capability="tools" supported />);
|
||||
expect(screen.getByText("✓")).toBeInTheDocument();
|
||||
expect(screen.getByText("Tools")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the unsupported cross mark", () => {
|
||||
renderWithMantine(
|
||||
<CapabilityItem capability="prompts" supported={false} />,
|
||||
);
|
||||
expect(screen.getByText("✗")).toBeInTheDocument();
|
||||
expect(screen.getByText("Prompts")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("appends the count when provided", () => {
|
||||
renderWithMantine(
|
||||
<CapabilityItem capability="resources" supported count={5} />,
|
||||
);
|
||||
expect(screen.getByText("Resources (5)")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("falls back to capability key for unknown labels", () => {
|
||||
renderWithMantine(
|
||||
<CapabilityItem capability={"custom" as never} supported />,
|
||||
);
|
||||
expect(screen.getByText("custom")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import { describe, it, expect, vi } from "vitest";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { ConnectionToggle } from "./ConnectionToggle";
|
||||
|
||||
describe("ConnectionToggle", () => {
|
||||
it("is unchecked when disconnected", () => {
|
||||
renderWithMantine(
|
||||
<ConnectionToggle status="disconnected" onToggle={() => {}} />,
|
||||
);
|
||||
expect(screen.getByRole("switch")).not.toBeChecked();
|
||||
});
|
||||
|
||||
it("is checked when connected", () => {
|
||||
renderWithMantine(
|
||||
<ConnectionToggle status="connected" onToggle={() => {}} />,
|
||||
);
|
||||
expect(screen.getByRole("switch")).toBeChecked();
|
||||
});
|
||||
|
||||
it("is checked but disabled while connecting", () => {
|
||||
renderWithMantine(
|
||||
<ConnectionToggle status="connecting" onToggle={() => {}} />,
|
||||
);
|
||||
const sw = screen.getByRole("switch");
|
||||
expect(sw).toBeChecked();
|
||||
expect(sw).toBeDisabled();
|
||||
});
|
||||
|
||||
it("respects external disabled prop", () => {
|
||||
renderWithMantine(
|
||||
<ConnectionToggle status="disconnected" disabled onToggle={() => {}} />,
|
||||
);
|
||||
expect(screen.getByRole("switch")).toBeDisabled();
|
||||
});
|
||||
|
||||
it("invokes onToggle when clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onToggle = vi.fn();
|
||||
renderWithMantine(
|
||||
<ConnectionToggle status="disconnected" onToggle={onToggle} />,
|
||||
);
|
||||
await user.click(screen.getByRole("switch"));
|
||||
expect(onToggle).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import type { ContentBlock } from "@modelcontextprotocol/sdk/types.js";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { ContentViewer } from "./ContentViewer";
|
||||
|
||||
describe("ContentViewer", () => {
|
||||
it("renders text content as-is when not JSON", () => {
|
||||
const block: ContentBlock = { type: "text", text: "hello world" };
|
||||
renderWithMantine(<ContentViewer block={block} />);
|
||||
expect(screen.getByText("hello world")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("pretty-prints JSON text", () => {
|
||||
const block: ContentBlock = { type: "text", text: '{"a":1}' };
|
||||
renderWithMantine(<ContentViewer block={block} />);
|
||||
expect(screen.getByText(/"a": 1/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("falls back to raw text when JSON is malformed", () => {
|
||||
const block: ContentBlock = { type: "text", text: "{ broken" };
|
||||
renderWithMantine(<ContentViewer block={block} />);
|
||||
expect(screen.getByText("{ broken")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders a copy overlay when copyable", () => {
|
||||
const block: ContentBlock = { type: "text", text: "hello" };
|
||||
renderWithMantine(<ContentViewer block={block} copyable />);
|
||||
expect(screen.getByRole("button")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not render a copy overlay by default", () => {
|
||||
const block: ContentBlock = { type: "text", text: "hello" };
|
||||
renderWithMantine(<ContentViewer block={block} />);
|
||||
expect(screen.queryByRole("button")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders an image block", () => {
|
||||
const block: ContentBlock = {
|
||||
type: "image",
|
||||
mimeType: "image/png",
|
||||
data: "AAAA",
|
||||
};
|
||||
renderWithMantine(<ContentViewer block={block} />);
|
||||
expect(screen.getByRole("img")).toHaveAttribute(
|
||||
"src",
|
||||
"data:image/png;base64,AAAA",
|
||||
);
|
||||
});
|
||||
|
||||
it("renders an audio block", () => {
|
||||
const block: ContentBlock = {
|
||||
type: "audio",
|
||||
mimeType: "audio/mp3",
|
||||
data: "BBBB",
|
||||
};
|
||||
const { container } = renderWithMantine(<ContentViewer block={block} />);
|
||||
const source = container.querySelector("source");
|
||||
expect(source).toHaveAttribute("src", "data:audio/mp3;base64,BBBB");
|
||||
});
|
||||
|
||||
it("renders a text resource block", () => {
|
||||
const block: ContentBlock = {
|
||||
type: "resource",
|
||||
resource: { uri: "file:///foo", text: "embedded text" },
|
||||
};
|
||||
renderWithMantine(<ContentViewer block={block} />);
|
||||
expect(screen.getByText("embedded text")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders a blob resource block with placeholder", () => {
|
||||
const block: ContentBlock = {
|
||||
type: "resource",
|
||||
resource: {
|
||||
uri: "file:///bar",
|
||||
blob: "abc",
|
||||
mimeType: "application/octet-stream",
|
||||
},
|
||||
};
|
||||
renderWithMantine(<ContentViewer block={block} />);
|
||||
expect(screen.getByText("[blob: file:///bar]")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders a resource_link with name", () => {
|
||||
const block: ContentBlock = {
|
||||
type: "resource_link",
|
||||
uri: "ui://app",
|
||||
name: "Cool App",
|
||||
};
|
||||
renderWithMantine(<ContentViewer block={block} />);
|
||||
expect(screen.getByText("Cool App")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("falls back to URI when resource_link has no name", () => {
|
||||
const block = {
|
||||
type: "resource_link",
|
||||
uri: "ui://app",
|
||||
} as unknown as ContentBlock;
|
||||
renderWithMantine(<ContentViewer block={block} />);
|
||||
expect(screen.getByText("ui://app")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders nothing for unknown block types", () => {
|
||||
renderWithMantine(<ContentViewer block={{ type: "unknown" } as never} />);
|
||||
expect(screen.queryByRole("img")).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole("button")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { CopyButton } from "./CopyButton";
|
||||
|
||||
describe("CopyButton", () => {
|
||||
it("renders the copy glyph by default", () => {
|
||||
renderWithMantine(<CopyButton value="hello" />);
|
||||
expect(screen.getByRole("button")).toBeInTheDocument();
|
||||
expect(screen.getByText("⎘")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("triggers a click without throwing when clipboard is unavailable", async () => {
|
||||
const user = userEvent.setup();
|
||||
renderWithMantine(<CopyButton value="hello" />);
|
||||
await user.click(screen.getByRole("button"));
|
||||
expect(screen.getByRole("button")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { InlineError } from "./InlineError";
|
||||
|
||||
describe("InlineError", () => {
|
||||
it("renders the error message", () => {
|
||||
renderWithMantine(<InlineError error={{ message: "boom" }} />);
|
||||
expect(screen.getByText("boom")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders retry attempt count without max", () => {
|
||||
renderWithMantine(
|
||||
<InlineError error={{ message: "boom" }} retryCount={2} />,
|
||||
);
|
||||
expect(screen.getByText("Retry attempt 2")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders retry attempt count with max", () => {
|
||||
renderWithMantine(
|
||||
<InlineError error={{ message: "boom" }} retryCount={2} maxRetries={5} />,
|
||||
);
|
||||
expect(screen.getByText("Retry attempt 2 of 5")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not show expand button when there is nothing to expand", () => {
|
||||
renderWithMantine(<InlineError error={{ message: "boom" }} />);
|
||||
expect(screen.queryByText("Show more")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("expands details on click", async () => {
|
||||
const user = userEvent.setup();
|
||||
renderWithMantine(
|
||||
<InlineError error={{ message: "boom", data: "extra" }} />,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Show more" }));
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Show less" }),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByText("extra")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("formats non-string data as JSON", async () => {
|
||||
const user = userEvent.setup();
|
||||
renderWithMantine(
|
||||
<InlineError error={{ message: "boom", data: { code: 42 } }} />,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Show more" }));
|
||||
expect(screen.getByText(/"code": 42/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders a doc link button when docLink is provided and expanded", async () => {
|
||||
const user = userEvent.setup();
|
||||
renderWithMantine(
|
||||
<InlineError
|
||||
error={{ message: "boom" }}
|
||||
docLink="https://example.com/docs"
|
||||
/>,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Show more" }));
|
||||
const link = screen.getByRole("link", { name: /Troubleshooting/ });
|
||||
expect(link).toHaveAttribute("href", "https://example.com/docs");
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { describe, it, expect, vi } from "vitest";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { ListChangedIndicator } from "./ListChangedIndicator";
|
||||
|
||||
describe("ListChangedIndicator", () => {
|
||||
it("renders nothing when not visible", () => {
|
||||
renderWithMantine(
|
||||
<ListChangedIndicator visible={false} onRefresh={() => {}} />,
|
||||
);
|
||||
expect(screen.queryByText("List updated")).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByRole("button", { name: "Refresh" }),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the message and refresh button when visible", () => {
|
||||
renderWithMantine(<ListChangedIndicator visible onRefresh={() => {}} />);
|
||||
expect(screen.getByText("List updated")).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Refresh" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes onRefresh on click", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onRefresh = vi.fn();
|
||||
renderWithMantine(<ListChangedIndicator visible onRefresh={onRefresh} />);
|
||||
await user.click(screen.getByRole("button", { name: "Refresh" }));
|
||||
expect(onRefresh).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { describe, it, expect, vi } from "vitest";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { ListToggle } from "./ListToggle";
|
||||
|
||||
describe("ListToggle", () => {
|
||||
it("renders a Button by default", () => {
|
||||
renderWithMantine(<ListToggle compact onToggle={() => {}} />);
|
||||
expect(screen.getByRole("button")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders an ActionIcon for the subtle variant", () => {
|
||||
renderWithMantine(
|
||||
<ListToggle compact variant="subtle" onToggle={() => {}} />,
|
||||
);
|
||||
expect(screen.getByRole("button")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes onToggle when clicked (default variant)", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onToggle = vi.fn();
|
||||
renderWithMantine(<ListToggle compact onToggle={onToggle} />);
|
||||
await user.click(screen.getByRole("button"));
|
||||
expect(onToggle).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("invokes onToggle when clicked (subtle variant)", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onToggle = vi.fn();
|
||||
renderWithMantine(
|
||||
<ListToggle compact={false} variant="subtle" onToggle={onToggle} />,
|
||||
);
|
||||
await user.click(screen.getByRole("button"));
|
||||
expect(onToggle).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { LogEntry, type LogEntryData } from "./LogEntry";
|
||||
|
||||
const baseEntry = (
|
||||
overrides: Partial<LogEntryData["params"]>,
|
||||
): LogEntryData => ({
|
||||
receivedAt: new Date("2024-01-01T00:00:00Z"),
|
||||
params: { level: "info", data: "hello", ...overrides },
|
||||
});
|
||||
|
||||
describe("LogEntry", () => {
|
||||
it("renders the message text", () => {
|
||||
renderWithMantine(<LogEntry entry={baseEntry({ data: "the message" })} />);
|
||||
expect(screen.getByText("the message")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the level badge", () => {
|
||||
renderWithMantine(<LogEntry entry={baseEntry({ level: "error" })} />);
|
||||
expect(screen.getByText("error")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the logger name when present", () => {
|
||||
renderWithMantine(<LogEntry entry={baseEntry({ logger: "transport" })} />);
|
||||
expect(screen.getByText("[transport]")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("formats object data as JSON", () => {
|
||||
renderWithMantine(<LogEntry entry={baseEntry({ data: { code: 42 } })} />);
|
||||
expect(screen.getByText('{"code":42}')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders empty string for null data", () => {
|
||||
const { container } = renderWithMantine(
|
||||
<LogEntry entry={baseEntry({ data: null })} />,
|
||||
);
|
||||
expect(container.textContent).toContain("info");
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { LogLevelBadge } from "./LogLevelBadge";
|
||||
|
||||
describe("LogLevelBadge", () => {
|
||||
const levels: LoggingLevel[] = [
|
||||
"debug",
|
||||
"info",
|
||||
"notice",
|
||||
"warning",
|
||||
"error",
|
||||
"critical",
|
||||
"alert",
|
||||
"emergency",
|
||||
];
|
||||
|
||||
it.each(levels)("renders the %s level label", (level) => {
|
||||
renderWithMantine(<LogLevelBadge level={level} />);
|
||||
expect(screen.getByText(level)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import type {
|
||||
PromptMessage,
|
||||
SamplingMessage,
|
||||
} from "@modelcontextprotocol/sdk/types.js";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { MessageBubble } from "./MessageBubble";
|
||||
|
||||
describe("MessageBubble", () => {
|
||||
it("renders a text sampling message", () => {
|
||||
const message: SamplingMessage = {
|
||||
role: "user",
|
||||
content: { type: "text", text: "hello" },
|
||||
};
|
||||
renderWithMantine(<MessageBubble index={0} message={message} />);
|
||||
expect(screen.getByText("[0] role: user")).toBeInTheDocument();
|
||||
expect(screen.getByText('"hello"')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders a copy button when there is text", () => {
|
||||
const message: SamplingMessage = {
|
||||
role: "user",
|
||||
content: { type: "text", text: "hello" },
|
||||
};
|
||||
renderWithMantine(<MessageBubble index={0} message={message} />);
|
||||
expect(screen.getByRole("button")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders an image content block", () => {
|
||||
const message: SamplingMessage = {
|
||||
role: "user",
|
||||
content: { type: "image", mimeType: "image/png", data: "AAA" },
|
||||
};
|
||||
renderWithMantine(<MessageBubble index={1} message={message} />);
|
||||
expect(screen.getByRole("img")).toHaveAttribute(
|
||||
"src",
|
||||
"data:image/png;base64,AAA",
|
||||
);
|
||||
});
|
||||
|
||||
it("renders an audio content block", () => {
|
||||
const message: SamplingMessage = {
|
||||
role: "assistant",
|
||||
content: { type: "audio", mimeType: "audio/mp3", data: "BBB" },
|
||||
};
|
||||
const { container } = renderWithMantine(
|
||||
<MessageBubble index={2} message={message} />,
|
||||
);
|
||||
expect(container.querySelector("source")).toHaveAttribute(
|
||||
"src",
|
||||
"data:audio/mp3;base64,BBB",
|
||||
);
|
||||
});
|
||||
|
||||
it("renders embedded resource text from a prompt message array", () => {
|
||||
const message: PromptMessage = {
|
||||
role: "user",
|
||||
content: {
|
||||
type: "resource",
|
||||
resource: { uri: "file:///x", text: "embedded" },
|
||||
},
|
||||
};
|
||||
renderWithMantine(<MessageBubble index={3} message={message} />);
|
||||
expect(screen.getByText('"embedded"')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders blob resource placeholder", () => {
|
||||
const message: PromptMessage = {
|
||||
role: "user",
|
||||
content: {
|
||||
type: "resource",
|
||||
resource: {
|
||||
uri: "file:///b",
|
||||
blob: "abc",
|
||||
mimeType: "application/octet-stream",
|
||||
},
|
||||
},
|
||||
};
|
||||
renderWithMantine(<MessageBubble index={4} message={message} />);
|
||||
expect(screen.getByText('"[resource: file:///b]"')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders resource_link content", () => {
|
||||
const message = {
|
||||
role: "user",
|
||||
content: { type: "resource_link", uri: "ui://app" },
|
||||
} as unknown as PromptMessage;
|
||||
renderWithMantine(<MessageBubble index={5} message={message} />);
|
||||
expect(screen.getByText('"[resource: ui://app]"')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders fallback for unknown content types", () => {
|
||||
const message = {
|
||||
role: "user",
|
||||
content: { type: "weird" },
|
||||
} as unknown as SamplingMessage;
|
||||
renderWithMantine(<MessageBubble index={6} message={message} />);
|
||||
expect(screen.getByText('"[weird]"')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { ProgressDisplay } from "./ProgressDisplay";
|
||||
|
||||
describe("ProgressDisplay", () => {
|
||||
it("computes percentage from progress and total", () => {
|
||||
renderWithMantine(
|
||||
<ProgressDisplay params={{ progress: 25, total: 100 }} />,
|
||||
);
|
||||
expect(screen.getByText("25%")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("falls back to raw progress when total is missing", () => {
|
||||
renderWithMantine(<ProgressDisplay params={{ progress: 42 }} />);
|
||||
expect(screen.getByText("42%")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("falls back to raw progress when total is zero", () => {
|
||||
renderWithMantine(<ProgressDisplay params={{ progress: 30, total: 0 }} />);
|
||||
expect(screen.getByText("30%")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the label when message is provided", () => {
|
||||
renderWithMantine(
|
||||
<ProgressDisplay
|
||||
params={{ progress: 50, total: 100, message: "Loading" }}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("Loading")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders elapsed when provided", () => {
|
||||
renderWithMantine(
|
||||
<ProgressDisplay params={{ progress: 1 }} elapsed="3s" />,
|
||||
);
|
||||
expect(screen.getByText("3s")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the underlying progress bar", () => {
|
||||
renderWithMantine(
|
||||
<ProgressDisplay params={{ progress: 60, total: 100 }} />,
|
||||
);
|
||||
expect(screen.getByRole("progressbar")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { ServerStatusIndicator } from "./ServerStatusIndicator";
|
||||
|
||||
describe("ServerStatusIndicator", () => {
|
||||
it("renders the connected label with latency", () => {
|
||||
renderWithMantine(
|
||||
<ServerStatusIndicator status="connected" latencyMs={120} showLabel />,
|
||||
);
|
||||
expect(screen.getByText("Connected (120ms)")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders just 'Connected' when latency is missing", () => {
|
||||
renderWithMantine(<ServerStatusIndicator status="connected" showLabel />);
|
||||
expect(screen.getByText("Connected")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the connecting label", () => {
|
||||
renderWithMantine(<ServerStatusIndicator status="connecting" showLabel />);
|
||||
expect(screen.getByText("Connecting...")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the disconnected label", () => {
|
||||
renderWithMantine(
|
||||
<ServerStatusIndicator status="disconnected" showLabel />,
|
||||
);
|
||||
expect(screen.getByText("Disconnected")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the error label with retry count", () => {
|
||||
renderWithMantine(
|
||||
<ServerStatusIndicator status="error" retryCount={3} showLabel />,
|
||||
);
|
||||
expect(screen.getByText("Error (3)")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders just 'Error' without a retry count", () => {
|
||||
renderWithMantine(<ServerStatusIndicator status="error" showLabel />);
|
||||
expect(screen.getByText("Error")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("hides label and uses title when showLabel is false", () => {
|
||||
renderWithMantine(
|
||||
<ServerStatusIndicator
|
||||
status="connected"
|
||||
latencyMs={50}
|
||||
showLabel={false}
|
||||
/>,
|
||||
);
|
||||
expect(screen.queryByText("Connected (50ms)")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { describe, it, expect, vi } from "vitest";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { SubscribeButton } from "./SubscribeButton";
|
||||
|
||||
describe("SubscribeButton", () => {
|
||||
it("renders 'Subscribe' when not subscribed", () => {
|
||||
renderWithMantine(
|
||||
<SubscribeButton subscribed={false} onToggle={() => {}} />,
|
||||
);
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Subscribe" }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders 'Unsubscribe' when subscribed", () => {
|
||||
renderWithMantine(<SubscribeButton subscribed onToggle={() => {}} />);
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Unsubscribe" }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes onToggle on click", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onToggle = vi.fn();
|
||||
renderWithMantine(
|
||||
<SubscribeButton subscribed={false} onToggle={onToggle} />,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Subscribe" }));
|
||||
expect(onToggle).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import type { TaskStatus } from "@modelcontextprotocol/sdk/types.js";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { TaskStatusBadge } from "./TaskStatusBadge";
|
||||
|
||||
describe("TaskStatusBadge", () => {
|
||||
const cases: Array<[TaskStatus, string]> = [
|
||||
["working", "working"],
|
||||
["input_required", "input required"],
|
||||
["completed", "completed"],
|
||||
["failed", "failed"],
|
||||
["cancelled", "cancelled"],
|
||||
];
|
||||
|
||||
it.each(cases)("renders the label for %s", (status, label) => {
|
||||
renderWithMantine(<TaskStatusBadge status={status} />);
|
||||
expect(screen.getByText(label)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { describe, it, expect } from "vitest";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { TransportBadge } from "./TransportBadge";
|
||||
|
||||
describe("TransportBadge", () => {
|
||||
it("renders STDIO label", () => {
|
||||
renderWithMantine(<TransportBadge transport="stdio" />);
|
||||
expect(screen.getByText("STDIO")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders HTTP label for sse transport", () => {
|
||||
renderWithMantine(<TransportBadge transport="sse" />);
|
||||
expect(screen.getByText("HTTP")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders HTTP label for streamable-http transport", () => {
|
||||
renderWithMantine(<TransportBadge transport="streamable-http" />);
|
||||
expect(screen.getByText("HTTP")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
import { describe, it, expect, vi } from "vitest";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import type { ElicitRequestFormParams } from "@modelcontextprotocol/sdk/types.js";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { ElicitationFormPanel } from "./ElicitationFormPanel";
|
||||
|
||||
const dbRequest: ElicitRequestFormParams = {
|
||||
message: "Please provide database connection details.",
|
||||
requestedSchema: {
|
||||
type: "object" as const,
|
||||
properties: {
|
||||
host: { type: "string" as const, title: "Host" },
|
||||
port: { type: "string" as const, title: "Port" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const baseProps = {
|
||||
request: dbRequest,
|
||||
serverName: "postgres-server",
|
||||
values: {},
|
||||
onChange: vi.fn(),
|
||||
onSubmit: vi.fn(),
|
||||
onCancel: vi.fn(),
|
||||
};
|
||||
|
||||
describe("ElicitationFormPanel", () => {
|
||||
it("renders the quoted request message", () => {
|
||||
renderWithMantine(<ElicitationFormPanel {...baseProps} />);
|
||||
expect(
|
||||
screen.getByText(/Please provide database connection details\./),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the warning with the server name", () => {
|
||||
renderWithMantine(<ElicitationFormPanel {...baseProps} />);
|
||||
expect(screen.getByText("Warning")).toBeInTheDocument();
|
||||
expect(screen.getByText(/postgres-server/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders schema fields from the requested schema", () => {
|
||||
renderWithMantine(<ElicitationFormPanel {...baseProps} />);
|
||||
expect(screen.getByLabelText("Host")).toBeInTheDocument();
|
||||
expect(screen.getByLabelText("Port")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders Submit and Cancel buttons", () => {
|
||||
renderWithMantine(<ElicitationFormPanel {...baseProps} />);
|
||||
expect(screen.getByRole("button", { name: "Submit" })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes onSubmit when Submit is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSubmit = vi.fn();
|
||||
renderWithMantine(
|
||||
<ElicitationFormPanel {...baseProps} onSubmit={onSubmit} />,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Submit" }));
|
||||
expect(onSubmit).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("invokes onCancel when Cancel is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onCancel = vi.fn();
|
||||
renderWithMantine(
|
||||
<ElicitationFormPanel {...baseProps} onCancel={onCancel} />,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Cancel" }));
|
||||
expect(onCancel).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("invokes onChange when a schema field is updated", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<ElicitationFormPanel {...baseProps} onChange={onChange} />,
|
||||
);
|
||||
await user.type(screen.getByLabelText("Host"), "l");
|
||||
expect(onChange).toHaveBeenCalledWith({ host: "l" });
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
import { describe, it, expect, vi } from "vitest";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { ElicitationUrlPanel } from "./ElicitationUrlPanel";
|
||||
|
||||
const baseProps = {
|
||||
message: "Please authenticate with the external service.",
|
||||
url: "https://auth.example.com/oauth/authorize?client_id=mcp-inspector",
|
||||
requestId: "elicit-abc-123",
|
||||
isWaiting: false,
|
||||
onCopyUrl: vi.fn(),
|
||||
onOpenInBrowser: vi.fn(),
|
||||
onCancel: vi.fn(),
|
||||
};
|
||||
|
||||
describe("ElicitationUrlPanel", () => {
|
||||
it("renders the message, url, and request id", () => {
|
||||
renderWithMantine(<ElicitationUrlPanel {...baseProps} />);
|
||||
expect(
|
||||
screen.getByText("Please authenticate with the external service."),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByText(baseProps.url)).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText(`Request ID: ${baseProps.requestId}`),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the warning alert", () => {
|
||||
renderWithMantine(<ElicitationUrlPanel {...baseProps} />);
|
||||
expect(screen.getByText("Warning")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText(/This will open an external URL/),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not render waiting indicator when isWaiting is false", () => {
|
||||
renderWithMantine(<ElicitationUrlPanel {...baseProps} />);
|
||||
expect(
|
||||
screen.queryByText("Waiting for completion..."),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders waiting indicator when isWaiting is true", () => {
|
||||
renderWithMantine(<ElicitationUrlPanel {...baseProps} isWaiting />);
|
||||
expect(screen.getByText("Waiting for completion...")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes onCopyUrl when Copy URL is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onCopyUrl = vi.fn();
|
||||
renderWithMantine(
|
||||
<ElicitationUrlPanel {...baseProps} onCopyUrl={onCopyUrl} />,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Copy URL" }));
|
||||
expect(onCopyUrl).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("invokes onOpenInBrowser when Open in Browser is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onOpenInBrowser = vi.fn();
|
||||
renderWithMantine(
|
||||
<ElicitationUrlPanel {...baseProps} onOpenInBrowser={onOpenInBrowser} />,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Open in Browser" }));
|
||||
expect(onOpenInBrowser).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("invokes onCancel when Cancel is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onCancel = vi.fn();
|
||||
renderWithMantine(
|
||||
<ElicitationUrlPanel {...baseProps} onCancel={onCancel} />,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Cancel" }));
|
||||
expect(onCancel).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,328 @@
|
|||
import { describe, it, expect, vi } from "vitest";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { ExperimentalFeaturesPanel } from "./ExperimentalFeaturesPanel";
|
||||
import type { RequestHistoryItem } from "./ExperimentalFeaturesPanel";
|
||||
|
||||
const baseProps = {
|
||||
serverExperimental: undefined,
|
||||
clientExperimental: undefined,
|
||||
requestDraft:
|
||||
'{"jsonrpc":"2.0","id":1,"method":"experimental/x","params":{}}',
|
||||
customHeaders: [],
|
||||
requestHistory: [],
|
||||
onToggleClientCapability: vi.fn(),
|
||||
onRequestChange: vi.fn(),
|
||||
onSendRequest: vi.fn(),
|
||||
onAddHeader: vi.fn(),
|
||||
onRemoveHeader: vi.fn(),
|
||||
onHeaderChange: vi.fn(),
|
||||
onCopyResponse: vi.fn(),
|
||||
onTestCapability: vi.fn(),
|
||||
};
|
||||
|
||||
describe("ExperimentalFeaturesPanel", () => {
|
||||
it("renders the warning alert and section titles", () => {
|
||||
renderWithMantine(<ExperimentalFeaturesPanel {...baseProps} />);
|
||||
expect(
|
||||
screen.getByText(
|
||||
"These features are non-standard and may change or be removed.",
|
||||
),
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText("Server Experimental Capabilities:"),
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText("Client Experimental Capabilities:"),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByText("Advanced JSON-RPC Tester")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows the empty state when no server experimental capabilities are present", () => {
|
||||
renderWithMantine(<ExperimentalFeaturesPanel {...baseProps} />);
|
||||
expect(
|
||||
screen.getByText("No experimental capabilities"),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders server capability cards with description and methods", () => {
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
serverExperimental={{
|
||||
"experimental/streaming": {
|
||||
description: "Supports streaming responses",
|
||||
methods: [
|
||||
"experimental/stream.start",
|
||||
"experimental/stream.cancel",
|
||||
],
|
||||
},
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("experimental/streaming")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText("Supports streaming responses"),
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText(
|
||||
"Methods: experimental/stream.start, experimental/stream.cancel",
|
||||
),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the capability card without description or methods when not provided", () => {
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
serverExperimental={{
|
||||
"experimental/bare": {},
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("experimental/bare")).toBeInTheDocument();
|
||||
expect(screen.queryByText(/^Methods:/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes onTestCapability when Test is clicked on a capability card", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onTestCapability = vi.fn();
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
onTestCapability={onTestCapability}
|
||||
serverExperimental={{
|
||||
"experimental/echo": { description: "Echoes" },
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: /Test/ }));
|
||||
expect(onTestCapability).toHaveBeenCalledWith("experimental/echo");
|
||||
});
|
||||
|
||||
it("renders the known client capability toggles with their friendly labels", () => {
|
||||
renderWithMantine(<ExperimentalFeaturesPanel {...baseProps} />);
|
||||
expect(
|
||||
screen.getByRole("checkbox", { name: "Custom sampling" }),
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole("checkbox", { name: "Batch requests" }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("marks a known client capability checkbox as checked when enabled", () => {
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
clientExperimental={{ "experimental/batchRequests": {} }}
|
||||
/>,
|
||||
);
|
||||
const sampling = screen.getByRole("checkbox", {
|
||||
name: "Custom sampling",
|
||||
}) as HTMLInputElement;
|
||||
const batch = screen.getByRole("checkbox", {
|
||||
name: "Batch requests",
|
||||
}) as HTMLInputElement;
|
||||
expect(sampling.checked).toBe(false);
|
||||
expect(batch.checked).toBe(true);
|
||||
});
|
||||
|
||||
it("renders unknown client capabilities by their key", () => {
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
clientExperimental={{
|
||||
"experimental/customSampling": {},
|
||||
"experimental/futureFeatureXyz": {},
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(
|
||||
screen.getByRole("checkbox", { name: "experimental/futureFeatureXyz" }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes onToggleClientCapability when a client checkbox is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onToggleClientCapability = vi.fn();
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
onToggleClientCapability={onToggleClientCapability}
|
||||
/>,
|
||||
);
|
||||
await user.click(screen.getByRole("checkbox", { name: "Custom sampling" }));
|
||||
expect(onToggleClientCapability).toHaveBeenCalledWith(
|
||||
"experimental/customSampling",
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it("invokes onAddHeader when + Add Header is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onAddHeader = vi.fn();
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel {...baseProps} onAddHeader={onAddHeader} />,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "+ Add Header" }));
|
||||
expect(onAddHeader).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("renders custom header rows and invokes onHeaderChange when key changes", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onHeaderChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
customHeaders={[{ key: "X-Auth", value: "Bearer 1" }]}
|
||||
onHeaderChange={onHeaderChange}
|
||||
/>,
|
||||
);
|
||||
const keyInput = screen.getByDisplayValue("X-Auth");
|
||||
await user.type(keyInput, "Z");
|
||||
expect(onHeaderChange).toHaveBeenCalled();
|
||||
const lastCall =
|
||||
onHeaderChange.mock.calls[onHeaderChange.mock.calls.length - 1];
|
||||
expect(lastCall[0]).toBe(0);
|
||||
expect(lastCall[2]).toBe("Bearer 1");
|
||||
});
|
||||
|
||||
it("invokes onHeaderChange when value changes for a header", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onHeaderChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
customHeaders={[{ key: "X-Auth", value: "abc" }]}
|
||||
onHeaderChange={onHeaderChange}
|
||||
/>,
|
||||
);
|
||||
const valueInput = screen.getByDisplayValue("abc");
|
||||
await user.type(valueInput, "Z");
|
||||
expect(onHeaderChange).toHaveBeenCalled();
|
||||
const lastCall =
|
||||
onHeaderChange.mock.calls[onHeaderChange.mock.calls.length - 1];
|
||||
expect(lastCall[0]).toBe(0);
|
||||
expect(lastCall[1]).toBe("X-Auth");
|
||||
});
|
||||
|
||||
it("invokes onRemoveHeader with the header index when the remove icon is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onRemoveHeader = vi.fn();
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
customHeaders={[
|
||||
{ key: "X-Auth", value: "abc" },
|
||||
{ key: "X-Other", value: "def" },
|
||||
]}
|
||||
onRemoveHeader={onRemoveHeader}
|
||||
/>,
|
||||
);
|
||||
const removeButtons = screen.getAllByRole("button", { name: "✕" });
|
||||
await user.click(removeButtons[1]);
|
||||
expect(onRemoveHeader).toHaveBeenCalledWith(1);
|
||||
});
|
||||
|
||||
it("invokes onRequestChange when the request textarea changes", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onRequestChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
requestDraft=""
|
||||
onRequestChange={onRequestChange}
|
||||
/>,
|
||||
);
|
||||
const textarea = screen.getByLabelText("Request");
|
||||
await user.type(textarea, "x");
|
||||
expect(onRequestChange).toHaveBeenCalledWith("x");
|
||||
});
|
||||
|
||||
it("invokes onSendRequest when Send Request is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSendRequest = vi.fn();
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
onSendRequest={onSendRequest}
|
||||
/>,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Send Request" }));
|
||||
expect(onSendRequest).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("renders a successful response without an Error badge", () => {
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
response={{
|
||||
jsonrpc: "2.0",
|
||||
id: 1,
|
||||
result: { ok: true },
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("Response")).toBeInTheDocument();
|
||||
expect(screen.queryByText("Error")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders an error response with the Error badge", () => {
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
response={{
|
||||
jsonrpc: "2.0",
|
||||
id: 1,
|
||||
error: { code: -32601, message: "Method not found" },
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("Response")).toBeInTheDocument();
|
||||
expect(screen.getByText("Error")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes onCopyResponse when Copy is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onCopyResponse = vi.fn();
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel
|
||||
{...baseProps}
|
||||
response={{ jsonrpc: "2.0", id: 1, result: { ok: true } }}
|
||||
onCopyResponse={onCopyResponse}
|
||||
/>,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Copy" }));
|
||||
expect(onCopyResponse).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("renders the request history table when entries are present", () => {
|
||||
const items: RequestHistoryItem[] = [
|
||||
{
|
||||
timestamp: new Date("2026-03-17T10:30:15Z"),
|
||||
method: "experimental/metrics.get",
|
||||
status: "success",
|
||||
durationMs: 42,
|
||||
},
|
||||
{
|
||||
timestamp: new Date("2026-03-17T10:29:50Z"),
|
||||
method: "experimental/echo",
|
||||
status: "error",
|
||||
durationMs: 120,
|
||||
},
|
||||
];
|
||||
renderWithMantine(
|
||||
<ExperimentalFeaturesPanel {...baseProps} requestHistory={items} />,
|
||||
);
|
||||
expect(screen.getByText("Request History:")).toBeInTheDocument();
|
||||
expect(screen.getByText("experimental/metrics.get")).toBeInTheDocument();
|
||||
expect(screen.getByText("experimental/echo")).toBeInTheDocument();
|
||||
expect(screen.getByText("42ms")).toBeInTheDocument();
|
||||
expect(screen.getByText("120ms")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not render the history section when requestHistory is empty", () => {
|
||||
renderWithMantine(<ExperimentalFeaturesPanel {...baseProps} />);
|
||||
expect(screen.queryByText("Request History:")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
import { describe, it, expect, vi } from "vitest";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import type { MessageMethod } from "@inspector/core/mcp/types.js";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { HistoryControls } from "./HistoryControls";
|
||||
|
||||
const baseProps = {
|
||||
searchText: "",
|
||||
availableMethods: ["tools/list", "prompts/list"] as MessageMethod[],
|
||||
onSearchChange: vi.fn(),
|
||||
onMethodFilterChange: vi.fn(),
|
||||
};
|
||||
|
||||
describe("HistoryControls", () => {
|
||||
it("renders the title and search input", () => {
|
||||
renderWithMantine(<HistoryControls {...baseProps} />);
|
||||
expect(screen.getByText("History")).toBeInTheDocument();
|
||||
expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes onSearchChange when typing in the search input", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSearchChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<HistoryControls {...baseProps} onSearchChange={onSearchChange} />,
|
||||
);
|
||||
await user.type(screen.getByPlaceholderText("Search..."), "a");
|
||||
expect(onSearchChange).toHaveBeenCalledWith("a");
|
||||
});
|
||||
|
||||
it("renders the method filter placeholder", () => {
|
||||
renderWithMantine(<HistoryControls {...baseProps} />);
|
||||
expect(screen.getByPlaceholderText("All methods")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("displays the active method filter value", () => {
|
||||
renderWithMantine(
|
||||
<HistoryControls {...baseProps} methodFilter="tools/list" />,
|
||||
);
|
||||
const inputs = screen.getAllByDisplayValue("tools/list");
|
||||
expect(inputs.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("invokes onMethodFilterChange with undefined when cleared", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onMethodFilterChange = vi.fn();
|
||||
const { container } = renderWithMantine(
|
||||
<HistoryControls
|
||||
{...baseProps}
|
||||
methodFilter="tools/list"
|
||||
onMethodFilterChange={onMethodFilterChange}
|
||||
/>,
|
||||
);
|
||||
const clearButton = container.querySelector(
|
||||
"button.mantine-InputClearButton-root",
|
||||
) as HTMLButtonElement | null;
|
||||
expect(clearButton).not.toBeNull();
|
||||
await user.click(clearButton!);
|
||||
expect(onMethodFilterChange).toHaveBeenCalledWith(undefined);
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue