* 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
1 changed files with 8117 additions and 30 deletions
|
|
@ -0,0 +1,262 @@
|
|||
import { describe, it, expect, vi } from "vitest";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
|
||||
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
|
||||
import { ServerSettingsModal } from "./ServerSettingsModal";
|
||||
|
||||
const initialSettings: InspectorServerSettings = {
|
||||
headers: [{ key: "Authorization", value: "Bearer abc" }],
|
||||
metadata: [{ key: "userId", value: "u-1" }],
|
||||
connectionTimeout: 30000,
|
||||
requestTimeout: 60000,
|
||||
oauthClientId: "cid",
|
||||
oauthClientSecret: "secret",
|
||||
oauthScopes: "read",
|
||||
};
|
||||
|
||||
const emptySettings: InspectorServerSettings = {
|
||||
headers: [],
|
||||
metadata: [],
|
||||
connectionTimeout: 30000,
|
||||
requestTimeout: 60000,
|
||||
};
|
||||
|
||||
describe("ServerSettingsModal", () => {
|
||||
it("does not render content when opened is false", () => {
|
||||
renderWithMantine(
|
||||
<ServerSettingsModal
|
||||
opened={false}
|
||||
settings={emptySettings}
|
||||
onClose={vi.fn()}
|
||||
onSettingsChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.queryByText("Server Settings")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the modal title and form when opened", () => {
|
||||
renderWithMantine(
|
||||
<ServerSettingsModal
|
||||
opened
|
||||
settings={emptySettings}
|
||||
onClose={vi.fn()}
|
||||
onSettingsChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("Server Settings")).toBeInTheDocument();
|
||||
expect(screen.getByText("Custom Headers")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("invokes onClose when the CloseButton is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onClose = vi.fn();
|
||||
renderWithMantine(
|
||||
<ServerSettingsModal
|
||||
opened
|
||||
settings={emptySettings}
|
||||
onClose={onClose}
|
||||
onSettingsChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
// Modal renders into a portal on document.body
|
||||
const closeBtn = document.querySelector(
|
||||
"button.mantine-CloseButton-root",
|
||||
) as HTMLButtonElement | null;
|
||||
expect(closeBtn).not.toBeNull();
|
||||
await user.click(closeBtn!);
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("calls onSettingsChange when adding a header", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSettingsChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<ServerSettingsModal
|
||||
opened
|
||||
settings={emptySettings}
|
||||
onClose={vi.fn()}
|
||||
onSettingsChange={onSettingsChange}
|
||||
/>,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "+ Add Header" }));
|
||||
expect(onSettingsChange).toHaveBeenCalledWith({
|
||||
...emptySettings,
|
||||
headers: [{ key: "", value: "" }],
|
||||
});
|
||||
});
|
||||
|
||||
it("calls onSettingsChange when removing a header", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSettingsChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<ServerSettingsModal
|
||||
opened
|
||||
settings={initialSettings}
|
||||
onClose={vi.fn()}
|
||||
onSettingsChange={onSettingsChange}
|
||||
/>,
|
||||
);
|
||||
const removeButtons = screen.getAllByRole("button", { name: "X" });
|
||||
await user.click(removeButtons[0]);
|
||||
expect(onSettingsChange).toHaveBeenCalledWith({
|
||||
...initialSettings,
|
||||
headers: [],
|
||||
});
|
||||
});
|
||||
|
||||
it("calls onSettingsChange with updated header value when typing", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSettingsChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<ServerSettingsModal
|
||||
opened
|
||||
settings={initialSettings}
|
||||
onClose={vi.fn()}
|
||||
onSettingsChange={onSettingsChange}
|
||||
/>,
|
||||
);
|
||||
const valueInput = screen.getByDisplayValue("Bearer abc");
|
||||
await user.type(valueInput, "1");
|
||||
expect(onSettingsChange).toHaveBeenCalled();
|
||||
const lastCall =
|
||||
onSettingsChange.mock.calls[onSettingsChange.mock.calls.length - 1][0];
|
||||
expect(lastCall.headers[0].key).toBe("Authorization");
|
||||
expect(lastCall.headers[0].value).toContain("Bearer abc");
|
||||
});
|
||||
|
||||
it("calls onSettingsChange when adding metadata after expanding the section", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSettingsChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<ServerSettingsModal
|
||||
opened
|
||||
settings={emptySettings}
|
||||
onClose={vi.fn()}
|
||||
onSettingsChange={onSettingsChange}
|
||||
/>,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Request Metadata" }));
|
||||
await user.click(screen.getByRole("button", { name: "+ Add Metadata" }));
|
||||
expect(onSettingsChange).toHaveBeenCalledWith({
|
||||
...emptySettings,
|
||||
metadata: [{ key: "", value: "" }],
|
||||
});
|
||||
});
|
||||
|
||||
it("calls onSettingsChange when removing metadata", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSettingsChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<ServerSettingsModal
|
||||
opened
|
||||
settings={initialSettings}
|
||||
onClose={vi.fn()}
|
||||
onSettingsChange={onSettingsChange}
|
||||
/>,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Request Metadata" }));
|
||||
const removeButtons = screen.getAllByRole("button", { name: "X" });
|
||||
// After expanding metadata, both header and metadata X buttons exist;
|
||||
// the metadata X is the last one.
|
||||
await user.click(removeButtons[removeButtons.length - 1]);
|
||||
expect(onSettingsChange).toHaveBeenCalledWith({
|
||||
...initialSettings,
|
||||
metadata: [],
|
||||
});
|
||||
});
|
||||
|
||||
it("calls onSettingsChange when typing in metadata key/value", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSettingsChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<ServerSettingsModal
|
||||
opened
|
||||
settings={initialSettings}
|
||||
onClose={vi.fn()}
|
||||
onSettingsChange={onSettingsChange}
|
||||
/>,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Request Metadata" }));
|
||||
const valueInput = screen.getByDisplayValue("u-1");
|
||||
await user.type(valueInput, "9");
|
||||
expect(onSettingsChange).toHaveBeenCalled();
|
||||
const lastCall =
|
||||
onSettingsChange.mock.calls[onSettingsChange.mock.calls.length - 1][0];
|
||||
expect(lastCall.metadata[0].key).toBe("userId");
|
||||
});
|
||||
|
||||
it("calls onSettingsChange when changing timeouts", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSettingsChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<ServerSettingsModal
|
||||
opened
|
||||
settings={emptySettings}
|
||||
onClose={vi.fn()}
|
||||
onSettingsChange={onSettingsChange}
|
||||
/>,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "Timeouts" }));
|
||||
const connInput = screen.getByLabelText(/Connection Timeout/);
|
||||
await user.type(connInput, "5");
|
||||
expect(onSettingsChange).toHaveBeenCalled();
|
||||
const call = onSettingsChange.mock.calls[0][0];
|
||||
expect(typeof call.connectionTimeout).toBe("number");
|
||||
});
|
||||
|
||||
it("calls onSettingsChange when changing OAuth fields", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSettingsChange = vi.fn();
|
||||
renderWithMantine(
|
||||
<ServerSettingsModal
|
||||
opened
|
||||
settings={emptySettings}
|
||||
onClose={vi.fn()}
|
||||
onSettingsChange={onSettingsChange}
|
||||
/>,
|
||||
);
|
||||
await user.click(screen.getByRole("button", { name: "OAuth Settings" }));
|
||||
const clientIdInput = screen.getByLabelText("Client ID");
|
||||
await user.type(clientIdInput, "a");
|
||||
expect(onSettingsChange).toHaveBeenCalled();
|
||||
const call = onSettingsChange.mock.calls[0][0];
|
||||
expect(call.oauthClientId).toBe("a");
|
||||
});
|
||||
|
||||
it("toggles all accordion sections when ListToggle button is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
renderWithMantine(
|
||||
<ServerSettingsModal
|
||||
opened
|
||||
settings={emptySettings}
|
||||
onClose={vi.fn()}
|
||||
onSettingsChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
const headersControl = screen.getByRole("button", {
|
||||
name: "Custom Headers",
|
||||
});
|
||||
const metadataControl = screen.getByRole("button", {
|
||||
name: "Request Metadata",
|
||||
});
|
||||
const timeoutsControl = screen.getByRole("button", { name: "Timeouts" });
|
||||
const oauthControl = screen.getByRole("button", { name: "OAuth Settings" });
|
||||
|
||||
// Initially only "headers" is expanded.
|
||||
expect(headersControl.getAttribute("aria-expanded")).toBe("true");
|
||||
expect(metadataControl.getAttribute("aria-expanded")).toBe("false");
|
||||
|
||||
// ListToggle is the first button in the header row; click to expand all.
|
||||
const allButtons = screen.getAllByRole("button");
|
||||
await user.click(allButtons[0]);
|
||||
|
||||
expect(metadataControl.getAttribute("aria-expanded")).toBe("true");
|
||||
expect(timeoutsControl.getAttribute("aria-expanded")).toBe("true");
|
||||
expect(oauthControl.getAttribute("aria-expanded")).toBe("true");
|
||||
|
||||
// Clicking again should collapse all.
|
||||
await user.click(allButtons[0]);
|
||||
expect(headersControl.getAttribute("aria-expanded")).toBe("false");
|
||||
expect(metadataControl.getAttribute("aria-expanded")).toBe("false");
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue