import { describe, it, expect, vi } from "vitest";
import userEvent from "@testing-library/user-event";
import type {
ClientCapabilities,
InitializeResult,
} from "@modelcontextprotocol/client";
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
import {
CLEAR_OAUTH_STATE_AND_DISCONNECT_LABEL,
ConnectionInfoContent,
SERVER_INFO_NOT_REPORTED_LABEL,
} from "./ConnectionInfoContent";
const fullResult: InitializeResult = {
protocolVersion: "2025-03-26",
serverInfo: { name: "Everything Server", version: "2.1.0" },
capabilities: {
tools: { listChanged: true },
resources: { subscribe: true },
prompts: { listChanged: true },
logging: {},
completions: {},
},
instructions: "Use tools/list first.",
};
const fullClientCaps: ClientCapabilities = {
roots: { listChanged: true },
sampling: {},
elicitation: {},
experimental: {},
};
// The glyphs `CapabilityItem` renders beside each capability label.
const SUPPORTED_MARK = "✓";
const UNSUPPORTED_MARK = "✗";
/**
* Read the ✓/✗ a capability row is showing. The mark is the label's preceding
* sibling inside the row `Group`, so asserting on it — rather than on the
* label's mere presence — is what distinguishes "supported" from "listed".
*/
function capabilityMark(label: string): string | undefined {
return (
screen.getByText(label).previousElementSibling?.textContent ?? undefined
);
}
describe("ConnectionInfoContent", () => {
it("renders server implementation fields under the heading", () => {
renderWithMantine(
,
);
expect(screen.getByText("Server Implementation")).toBeInTheDocument();
expect(screen.getByText("Everything Server")).toBeInTheDocument();
expect(screen.getByText("2.1.0")).toBeInTheDocument();
expect(screen.getByText("2025-03-26")).toBeInTheDocument();
expect(screen.getByText("stdio")).toBeInTheDocument();
});
it("renders an em-dash when server version is missing", () => {
renderWithMantine(
,
);
// Exactly three em dashes: the missing server version, plus the two
// extension sections (the fixtures advertise none on either side).
expect(screen.getAllByText("—")).toHaveLength(3);
});
it("renders an em-dash when the reported version is an empty string", () => {
renderWithMantine(
,
);
// An empty version reads as unknown ("—"), not a blank row (#1772).
expect(screen.getByText("Empty Version Server")).toBeInTheDocument();
expect(screen.getAllByText("—")).toHaveLength(3);
});
it("renders an em-dash when the reported name is an empty string", () => {
renderWithMantine(
,
);
// `initialize` mandates the name field, not a non-empty value, so an empty
// reported name also reads as unknown ("—") — symmetric with version.
expect(screen.getByText("1.0.0")).toBeInTheDocument();
expect(screen.getAllByText("—")).toHaveLength(3);
});
it("renders an em-dash when the reported name is missing", () => {
renderWithMantine(
,
);
expect(screen.getByText("1.0.0")).toBeInTheDocument();
expect(screen.getAllByText("—")).toHaveLength(3);
});
it("renders an em-dash when the reported name is whitespace-only", () => {
renderWithMantine(
,
);
// A whitespace-only reported name is the same non-conforming class as an
// empty one (#1774): it must read as unknown ("—"), not a visually blank
// row. Stays faithful — never borrows the catalog name.
expect(screen.getByText("1.0.0")).toBeInTheDocument();
expect(screen.getAllByText("—")).toHaveLength(3);
});
it("shows 'not reported' for name and version when serverInfo was not reported", () => {
renderWithMantine(
,
);
// The inferred catalog name is NOT shown as the server's reported name...
expect(screen.queryByText("my-catalog-name")).not.toBeInTheDocument();
// ...both Name and Version read as not reported instead.
expect(screen.getAllByText(SERVER_INFO_NOT_REPORTED_LABEL)).toHaveLength(2);
});
it("renders an em-dash when the protocol version is empty", () => {
renderWithMantine(
,
);
// App supplies `protocolVersion ?? ""`; an empty one reads as unknown ("—"),
// symmetric with Name/Version (#1772).
expect(screen.getAllByText("—")).toHaveLength(3);
});
it("renders server and client capability sections", () => {
renderWithMantine(
,
);
expect(screen.getByText("Server Capabilities")).toBeInTheDocument();
expect(screen.getByText("Client Capabilities")).toBeInTheDocument();
expect(screen.getByText("Tools")).toBeInTheDocument();
expect(screen.getByText("Resources")).toBeInTheDocument();
expect(screen.getByText("Roots")).toBeInTheDocument();
expect(screen.getByText("Sampling")).toBeInTheDocument();
});
it("marks Tasks supported on a modern connection that advertises the tasks extension (#1887)", () => {
renderWithMantine(
,
);
expect(capabilityMark("Tasks")).toBe(SUPPORTED_MARK);
});
it("still marks Tasks unsupported on a modern connection without the extension (#1887)", () => {
renderWithMantine(
,
);
expect(capabilityMark("Tasks")).toBe(UNSUPPORTED_MARK);
});
it("does not read the tasks extension on a legacy connection (#1887)", () => {
renderWithMantine(
,
);
// Legacy tasks support is `capabilities.tasks`, which this server omits —
// an extension key alone must not turn the row green.
expect(capabilityMark("Tasks")).toBe(UNSUPPORTED_MARK);
});
it("marks Tasks supported on a legacy connection from capabilities.tasks", () => {
renderWithMantine(
,
);
expect(capabilityMark("Tasks")).toBe(SUPPORTED_MARK);
});
it("does not extension-promote a capability other than tasks (#1887)", () => {
renderWithMantine(
,
);
expect(capabilityMark("Prompts")).toBe(UNSUPPORTED_MARK);
expect(capabilityMark("Tasks")).toBe(UNSUPPORTED_MARK);
});
it("renders instructions when present", () => {
renderWithMantine(
,
);
expect(screen.getByText("Server Instructions")).toBeInTheDocument();
expect(screen.getByText("Use tools/list first.")).toBeInTheDocument();
});
it("omits the instructions section when not present", () => {
renderWithMantine(
,
);
expect(screen.queryByText("Server Instructions")).not.toBeInTheDocument();
});
it("defaults to the Legacy era, and marks the session N/A for stdio", () => {
renderWithMantine(
,
);
expect(screen.getByText("Era")).toBeInTheDocument();
expect(screen.getByText("Legacy")).toBeInTheDocument();
// stdio has no HTTP session concept.
expect(screen.getByText("N/A (stdio)")).toBeInTheDocument();
// No discover result → no Discovery section.
expect(screen.queryByText("Discovery")).not.toBeInTheDocument();
});
it("marks a legacy HTTP connection as session-based", () => {
renderWithMantine(
,
);
expect(screen.getByText("Legacy")).toBeInTheDocument();
expect(screen.getByText("Session-based")).toBeInTheDocument();
});
it("shows the Modern era as sessionless and renders the discovery section", () => {
renderWithMantine(
,
);
expect(screen.getByText("Modern")).toBeInTheDocument();
expect(screen.getByText("Sessionless")).toBeInTheDocument();
expect(screen.getByText("Discovery")).toBeInTheDocument();
expect(screen.getByText("2026-07-28, 2025-11-25")).toBeInTheDocument();
});
it("renders an em-dash for empty supported versions in Discovery", () => {
renderWithMantine(
,
);
expect(screen.getByText("Supported versions")).toBeInTheDocument();
// Extensions moved out of Discovery into their own era-transparent section.
expect(screen.queryByText("Discovery")).toBeInTheDocument();
// Exactly three em dashes: empty supported versions, plus the two extension
// sections (the fixtures advertise none).
expect(screen.getAllByText("—")).toHaveLength(3);
});
it("shows server extensions on a LEGACY connection (no discovery), from server capabilities (#1740)", () => {
renderWithMantine(
,
);
// No discoverResult (legacy) but the server's extension still renders,
// sourced from the negotiated server capabilities rather than discovery.
expect(screen.queryByText("Discovery")).not.toBeInTheDocument();
expect(screen.getByText("Server Extensions")).toBeInTheDocument();
expect(
screen.getByText("io.modelcontextprotocol/tasks"),
).toBeInTheDocument();
});
it("shows the Inspector's own advertised extensions (#1740)", () => {
renderWithMantine(
,
);
expect(
screen.getByText("Client Advertised Extensions"),
).toBeInTheDocument();
// One row per identifier, not a comma-joined string: two ~30-character
// ids wrap mid-name in a half-width column.
expect(
screen.getByText("io.modelcontextprotocol/tasks"),
).toBeInTheDocument();
expect(screen.getByText("io.modelcontextprotocol/ui")).toBeInTheDocument();
});
it("renders em-dashes for the extensions sections when neither side advertises any (#1740)", () => {
renderWithMantine(
,
);
expect(screen.getByText("Server Extensions")).toBeInTheDocument();
expect(
screen.getByText("Client Advertised Extensions"),
).toBeInTheDocument();
// Exactly two em dashes: the two extension sections (the server version is
// present in the fixture, so it does not em-dash).
expect(screen.getAllByText("—")).toHaveLength(2);
});
it("hides the Skills section when the server declares no skills extension (#2234)", () => {
renderWithMantine(
,
);
expect(
screen.queryByText("Skills Extension Options"),
).not.toBeInTheDocument();
});
it("shows the Skills extension and its directoryRead sub-flag (#2234)", () => {
// The generic "Server Extensions" row lists the identifier; the sub-flag
// that gates `resources/directory/read` is what this section adds, and it
// is the fact a server author opens the modal to confirm.
renderWithMantine(
,
);
expect(screen.getByText("Skills Extension Options")).toBeInTheDocument();
// Asserted on the attribute, not the copy: "Not supported" contains
// "Supported", so a text check would pass for either answer.
expect(screen.getByTestId("skills-directory-read")).toHaveAttribute(
"data-supported",
"true",
);
// The section states the sub-option, not the identifier — that is already
// in "Server Extensions" and repeating it would add nothing.
expect(screen.getByText("resources/directory/read")).toBeInTheDocument();
});
it("reports directory read as unsupported for a bare skills declaration (#2234)", () => {
renderWithMantine(
,
);
expect(screen.getByTestId("skills-directory-read")).toHaveAttribute(
"data-supported",
"false",
);
});
it("renders client registration kind when provided", () => {
renderWithMantine(
,
);
expect(screen.getByText("Client registration")).toBeInTheDocument();
expect(screen.getByText("Client ID Metadata (CIMD)")).toBeInTheDocument();
});
it("renders OAuth details when provided", () => {
renderWithMantine(
,
);
expect(screen.getByText("OAuth Details")).toBeInTheDocument();
expect(screen.getByText("Standard")).toBeInTheDocument();
expect(screen.getByText("Authorized")).toBeInTheDocument();
expect(screen.getByText("client-abc")).toBeInTheDocument();
expect(screen.getByText("Auth URL")).toBeInTheDocument();
expect(
screen.getByText("https://auth.example.com/authorize"),
).toBeInTheDocument();
expect(screen.getByText("read, write")).toBeInTheDocument();
expect(screen.getByText("token-123")).toBeInTheDocument();
});
it("renders EMA idp session when provided", () => {
renderWithMantine(
,
);
expect(screen.getByText("Enterprise-managed")).toBeInTheDocument();
expect(screen.getByText("IdP session")).toBeInTheDocument();
expect(screen.getByText("Signed in")).toBeInTheDocument();
});
it("renders the EMA idp session as Session expired", () => {
renderWithMantine(
,
);
expect(screen.getByText("IdP session")).toBeInTheDocument();
expect(screen.getByText("Session expired")).toBeInTheDocument();
});
it("renders the EMA idp session as Not signed in for the none state", () => {
renderWithMantine(
,
);
expect(screen.getByText("IdP session")).toBeInTheDocument();
expect(screen.getByText("Not signed in")).toBeInTheDocument();
});
it("omits the IdP session row when EMA oauth has no idpSession", () => {
renderWithMantine(
,
);
expect(screen.getByText("Enterprise-managed")).toBeInTheDocument();
expect(screen.queryByText("IdP session")).not.toBeInTheDocument();
});
it("hides optional OAuth fields that are not provided", () => {
renderWithMantine(
,
);
expect(screen.getByText("OAuth Details")).toBeInTheDocument();
expect(screen.getByText("Not authorized")).toBeInTheDocument();
expect(screen.queryByText("Auth URL")).not.toBeInTheDocument();
expect(screen.queryByText("Scopes")).not.toBeInTheDocument();
expect(screen.queryByText("Access Token")).not.toBeInTheDocument();
expect(screen.queryByText("ID Token")).not.toBeInTheDocument();
});
it("renders the ID Token row when the token set carries one", () => {
renderWithMantine(
,
);
expect(screen.getByText("Access Token")).toBeInTheDocument();
expect(screen.getByText("ID Token")).toBeInTheDocument();
expect(screen.getByText("id-token-456")).toBeInTheDocument();
});
it("gives the two token rows' controls distinct accessible names", () => {
// Both rows carry a copy control, and both tokens here are JWTs so both
// carry a decode toggle. Screen-reader button navigation has only the
// accessible name to go on, so the four must not collide (#2019 review).
const jwt = "eyJhbGciOiJub25lIn0.eyJzdWIiOiJ1c2VyIn0.";
renderWithMantine(
,
);
const names = screen
.getAllByRole("button")
.map((button) => button.getAttribute("aria-label") ?? button.textContent)
.filter((name): name is string => Boolean(name));
expect(new Set(names).size).toBe(names.length);
for (const name of [
"Copy Access Token",
"Copy ID Token",
"Decode JWT for Access Token",
"Decode JWT for ID Token",
]) {
expect(screen.getByRole("button", { name })).toBeInTheDocument();
}
});
it("renders the ID Token row on its own when there is no access token", () => {
renderWithMantine(
,
);
expect(screen.queryByText("Access Token")).not.toBeInTheDocument();
expect(screen.getByText("ID Token")).toBeInTheDocument();
});
it("omits the ID Token row when only an access token is present", () => {
renderWithMantine(
,
);
expect(screen.getByText("Access Token")).toBeInTheDocument();
expect(screen.queryByText("ID Token")).not.toBeInTheDocument();
});
it("does not render OAuth section when oauth prop is omitted", () => {
renderWithMantine(
,
);
expect(screen.queryByText("OAuth Details")).not.toBeInTheDocument();
});
it("calls onClearOAuth from the OAuth section", async () => {
const user = userEvent.setup();
const onClearOAuth = vi.fn();
renderWithMantine(
,
);
await user.click(
screen.getByRole("button", {
name: CLEAR_OAUTH_STATE_AND_DISCONNECT_LABEL,
}),
);
expect(onClearOAuth).toHaveBeenCalledTimes(1);
});
});