* 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
79 changed files with 8117 additions and 30 deletions
5
.github/workflows/main.yml
vendored
5
.github/workflows/main.yml
vendored
|
|
@ -35,5 +35,6 @@ jobs:
|
|||
working-directory: ./clients/web
|
||||
run: npm run build
|
||||
|
||||
# - name: Run tests
|
||||
# run: npm run test
|
||||
- name: Run tests with coverage
|
||||
working-directory: ./clients/web
|
||||
run: npm run test:coverage
|
||||
|
|
|
|||
|
|
@ -64,6 +64,10 @@ All work should be driven by items on the project board.
|
|||
- Ensure all code has corresponding tests
|
||||
- Ensure test coverage for each file is at least 90%
|
||||
- In unit tests that expect error output, suppress it from the console
|
||||
- Run unit tests with `npm run test` (or `npm run test:watch` during development) from `clients/web/`
|
||||
- Run `npm run test:coverage` to verify the per-file gate: lines ≥ 90, statements ≥ 85, functions ≥ 80, branches ≥ 50 (CI enforces this gate). Branches is intentionally relaxed because Mantine portal/media-query branches are not exercisable under happy-dom; new business-logic branches should still be covered.
|
||||
- Test files live alongside the source as `<Name>.test.tsx` (or `.test.ts` for non-React modules)
|
||||
- Use `renderWithMantine` from `src/test/renderWithMantine.tsx` to render components — it wraps in `MantineProvider` with the project theme
|
||||
|
||||
### Responding to Code Reviews
|
||||
- When asked to respond to a code review of a PR,
|
||||
|
|
|
|||
1
clients/web/.gitignore
vendored
1
clients/web/.gitignore
vendored
|
|
@ -11,6 +11,7 @@ node_modules
|
|||
dist
|
||||
dist-ssr
|
||||
storybook-static
|
||||
coverage
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
|
|||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([globalIgnores(['dist', 'storybook-static']), {
|
||||
export default defineConfig([globalIgnores(['dist', 'storybook-static', 'coverage']), {
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
|
|
@ -20,4 +20,11 @@ export default defineConfig([globalIgnores(['dist', 'storybook-static']), {
|
|||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
}, {
|
||||
// Test setup files re-export utilities and mix components with helpers — the
|
||||
// react-refresh rule does not apply.
|
||||
files: ['src/test/**/*.{ts,tsx}', 'src/**/*.test.{ts,tsx}'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': 'off',
|
||||
},
|
||||
}, ...storybook.configs["flat/recommended"]])
|
||||
|
|
|
|||
90
clients/web/package-lock.json
generated
90
clients/web/package-lock.json
generated
|
|
@ -28,6 +28,9 @@
|
|||
"@storybook/addon-onboarding": "^10.2.19",
|
||||
"@storybook/addon-vitest": "^10.2.19",
|
||||
"@storybook/react-vite": "^10.2.19",
|
||||
"@testing-library/jest-dom": "^6.9.1",
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"@types/node": "^24.12.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
|
|
@ -39,6 +42,7 @@
|
|||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
"eslint-plugin-storybook": "^10.2.19",
|
||||
"globals": "^17.4.0",
|
||||
"happy-dom": "^20.9.0",
|
||||
"playwright": "^1.58.2",
|
||||
"prettier": "^3.8.1",
|
||||
"storybook": "^10.2.19",
|
||||
|
|
@ -2059,6 +2063,34 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@testing-library/react": {
|
||||
"version": "16.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
|
||||
"integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@testing-library/dom": "^10.0.0",
|
||||
"@types/react": "^18.0.0 || ^19.0.0",
|
||||
"@types/react-dom": "^18.0.0 || ^19.0.0",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/user-event": {
|
||||
"version": "14.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
|
||||
|
|
@ -2226,6 +2258,23 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/whatwg-mimetype": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
|
||||
"integrity": "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.18.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
|
||||
"integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "8.57.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.57.0.tgz",
|
||||
|
|
@ -3570,6 +3619,19 @@
|
|||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
|
||||
"integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/error-ex": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
|
||||
|
|
@ -4373,6 +4435,24 @@
|
|||
"license": "ISC",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/happy-dom": {
|
||||
"version": "20.9.0",
|
||||
"resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.9.0.tgz",
|
||||
"integrity": "sha512-GZZ9mKe8r646NUAf/zemnGbjYh4Bt8/MqASJY+pSm5ZDtc3YQox+4gsLI7yi1hba6o+eCsGxpHn5+iEVn31/FQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": ">=20.0.0",
|
||||
"@types/whatwg-mimetype": "^3.0.2",
|
||||
"@types/ws": "^8.18.1",
|
||||
"entities": "^7.0.1",
|
||||
"whatwg-mimetype": "^3.0.0",
|
||||
"ws": "^8.18.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
|
|
@ -7204,6 +7284,16 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/whatwg-mimetype": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
|
||||
"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -9,10 +9,14 @@
|
|||
"lint": "eslint .",
|
||||
"format": "prettier --write src",
|
||||
"format:check": "prettier --check src",
|
||||
"validate": "npm run format:check && npm run lint && npm run build",
|
||||
"validate": "npm run format:check && npm run lint && npm run build && npm run test:coverage",
|
||||
"preview": "vite preview",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
"build-storybook": "storybook build",
|
||||
"test": "vitest run --project=unit",
|
||||
"test:watch": "vitest --project=unit",
|
||||
"test:coverage": "vitest run --project=unit --coverage",
|
||||
"test:storybook": "vitest run --project=storybook"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
|
|
@ -35,12 +39,16 @@
|
|||
"@storybook/addon-onboarding": "^10.2.19",
|
||||
"@storybook/addon-vitest": "^10.2.19",
|
||||
"@storybook/react-vite": "^10.2.19",
|
||||
"@testing-library/jest-dom": "^6.9.1",
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"@types/node": "^24.12.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.0",
|
||||
"@vitest/browser-playwright": "^4.1.0",
|
||||
"@vitest/coverage-v8": "^4.1.0",
|
||||
"happy-dom": "^20.9.0",
|
||||
"eslint": "^9.39.4",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue