test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) (#1269)

* 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 2026-05-01 15:15:32 -04:00 • committed by GitHub
commit 75f74d64c1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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();
});
});