* chore: close a batch of quality-gate & tidy gaps (#1785 #1787 #1789 #1790 #1767) Bundles five small, related tidy/gate items into one PR: - #1785: delete the dead src/types/navigation.ts InspectorTab (0 importers; duplicated/drifted from utils/inspectorTabs InspectorTabId). src/types/ now holds only ambient .d.ts stubs. - #1787: add src/hooks/** to the web coverage `include` (it was silently outside the ≥90 gate) and add tests for the two untested hooks, useServerJsonImport and useImportClientConfig, bringing every hook to ≥90 on lines/statements/functions/branches. - #1789: widen clients/{cli,tui,launcher} format/format:check to their top-level configs; add root format:shared / format:check:shared covering test-servers/src/**, vitest.shared.mts, and the repo-root eslint.config.js. - #1790: pin prettier to an exact version (3.8.4, dropping the ^3.8.1 caret) in all five package.json files so the format gate's verdict can't shift with an in-range patch bump; lockfiles synced. - #1767: its root-file format+lint gap is closed here (format:shared + a new lint:shared via a second files block in the root eslint.config.js; web/server/ was already gated in #1788). Its larger cli/tui __tests__ typecheck piece (76 type errors) is split out to #1791. Prettier-normalized the newly-covered files (pure formatting). No runtime behavior change. `npm run ci` green. Closes #1785 Closes #1787 Closes #1789 Closes #1790 Closes #1767 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XNdjEPKLG637X8YmhDiEk5 * chore: address PR #1792 review findings - #1789 gap: widen clients/web format to include .storybook and clients/ launcher format to include scripts/; reformat the 3 .storybook files (were non-conforming under the pinned prettier 3.8.4). Audited all 885 tracked source files — now fully prettier-clean. - Export VALIDATE_DEBOUNCE_MS / COLLAPSE_DELAY_MS / HIGHLIGHT_DURATION_MS from useServerJsonImport and use them in the test instead of hardcoded 300/1000/250 (so a tuned constant can't silently desync the test). - Assert the symmetric renameErrors["alpha"] alongside ["beta"] so a one-directional collision-check regression fails. - Comment the blank-rename test as exercising a UI-unreachable defensive branch (canImport gates submit). - Un-stale the two specification/v2_ux_interfaces_plan.md references to the now-removed navigation.ts InspectorTab. npm run ci green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XNdjEPKLG637X8YmhDiEk5 * docs: sync AGENTS.md format-surface description with the widened globs (#1792 review r2) 1ce3b64 added .storybook to clients/web's format glob and scripts/ to clients/launcher's, but AGENTS.md:222 still described the pre-fix scope. Bring it in line and note the non-recursive top-level glob is why nested dirs are named explicitly. Docs only. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XNdjEPKLG637X8YmhDiEk5 * chore: handle PR #1792 round-3 follow-ups in-place (format-coverage guard, uniform globs, theme gate) Rather than defer these to tickets, fold them into this PR: - Obs 2: widen every client + root format glob to a uniform *.{ts,tsx,mts,cts,js,jsx,mjs,cjs} so a future .mts/.cjs/.tsx top-level file can't silently slip the gate. - Obs 1: add scripts/verify-format-coverage.mjs (wired into `validate`) — it parses the format:check globs out of every package.json, enumerates all tracked source files, and fails listing any not covered by a glob. The durable, standing version of #1789's one-shot audit; negative-tested. - Obs 3: bring src/theme/** under the coverage gate (21/23 files were already ≥90 transitively; add Paper.test.tsx for the one laggard, Paper.ts). src/App.tsx (~4.5k lines, ~42% branches) is converted from a silent omission into an explicit, documented exclusion (comment on the coverage `include` + AGENTS.md) — gating it is a dedicated effort, not a whitelist tweak. npm run ci green (the new guard reports 885/885 tracked source files gated). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XNdjEPKLG637X8YmhDiEk5 * chore: address PR #1792 round-4 findings (guard hardening, docs, exclusion list) - Harden verify-format-coverage: only harvest format:check globs from scripts transitively reachable from `validate` (via npm run refs), so an unwired/renamed format:check no longer counts as coverage. Negative-tested — renaming clients/web format:check to an unreferenced name now fails the guard (627 files flagged) instead of passing. - Name src/main.tsx and src/index.ts (browser + bin bootstraps) alongside src/App.tsx in the coverage-include comment and AGENTS.md, so the documented exclusion list is complete rather than claiming App.tsx is the only one. - Doc sync: document verify:format-coverage (AGENTS.md + README script table + scripts/ layout line), fix the `validate` ordering (verify:format- coverage now runs before validate:core) in AGENTS.md and README, and update the quoted globs to the uniform *.{ts,tsx,mts,cts,js,jsx,mjs,cjs} / test-servers *.{ts,tsx,mts,cts}. npm run ci green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XNdjEPKLG637X8YmhDiEk5 * chore: address PR #1792 round-5 findings (airtight guard + doc/config sync) - verify-format-coverage: assert the root `validate` chain invokes each client's `validate` (cd <dir> && npm run validate), closing the last reachability edge — a client dropped from the root chain now fails the guard even though its own globs still exist. Negative-tested. - eslint.config.js: widen the shared `files` block to test-servers/src/**/*.{ts,tsx,mts,cts} to match the widened lint:shared glob, so a future .mts/.cts there is lint-gated, not just prettier-gated. - AGENTS.md: scope the "uniform extension set" claim to client globs (core stays {ts,tsx}, shared {ts,tsx,mts,cts}), with verify:format-coverage as the backstop — removing the self-contradiction with the line below. npm run ci green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XNdjEPKLG637X8YmhDiEk5 --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cliff Hall
GitHub
parent
166ed38e7f
commit
4defa32ac6
24 changed files with 1221 additions and 220 deletions
|
|
@ -1,18 +1,18 @@
|
|||
import js from '@eslint/js';
|
||||
import globals from 'globals';
|
||||
import tseslint from 'typescript-eslint';
|
||||
import { defineConfig, globalIgnores } from 'eslint/config';
|
||||
import js from "@eslint/js";
|
||||
import globals from "globals";
|
||||
import tseslint from "typescript-eslint";
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
|
||||
// The CLI is plain Node TypeScript (no React/browser), so this mirrors the web
|
||||
// client's flat config minus the React/Storybook plugins.
|
||||
export default defineConfig([
|
||||
globalIgnores(['build', 'coverage']),
|
||||
globalIgnores(["build", "coverage"]),
|
||||
{
|
||||
files: ['**/*.ts'],
|
||||
files: ["**/*.ts"],
|
||||
extends: [js.configs.recommended, tseslint.configs.recommended],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2022,
|
||||
sourceType: 'module',
|
||||
sourceType: "module",
|
||||
globals: globals.node,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
2
clients/cli/package-lock.json
generated
2
clients/cli/package-lock.json
generated
|
|
@ -29,7 +29,7 @@
|
|||
"@vitest/coverage-v8": "^4.1.0",
|
||||
"eslint": "^9.39.4",
|
||||
"globals": "^17.4.0",
|
||||
"prettier": "^3.8.1",
|
||||
"prettier": "3.8.4",
|
||||
"tsup": "^8.5.0",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.56.1",
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@
|
|||
"test:cli-metadata": "vitest run metadata.test.ts",
|
||||
"pretest": "npm run test-servers:build && npm run build",
|
||||
"lint": "eslint .",
|
||||
"format": "prettier --write src __tests__",
|
||||
"format:check": "prettier --check src __tests__"
|
||||
"format": "prettier --write src __tests__ \"*.{ts,tsx,mts,cts,js,jsx,mjs,cjs}\"",
|
||||
"format:check": "prettier --check src __tests__ \"*.{ts,tsx,mts,cts,js,jsx,mjs,cjs}\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@modelcontextprotocol/client": "2.0.0-beta.5",
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
"@vitest/coverage-v8": "^4.1.0",
|
||||
"eslint": "^9.39.4",
|
||||
"globals": "^17.4.0",
|
||||
"prettier": "^3.8.1",
|
||||
"prettier": "3.8.4",
|
||||
"tsup": "^8.5.0",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.56.1",
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
import { defineConfig } from 'tsup';
|
||||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { defineConfig } from "tsup";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const repoRoot = path.resolve(dirname, '../..');
|
||||
const repoRoot = path.resolve(dirname, "../..");
|
||||
|
||||
export default defineConfig({
|
||||
entry: ['src/index.ts'],
|
||||
format: ['esm'],
|
||||
outDir: 'build',
|
||||
entry: ["src/index.ts"],
|
||||
format: ["esm"],
|
||||
outDir: "build",
|
||||
clean: true,
|
||||
// No source maps in the published bundle — they roughly double the on-disk
|
||||
// size and aren't needed at runtime (debug via `npm run dev` on the source).
|
||||
sourcemap: false,
|
||||
target: 'node22',
|
||||
platform: 'node',
|
||||
target: "node22",
|
||||
platform: "node",
|
||||
// Bundle core source; leave npm deps external.
|
||||
noExternal: [/^@inspector\/core/],
|
||||
external: [
|
||||
'@napi-rs/keyring',
|
||||
'@modelcontextprotocol/client',
|
||||
'@modelcontextprotocol/core',
|
||||
'commander',
|
||||
'pino',
|
||||
"@napi-rs/keyring",
|
||||
"@modelcontextprotocol/client",
|
||||
"@modelcontextprotocol/core",
|
||||
"commander",
|
||||
"pino",
|
||||
],
|
||||
esbuildOptions(options) {
|
||||
options.alias = {
|
||||
'@inspector/core': path.join(repoRoot, 'core'),
|
||||
"@inspector/core": path.join(repoRoot, "core"),
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { defineConfig } from 'vitest/config';
|
||||
import { vitestSharedPaths } from '../../vitest.shared.mts';
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { defineConfig } from "vitest/config";
|
||||
import { vitestSharedPaths } from "../../vitest.shared.mts";
|
||||
|
||||
const dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const { projectResolve } = vitestSharedPaths(dirname);
|
||||
|
|
@ -10,8 +10,8 @@ export default defineConfig({
|
|||
resolve: projectResolve,
|
||||
test: {
|
||||
globals: false,
|
||||
environment: 'node',
|
||||
include: ['__tests__/**/*.test.ts'],
|
||||
environment: "node",
|
||||
include: ["__tests__/**/*.test.ts"],
|
||||
testTimeout: 15000,
|
||||
// The in-process runner (__tests__/helpers/cli-runner.ts) patches
|
||||
// process.std{out,err}.write to capture CLI output. Test files run in
|
||||
|
|
@ -19,18 +19,18 @@ export default defineConfig({
|
|||
// those global patches never overlap. `forks` is vitest's default, but pin
|
||||
// it explicitly so the capture isolation can't regress to a shared-thread
|
||||
// pool. See #1484.
|
||||
pool: 'forks',
|
||||
pool: "forks",
|
||||
coverage: {
|
||||
provider: 'v8',
|
||||
reporter: ['text', 'html', 'json-summary'],
|
||||
include: ['src/**/*.ts'],
|
||||
provider: "v8",
|
||||
reporter: ["text", "html", "json-summary"],
|
||||
include: ["src/**/*.ts"],
|
||||
exclude: [
|
||||
// Binary bootstrap: shebang + `isMain` guard + `runCli()`/`process.exit`
|
||||
// wiring that only runs when launched as the real binary. Exercised by
|
||||
// the out-of-process layer (__tests__/e2e.test.ts + scripts/smoke-cli.mjs),
|
||||
// which spawns build/index.js and so can't be measured under in-process
|
||||
// coverage. Mirrors web's `**/index.{ts,tsx}` exclusion.
|
||||
'src/index.ts',
|
||||
"src/index.ts",
|
||||
],
|
||||
thresholds: {
|
||||
perFile: true,
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
import js from '@eslint/js';
|
||||
import globals from 'globals';
|
||||
import tseslint from 'typescript-eslint';
|
||||
import { defineConfig, globalIgnores } from 'eslint/config';
|
||||
import js from "@eslint/js";
|
||||
import globals from "globals";
|
||||
import tseslint from "typescript-eslint";
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
|
||||
// The launcher is plain Node TypeScript (no React/browser), so this mirrors
|
||||
// the web client's flat config minus the React/Storybook plugins.
|
||||
export default defineConfig([
|
||||
globalIgnores(['build', 'coverage']),
|
||||
globalIgnores(["build", "coverage"]),
|
||||
{
|
||||
files: ['**/*.{ts,mts}'],
|
||||
files: ["**/*.{ts,mts}"],
|
||||
extends: [js.configs.recommended, tseslint.configs.recommended],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2022,
|
||||
sourceType: 'module',
|
||||
sourceType: "module",
|
||||
globals: globals.node,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
2
clients/launcher/package-lock.json
generated
2
clients/launcher/package-lock.json
generated
|
|
@ -19,7 +19,7 @@
|
|||
"@vitest/coverage-v8": "^4.1.0",
|
||||
"eslint": "^9.39.4",
|
||||
"globals": "^17.4.0",
|
||||
"prettier": "^3.8.1",
|
||||
"prettier": "3.8.4",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.56.1",
|
||||
"vitest": "^4.1.0"
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
"build": "tsc",
|
||||
"postbuild": "node scripts/make-executable.js",
|
||||
"lint": "eslint .",
|
||||
"format": "prettier --write src __tests__",
|
||||
"format:check": "prettier --check src __tests__",
|
||||
"format": "prettier --write src __tests__ scripts \"*.{ts,tsx,mts,cts,js,jsx,mjs,cjs}\"",
|
||||
"format:check": "prettier --check src __tests__ scripts \"*.{ts,tsx,mts,cts,js,jsx,mjs,cjs}\"",
|
||||
"test": "vitest run",
|
||||
"test:coverage": "vitest run --coverage",
|
||||
"validate": "npm run format:check && npm run lint && npm run build && npm run test"
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
"@vitest/coverage-v8": "^4.1.0",
|
||||
"eslint": "^9.39.4",
|
||||
"globals": "^17.4.0",
|
||||
"prettier": "^3.8.1",
|
||||
"prettier": "3.8.4",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.56.1",
|
||||
"vitest": "^4.1.0"
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import { defineConfig } from 'vitest/config';
|
||||
import { defineConfig } from "vitest/config";
|
||||
|
||||
export default defineConfig({
|
||||
test: {
|
||||
globals: false,
|
||||
environment: 'node',
|
||||
include: ['__tests__/**/*.test.ts'],
|
||||
environment: "node",
|
||||
include: ["__tests__/**/*.test.ts"],
|
||||
coverage: {
|
||||
provider: 'v8',
|
||||
reporter: ['text', 'html', 'json-summary'],
|
||||
include: ['src/**/*.ts'],
|
||||
provider: "v8",
|
||||
reporter: ["text", "html", "json-summary"],
|
||||
include: ["src/**/*.ts"],
|
||||
exclude: [
|
||||
// Binary bootstrap: shebang + commander wiring that dynamically imports
|
||||
// each client's build/index.js and dispatches via process.exit. It only
|
||||
|
|
@ -16,7 +16,7 @@ export default defineConfig({
|
|||
// launcher smokes (smoke:launcher / smoke:cli / smoke:tui / smoke:web).
|
||||
// Mirrors the cli/web `index.ts` exclusion. The pure arg-parsing logic
|
||||
// lives in parse-launcher-argv.ts, which is unit-tested and gated below.
|
||||
'src/index.ts',
|
||||
"src/index.ts",
|
||||
],
|
||||
thresholds: {
|
||||
perFile: true,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import js from '@eslint/js';
|
||||
import globals from 'globals';
|
||||
import reactHooks from 'eslint-plugin-react-hooks';
|
||||
import tseslint from 'typescript-eslint';
|
||||
import { defineConfig, globalIgnores } from 'eslint/config';
|
||||
import js from "@eslint/js";
|
||||
import globals from "globals";
|
||||
import reactHooks from "eslint-plugin-react-hooks";
|
||||
import tseslint from "typescript-eslint";
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
|
||||
// The TUI is Node + React (Ink) TypeScript. This mirrors the web client's flat
|
||||
// config minus the browser-only plugins (react-refresh / Storybook).
|
||||
|
|
@ -15,19 +15,19 @@ import { defineConfig, globalIgnores } from 'eslint/config';
|
|||
// component/hook surface that is itself the interim-excluded one tracked in
|
||||
// #1501. Enforcing them would require refactoring code out of scope here.
|
||||
export default defineConfig([
|
||||
globalIgnores(['build', 'coverage']),
|
||||
globalIgnores(["build", "coverage"]),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
plugins: { 'react-hooks': reactHooks },
|
||||
files: ["**/*.{ts,tsx}"],
|
||||
plugins: { "react-hooks": reactHooks },
|
||||
extends: [js.configs.recommended, tseslint.configs.recommended],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2022,
|
||||
sourceType: 'module',
|
||||
sourceType: "module",
|
||||
globals: globals.node,
|
||||
},
|
||||
rules: {
|
||||
'react-hooks/rules-of-hooks': 'error',
|
||||
'react-hooks/exhaustive-deps': 'warn',
|
||||
"react-hooks/rules-of-hooks": "error",
|
||||
"react-hooks/exhaustive-deps": "warn",
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
2
clients/tui/package-lock.json
generated
2
clients/tui/package-lock.json
generated
|
|
@ -34,7 +34,7 @@
|
|||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"globals": "^17.4.0",
|
||||
"ink-testing-library": "^4.0.0",
|
||||
"prettier": "^3.8.1",
|
||||
"prettier": "3.8.4",
|
||||
"tsup": "^8.5.0",
|
||||
"tsx": "^4.21.0",
|
||||
"typescript": "~5.9.3",
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@
|
|||
"test": "vitest run",
|
||||
"test:coverage": "vitest run --coverage",
|
||||
"lint": "eslint .",
|
||||
"format": "prettier --write src __tests__ index.ts tui.tsx dev.ts",
|
||||
"format:check": "prettier --check src __tests__ index.ts tui.tsx dev.ts"
|
||||
"format": "prettier --write src __tests__ \"*.{ts,tsx,mts,cts,js,jsx,mjs,cjs}\"",
|
||||
"format:check": "prettier --check src __tests__ \"*.{ts,tsx,mts,cts,js,jsx,mjs,cjs}\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@modelcontextprotocol/client": "2.0.0-beta.5",
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"globals": "^17.4.0",
|
||||
"ink-testing-library": "^4.0.0",
|
||||
"prettier": "^3.8.1",
|
||||
"prettier": "3.8.4",
|
||||
"tsup": "^8.5.0",
|
||||
"tsx": "^4.21.0",
|
||||
"typescript": "~5.9.3",
|
||||
|
|
|
|||
|
|
@ -1,37 +1,37 @@
|
|||
import { defineConfig } from 'tsup';
|
||||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { defineConfig } from "tsup";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const repoRoot = path.resolve(dirname, '../..');
|
||||
const repoRoot = path.resolve(dirname, "../..");
|
||||
|
||||
export default defineConfig({
|
||||
entry: ['index.ts'],
|
||||
format: ['esm'],
|
||||
outDir: 'build',
|
||||
entry: ["index.ts"],
|
||||
format: ["esm"],
|
||||
outDir: "build",
|
||||
clean: true,
|
||||
// No source maps in the published bundle — they roughly double the on-disk
|
||||
// size and aren't needed at runtime (debug via `npm run dev` on the source).
|
||||
sourcemap: false,
|
||||
target: 'node22',
|
||||
platform: 'node',
|
||||
target: "node22",
|
||||
platform: "node",
|
||||
noExternal: [/^@inspector\/core/],
|
||||
external: [
|
||||
'react',
|
||||
'ink',
|
||||
'ink-form',
|
||||
'ink-scroll-view',
|
||||
'open',
|
||||
'commander',
|
||||
'pino',
|
||||
'@modelcontextprotocol/client',
|
||||
'@modelcontextprotocol/core',
|
||||
'@napi-rs/keyring',
|
||||
"react",
|
||||
"ink",
|
||||
"ink-form",
|
||||
"ink-scroll-view",
|
||||
"open",
|
||||
"commander",
|
||||
"pino",
|
||||
"@modelcontextprotocol/client",
|
||||
"@modelcontextprotocol/core",
|
||||
"@napi-rs/keyring",
|
||||
],
|
||||
esbuildOptions(options) {
|
||||
options.alias = {
|
||||
'@inspector/core': path.join(repoRoot, 'core'),
|
||||
"@inspector/core": path.join(repoRoot, "core"),
|
||||
};
|
||||
options.jsx = 'automatic';
|
||||
options.jsx = "automatic";
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,18 +1,15 @@
|
|||
import type { StorybookConfig } from '@storybook/react-vite';
|
||||
import type { StorybookConfig } from "@storybook/react-vite";
|
||||
|
||||
const config: StorybookConfig = {
|
||||
"stories": [
|
||||
"../src/**/*.mdx",
|
||||
"../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
|
||||
],
|
||||
"addons": [
|
||||
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
|
||||
addons: [
|
||||
"@chromatic-com/storybook",
|
||||
"@storybook/addon-vitest",
|
||||
"@storybook/addon-a11y",
|
||||
"@storybook/addon-docs",
|
||||
"@storybook/addon-onboarding"
|
||||
"@storybook/addon-onboarding",
|
||||
],
|
||||
"framework": "@storybook/react-vite",
|
||||
framework: "@storybook/react-vite",
|
||||
previewHead: (head) => `
|
||||
${head}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
|
|
@ -20,4 +17,4 @@ const config: StorybookConfig = {
|
|||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet" />
|
||||
`,
|
||||
};
|
||||
export default config;
|
||||
export default config;
|
||||
|
|
|
|||
|
|
@ -1,64 +1,74 @@
|
|||
import type { Preview } from '@storybook/react-vite'
|
||||
import { MantineProvider, useMantineColorScheme, type CSSVariablesResolver } from '@mantine/core'
|
||||
import { Notifications } from '@mantine/notifications'
|
||||
import '@mantine/core/styles.css'
|
||||
import '@mantine/notifications/styles.css'
|
||||
import '../src/App.css'
|
||||
import { theme } from '../src/theme/theme'
|
||||
import { useEffect } from 'react'
|
||||
import type { Preview } from "@storybook/react-vite";
|
||||
import {
|
||||
MantineProvider,
|
||||
useMantineColorScheme,
|
||||
type CSSVariablesResolver,
|
||||
} from "@mantine/core";
|
||||
import { Notifications } from "@mantine/notifications";
|
||||
import "@mantine/core/styles.css";
|
||||
import "@mantine/notifications/styles.css";
|
||||
import "../src/App.css";
|
||||
import { theme } from "../src/theme/theme";
|
||||
import { useEffect } from "react";
|
||||
|
||||
// eslint-disable-next-line react-refresh/only-export-components
|
||||
function ColorSchemeWrapper({
|
||||
colorScheme,
|
||||
children,
|
||||
}: {
|
||||
colorScheme: 'light' | 'dark'
|
||||
children: React.ReactNode
|
||||
colorScheme: "light" | "dark";
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const { setColorScheme } = useMantineColorScheme()
|
||||
const { setColorScheme } = useMantineColorScheme();
|
||||
|
||||
useEffect(() => {
|
||||
setColorScheme(colorScheme)
|
||||
}, [colorScheme, setColorScheme])
|
||||
setColorScheme(colorScheme);
|
||||
}, [colorScheme, setColorScheme]);
|
||||
|
||||
return <>{children}</>
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
const resolver: CSSVariablesResolver = () => ({
|
||||
variables: {},
|
||||
light: {},
|
||||
dark: {
|
||||
'--mantine-color-body': 'var(--mantine-color-dark-9)',
|
||||
"--mantine-color-body": "var(--mantine-color-dark-9)",
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const preview: Preview = {
|
||||
globalTypes: {
|
||||
colorScheme: {
|
||||
description: 'Mantine color scheme',
|
||||
description: "Mantine color scheme",
|
||||
toolbar: {
|
||||
title: 'Color Scheme',
|
||||
icon: 'mirror',
|
||||
title: "Color Scheme",
|
||||
icon: "mirror",
|
||||
items: [
|
||||
{ value: 'light', title: 'Light', icon: 'sun' },
|
||||
{ value: 'dark', title: 'Dark', icon: 'moon' },
|
||||
{ value: "light", title: "Light", icon: "sun" },
|
||||
{ value: "dark", title: "Dark", icon: "moon" },
|
||||
],
|
||||
dynamicTitle: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
initialGlobals: {
|
||||
colorScheme: 'light',
|
||||
colorScheme: "light",
|
||||
},
|
||||
decorators: [
|
||||
(Story, context) => {
|
||||
const isFullscreen = context.parameters?.layout === 'fullscreen'
|
||||
const isFullscreen = context.parameters?.layout === "fullscreen";
|
||||
return (
|
||||
<MantineProvider theme={theme} defaultColorScheme="light" cssVariablesResolver={resolver}>
|
||||
<ColorSchemeWrapper colorScheme={context.globals.colorScheme ?? 'light'}>
|
||||
<MantineProvider
|
||||
theme={theme}
|
||||
defaultColorScheme="light"
|
||||
cssVariablesResolver={resolver}
|
||||
>
|
||||
<ColorSchemeWrapper
|
||||
colorScheme={context.globals.colorScheme ?? "light"}
|
||||
>
|
||||
<Notifications position="top-right" />
|
||||
{isFullscreen ? (
|
||||
<div style={{ height: '100vh', overflow: 'hidden' }}>
|
||||
<div style={{ height: "100vh", overflow: "hidden" }}>
|
||||
<Story />
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -66,7 +76,7 @@ const preview: Preview = {
|
|||
)}
|
||||
</ColorSchemeWrapper>
|
||||
</MantineProvider>
|
||||
)
|
||||
);
|
||||
},
|
||||
],
|
||||
parameters: {
|
||||
|
|
@ -80,7 +90,7 @@ const preview: Preview = {
|
|||
// `'error'` fails the Storybook play-function tests (part of `npm run ci`)
|
||||
// on any axe violation, so the zero-violation state this PR reached is
|
||||
// enforced going forward rather than being a point-in-time result.
|
||||
test: 'error',
|
||||
test: "error",
|
||||
// Stories render presentational components (and whole screens) in
|
||||
// isolation, outside the app's `AppShell` — which is what provides the
|
||||
// page landmarks (`<main>`, nav) in the real app. The `region` rule
|
||||
|
|
@ -90,11 +100,11 @@ const preview: Preview = {
|
|||
// by the components under test. Disable it here so the a11y panel surfaces
|
||||
// only rules the components can actually own.
|
||||
config: {
|
||||
rules: [{ id: 'region', enabled: false }],
|
||||
rules: [{ id: "region", enabled: false }],
|
||||
},
|
||||
},
|
||||
layout: 'centered',
|
||||
layout: "centered",
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export default preview
|
||||
export default preview;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
|
||||
import { setProjectAnnotations } from '@storybook/react-vite';
|
||||
import * as projectAnnotations from './preview';
|
||||
import { setProjectAnnotations } from "@storybook/react-vite";
|
||||
import * as projectAnnotations from "./preview";
|
||||
|
||||
// This is an important step to apply the right configuration when testing your stories.
|
||||
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
|
||||
setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
|
||||
setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
|
||||
|
|
|
|||
2
clients/web/package-lock.json
generated
2
clients/web/package-lock.json
generated
|
|
@ -69,7 +69,7 @@
|
|||
"globals": "^17.4.0",
|
||||
"happy-dom": "^20.9.0",
|
||||
"playwright": "^1.58.2",
|
||||
"prettier": "^3.8.4",
|
||||
"prettier": "3.8.4",
|
||||
"storybook": "^10.2.19",
|
||||
"tsup": "^8.5.1",
|
||||
"typescript": "~5.9.3",
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@
|
|||
"test:integration:watch": "npm run test-servers:build && vitest --project=integration",
|
||||
"test-servers:build": "tsc -p ../../test-servers --noCheck",
|
||||
"lint": "eslint .",
|
||||
"format": "prettier --write src server \"*.{ts,js}\"",
|
||||
"format:check": "prettier --check src server \"*.{ts,js}\"",
|
||||
"format": "prettier --write src server .storybook \"*.{ts,tsx,mts,cts,js,jsx,mjs,cjs}\"",
|
||||
"format:check": "prettier --check src server .storybook \"*.{ts,tsx,mts,cts,js,jsx,mjs,cjs}\"",
|
||||
"preview": "vite preview",
|
||||
"storybook": "storybook dev -p 6006"
|
||||
},
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
"globals": "^17.4.0",
|
||||
"happy-dom": "^20.9.0",
|
||||
"playwright": "^1.58.2",
|
||||
"prettier": "^3.8.1",
|
||||
"prettier": "3.8.4",
|
||||
"storybook": "^10.2.19",
|
||||
"tsup": "^8.5.1",
|
||||
"typescript": "~5.9.3",
|
||||
|
|
|
|||
391
clients/web/src/hooks/useImportClientConfig.test.tsx
Normal file
391
clients/web/src/hooks/useImportClientConfig.test.tsx
Normal file
|
|
@ -0,0 +1,391 @@
|
|||
import { describe, it, expect, vi } from "vitest";
|
||||
import { renderHook, act } from "@testing-library/react";
|
||||
import {
|
||||
useImportClientConfig,
|
||||
type UseImportClientConfigOptions,
|
||||
} from "./useImportClientConfig";
|
||||
import type { ImportSourceResult } from "@inspector/core/mcp/import/index.js";
|
||||
import type { MCPConfig } from "@inspector/core/mcp/types.js";
|
||||
|
||||
function config(...ids: string[]): MCPConfig {
|
||||
const mcpServers: MCPConfig["mcpServers"] = {};
|
||||
for (const id of ids) mcpServers[id] = { command: "node", args: [id] };
|
||||
return { mcpServers };
|
||||
}
|
||||
|
||||
function foundSource(cfg: MCPConfig): ImportSourceResult {
|
||||
return { type: "claude", found: true, config: cfg, searched: ["/path"] };
|
||||
}
|
||||
|
||||
function setup(over: Partial<UseImportClientConfigOptions> = {}) {
|
||||
const onFetchSource =
|
||||
over.onFetchSource ?? vi.fn(async () => foundSource(config("alpha")));
|
||||
const onAddServer = over.onAddServer ?? vi.fn(async () => {});
|
||||
const onUpdateServer = over.onUpdateServer ?? vi.fn(async () => {});
|
||||
const opts: UseImportClientConfigOptions = {
|
||||
opened: true,
|
||||
existingIds: [],
|
||||
onFetchSource,
|
||||
onAddServer,
|
||||
onUpdateServer,
|
||||
...over,
|
||||
};
|
||||
const view = renderHook(
|
||||
(p: UseImportClientConfigOptions) => useImportClientConfig(p),
|
||||
{ initialProps: opts },
|
||||
);
|
||||
return { ...view, onFetchSource, onAddServer, onUpdateServer };
|
||||
}
|
||||
|
||||
describe("useImportClientConfig", () => {
|
||||
it("starts in the select phase with nothing to import", () => {
|
||||
const { result } = setup();
|
||||
expect(result.current.phase).toBe("select");
|
||||
expect(result.current.plan).toBeNull();
|
||||
expect(result.current.canImport).toBe(false);
|
||||
expect(result.current.importCount).toBe(0);
|
||||
});
|
||||
|
||||
it("setSelectedType records the choice", () => {
|
||||
const { result } = setup();
|
||||
act(() => result.current.setSelectedType("claude"));
|
||||
expect(result.current.selectedType).toBe("claude");
|
||||
});
|
||||
|
||||
it("pickSource loads a config and moves to review", async () => {
|
||||
const { result } = setup({
|
||||
onFetchSource: vi.fn(async () => foundSource(config("alpha", "beta"))),
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
expect(result.current.phase).toBe("review");
|
||||
expect(result.current.plan?.additions).toHaveLength(2);
|
||||
expect(result.current.importCount).toBe(2);
|
||||
expect(result.current.canImport).toBe(true);
|
||||
});
|
||||
|
||||
it("pickSource surfaces a fetch-reported error", async () => {
|
||||
const { result } = setup({
|
||||
onFetchSource: vi.fn(async () => ({
|
||||
type: "claude",
|
||||
found: false,
|
||||
searched: [],
|
||||
error: "backend blew up",
|
||||
})),
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
expect(result.current.phase).toBe("select");
|
||||
expect(result.current.error).toBe("backend blew up");
|
||||
});
|
||||
|
||||
it("pickSource shows a not-found notice", async () => {
|
||||
const { result } = setup({
|
||||
onFetchSource: vi.fn(async () => ({
|
||||
type: "claude",
|
||||
found: false,
|
||||
searched: ["/a", "/b"],
|
||||
})),
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
expect(result.current.phase).toBe("select");
|
||||
expect(result.current.notice).toContain("No config found");
|
||||
});
|
||||
|
||||
it("pickSource handles an empty config as no servers", async () => {
|
||||
const { result } = setup({
|
||||
onFetchSource: vi.fn(async () => foundSource(config())),
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
expect(result.current.phase).toBe("select");
|
||||
expect(result.current.error).toContain("No servers found");
|
||||
});
|
||||
|
||||
it("pickSource surfaces a thrown fetch error", async () => {
|
||||
const { result } = setup({
|
||||
onFetchSource: vi.fn(async () => {
|
||||
throw new Error("network down");
|
||||
}),
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
expect(result.current.phase).toBe("select");
|
||||
expect(result.current.error).toBe("network down");
|
||||
});
|
||||
|
||||
it("pickFile parses an uploaded config", async () => {
|
||||
const { result } = setup();
|
||||
const raw = JSON.stringify({ mcpServers: { gamma: { command: "go" } } });
|
||||
const file = new File([raw], "claude.json");
|
||||
await act(async () => {
|
||||
await result.current.pickFile(file);
|
||||
});
|
||||
expect(result.current.phase).toBe("review");
|
||||
expect(result.current.plan?.additions[0].id).toBe("gamma");
|
||||
});
|
||||
|
||||
it("pickFile ignores a null file", async () => {
|
||||
const { result } = setup();
|
||||
await act(async () => {
|
||||
await result.current.pickFile(null);
|
||||
});
|
||||
expect(result.current.phase).toBe("select");
|
||||
});
|
||||
|
||||
it("pickFile surfaces a parse error", async () => {
|
||||
const { result } = setup();
|
||||
const file = new File(["{ not json"], "claude.json");
|
||||
await act(async () => {
|
||||
await result.current.pickFile(file);
|
||||
});
|
||||
expect(result.current.phase).toBe("select");
|
||||
expect(result.current.error).toBeTruthy();
|
||||
});
|
||||
|
||||
it("runImport adds new servers and reports outcomes", async () => {
|
||||
const onAddServer = vi.fn(async () => {});
|
||||
const { result } = setup({
|
||||
onFetchSource: vi.fn(async () => foundSource(config("alpha", "beta"))),
|
||||
onAddServer,
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.runImport();
|
||||
});
|
||||
expect(result.current.phase).toBe("summary");
|
||||
expect(onAddServer).toHaveBeenCalledTimes(2);
|
||||
expect(result.current.outcomes.every((o) => o.status === "added")).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it("runImport skips additions opted out", async () => {
|
||||
const onAddServer = vi.fn(async () => {});
|
||||
const { result } = setup({
|
||||
onFetchSource: vi.fn(async () => foundSource(config("alpha", "beta"))),
|
||||
onAddServer,
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
act(() => result.current.setAdditionAction("beta", "skip"));
|
||||
expect(result.current.importCount).toBe(1);
|
||||
await act(async () => {
|
||||
await result.current.runImport();
|
||||
});
|
||||
expect(onAddServer).toHaveBeenCalledTimes(1);
|
||||
expect(result.current.outcomes.find((o) => o.id === "beta")?.status).toBe(
|
||||
"skipped",
|
||||
);
|
||||
});
|
||||
|
||||
it("runImport reports an addition failure", async () => {
|
||||
const onAddServer = vi.fn(async () => {
|
||||
throw new Error("add failed");
|
||||
});
|
||||
const { result } = setup({
|
||||
onFetchSource: vi.fn(async () => foundSource(config("alpha"))),
|
||||
onAddServer,
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.runImport();
|
||||
});
|
||||
const outcome = result.current.outcomes[0];
|
||||
expect(outcome.status).toBe("failed");
|
||||
expect(outcome.detail).toBe("add failed");
|
||||
});
|
||||
|
||||
it("resolves conflicts by overwrite, skip, and rename", async () => {
|
||||
const onAddServer = vi.fn(async () => {});
|
||||
const onUpdateServer = vi.fn(async () => {});
|
||||
const { result } = setup({
|
||||
existingIds: ["alpha", "beta", "gamma"],
|
||||
onFetchSource: vi.fn(async () =>
|
||||
foundSource(config("alpha", "beta", "gamma")),
|
||||
),
|
||||
onAddServer,
|
||||
onUpdateServer,
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
expect(result.current.plan?.conflicts).toHaveLength(3);
|
||||
// Default is skip for all three.
|
||||
act(() => result.current.setResolution("alpha", "overwrite"));
|
||||
act(() => result.current.setResolution("gamma", "rename"));
|
||||
act(() => result.current.setRenameTo("gamma", "gamma-new"));
|
||||
await act(async () => {
|
||||
await result.current.runImport();
|
||||
});
|
||||
expect(onUpdateServer).toHaveBeenCalledWith(
|
||||
"alpha",
|
||||
"alpha",
|
||||
expect.any(Object),
|
||||
);
|
||||
expect(onAddServer).toHaveBeenCalledWith("gamma-new", expect.any(Object));
|
||||
const statuses = Object.fromEntries(
|
||||
result.current.outcomes.map((o) => [o.id, o.status]),
|
||||
);
|
||||
expect(statuses["alpha"]).toBe("overwritten");
|
||||
expect(statuses["beta"]).toBe("skipped");
|
||||
expect(statuses["gamma-new"]).toBe("renamed");
|
||||
});
|
||||
|
||||
it("flags invalid and colliding rename targets", async () => {
|
||||
const { result } = setup({
|
||||
existingIds: ["alpha", "beta"],
|
||||
onFetchSource: vi.fn(async () => foundSource(config("alpha", "beta"))),
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
// Empty rename target.
|
||||
act(() => result.current.setResolution("alpha", "rename"));
|
||||
act(() => result.current.setRenameTo("alpha", " "));
|
||||
expect(result.current.renameErrors["alpha"]).toContain("required");
|
||||
// Syntactically invalid.
|
||||
act(() => result.current.setRenameTo("alpha", "bad id!"));
|
||||
expect(result.current.renameErrors["alpha"]).toContain("letters");
|
||||
// Collides with the other existing id.
|
||||
act(() => result.current.setRenameTo("alpha", "beta"));
|
||||
expect(result.current.renameErrors["alpha"]).toContain("already in use");
|
||||
expect(result.current.canImport).toBe(false);
|
||||
});
|
||||
|
||||
it("flags a rename target that collides with another rename", async () => {
|
||||
const { result } = setup({
|
||||
existingIds: ["alpha", "beta"],
|
||||
onFetchSource: vi.fn(async () => foundSource(config("alpha", "beta"))),
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
act(() => result.current.setResolution("alpha", "rename"));
|
||||
act(() => result.current.setResolution("beta", "rename"));
|
||||
act(() => result.current.setRenameTo("alpha", "shared"));
|
||||
act(() => result.current.setRenameTo("beta", "shared"));
|
||||
// The collision check is symmetric — each rename sees the other's target
|
||||
// already claimed, so both must be flagged (asserting only one would pass
|
||||
// even if the check regressed to one-directional).
|
||||
expect(result.current.renameErrors["alpha"]).toContain("already in use");
|
||||
expect(result.current.renameErrors["beta"]).toContain("already in use");
|
||||
expect(result.current.canImport).toBe(false);
|
||||
});
|
||||
|
||||
it("renames to the original id when the rename target is blank", async () => {
|
||||
const onAddServer = vi.fn(async () => {});
|
||||
const { result } = setup({
|
||||
existingIds: ["alpha"],
|
||||
onFetchSource: vi.fn(async () => foundSource(config("alpha"))),
|
||||
onAddServer,
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
act(() => result.current.setResolution("alpha", "rename"));
|
||||
act(() => result.current.setRenameTo("alpha", " "));
|
||||
// A blank rename also sets renameErrors, so canImport is false and the real
|
||||
// UI blocks submit here — this exercises the defensive fallback at
|
||||
// useImportClientConfig.ts (`res.renameTo.trim() || conflict.id`)
|
||||
// programmatically, which the UI can't reach.
|
||||
await act(async () => {
|
||||
await result.current.runImport();
|
||||
});
|
||||
// A blank rename target falls back to the original id.
|
||||
expect(onAddServer).toHaveBeenCalledWith("alpha", expect.any(Object));
|
||||
expect(result.current.outcomes[0].status).toBe("renamed");
|
||||
});
|
||||
|
||||
it("back returns to the select phase", async () => {
|
||||
const { result } = setup();
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
expect(result.current.phase).toBe("review");
|
||||
act(() => result.current.back());
|
||||
expect(result.current.phase).toBe("select");
|
||||
});
|
||||
|
||||
it("resets when the modal is re-opened", async () => {
|
||||
const { result, rerender } = setup({ opened: false });
|
||||
const props = (opened: boolean): UseImportClientConfigOptions => ({
|
||||
opened,
|
||||
existingIds: [],
|
||||
onFetchSource: vi.fn(async () => foundSource(config("alpha"))),
|
||||
onAddServer: vi.fn(async () => {}),
|
||||
onUpdateServer: vi.fn(async () => {}),
|
||||
});
|
||||
rerender(props(true));
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
expect(result.current.phase).toBe("review");
|
||||
rerender(props(false));
|
||||
rerender(props(true));
|
||||
expect(result.current.phase).toBe("select");
|
||||
expect(result.current.plan).toBeNull();
|
||||
});
|
||||
|
||||
it("stringifies a non-Error thrown by pickSource", async () => {
|
||||
const { result } = setup({
|
||||
onFetchSource: vi.fn(async () => {
|
||||
throw "plain fetch failure";
|
||||
}),
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
expect(result.current.error).toBe("plain fetch failure");
|
||||
});
|
||||
|
||||
it("stringifies a non-Error thrown by pickFile", async () => {
|
||||
const { result } = setup();
|
||||
const file = new File(["x"], "claude.json");
|
||||
vi.spyOn(file, "text").mockRejectedValue("plain read failure");
|
||||
await act(async () => {
|
||||
await result.current.pickFile(file);
|
||||
});
|
||||
expect(result.current.error).toBe("plain read failure");
|
||||
});
|
||||
|
||||
it("stringifies a non-Error thrown while applying an import", async () => {
|
||||
const onAddServer = vi.fn(async () => {
|
||||
throw "plain add failure";
|
||||
});
|
||||
const { result } = setup({
|
||||
onFetchSource: vi.fn(async () => foundSource(config("alpha"))),
|
||||
onAddServer,
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.pickSource("claude");
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.runImport();
|
||||
});
|
||||
expect(result.current.outcomes[0]).toMatchObject({
|
||||
status: "failed",
|
||||
detail: "plain add failure",
|
||||
});
|
||||
});
|
||||
|
||||
it("runImport with no plan is a no-op", async () => {
|
||||
const { result } = setup();
|
||||
await act(async () => {
|
||||
await result.current.runImport();
|
||||
});
|
||||
expect(result.current.phase).toBe("select");
|
||||
expect(result.current.outcomes).toEqual([]);
|
||||
});
|
||||
});
|
||||
257
clients/web/src/hooks/useServerJsonImport.test.tsx
Normal file
257
clients/web/src/hooks/useServerJsonImport.test.tsx
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { renderHook, act } from "@testing-library/react";
|
||||
import {
|
||||
useServerJsonImport,
|
||||
VALIDATE_DEBOUNCE_MS,
|
||||
COLLAPSE_DELAY_MS,
|
||||
HIGHLIGHT_DURATION_MS,
|
||||
type UseServerJsonImportOptions,
|
||||
} from "./useServerJsonImport";
|
||||
|
||||
// A valid registry server.json with two runnable options; option 0 declares a
|
||||
// required env var (with no default) and an optional one (with a default).
|
||||
const VALID_SERVER_JSON = JSON.stringify({
|
||||
name: "io.github.acme/weather",
|
||||
packages: [
|
||||
{
|
||||
registryType: "npm",
|
||||
identifier: "weather-mcp",
|
||||
environmentVariables: [
|
||||
{ name: "API_KEY", isRequired: true, description: "The key" },
|
||||
{ name: "REGION", isRequired: false, default: "us" },
|
||||
],
|
||||
},
|
||||
{ registryType: "pypi", identifier: "weather-py" },
|
||||
],
|
||||
});
|
||||
|
||||
function setup(over: Partial<UseServerJsonImportOptions> = {}) {
|
||||
const onAddServer = over.onAddServer ?? vi.fn(async () => {});
|
||||
const opts: UseServerJsonImportOptions = {
|
||||
opened: true,
|
||||
existingIds: [],
|
||||
onAddServer,
|
||||
...over,
|
||||
};
|
||||
const view = renderHook(
|
||||
(p: UseServerJsonImportOptions) => useServerJsonImport(p),
|
||||
{ initialProps: opts },
|
||||
);
|
||||
return { ...view, onAddServer };
|
||||
}
|
||||
|
||||
/** Set the textarea content and flush the validation debounce. */
|
||||
function typeAndFlush(
|
||||
result: { current: ReturnType<typeof useServerJsonImport> },
|
||||
content: string,
|
||||
) {
|
||||
act(() => result.current.setRawText(content));
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(VALIDATE_DEBOUNCE_MS);
|
||||
});
|
||||
}
|
||||
|
||||
describe("useServerJsonImport", () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers();
|
||||
});
|
||||
afterEach(() => {
|
||||
vi.runOnlyPendingTimers();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it("starts empty with an info prompt and the Add button disabled", () => {
|
||||
const { result } = setup();
|
||||
expect(result.current.draft.rawText).toBe("");
|
||||
expect(result.current.canAdd).toBe(false);
|
||||
expect(result.current.validation).toEqual([
|
||||
{ type: "info", message: "Paste server.json content to validate." },
|
||||
]);
|
||||
expect(result.current.packages).toBeUndefined();
|
||||
expect(result.current.envVars).toEqual([]);
|
||||
});
|
||||
|
||||
it("validates pasted content and enables Add", () => {
|
||||
const { result } = setup();
|
||||
typeAndFlush(result, VALID_SERVER_JSON);
|
||||
expect(result.current.canAdd).toBe(true);
|
||||
expect(result.current.defaultServerName).toBe("weather");
|
||||
expect(result.current.packages).toHaveLength(2);
|
||||
expect(result.current.validation[0]).toMatchObject({ type: "success" });
|
||||
expect(result.current.validation[1]).toMatchObject({ type: "info" });
|
||||
// Env vars of the first option, with the optional one's default prefilled.
|
||||
expect(result.current.envVars).toEqual([
|
||||
{ name: "API_KEY", description: "The key", required: true, value: "" },
|
||||
{ name: "REGION", description: undefined, required: false, value: "us" },
|
||||
]);
|
||||
});
|
||||
|
||||
it("surfaces a parse error for invalid JSON", () => {
|
||||
const { result } = setup();
|
||||
typeAndFlush(result, "{ not json");
|
||||
expect(result.current.canAdd).toBe(false);
|
||||
expect(result.current.validation[0].type).toBe("error");
|
||||
});
|
||||
|
||||
it("flags an invalid overridden id", () => {
|
||||
const { result } = setup();
|
||||
typeAndFlush(result, VALID_SERVER_JSON);
|
||||
act(() => result.current.setServerName("bad id!"));
|
||||
expect(result.current.canAdd).toBe(false);
|
||||
expect(
|
||||
result.current.validation.some(
|
||||
(v) => v.type === "error" && v.message.includes("Server id"),
|
||||
),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it("warns on a duplicate id", () => {
|
||||
const { result } = setup({ existingIds: ["weather"] });
|
||||
typeAndFlush(result, VALID_SERVER_JSON);
|
||||
expect(result.current.canAdd).toBe(false);
|
||||
expect(
|
||||
result.current.validation.some(
|
||||
(v) => v.type === "warning" && v.message.includes("already exists"),
|
||||
),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it("selectPackage switches the active option and its env vars", () => {
|
||||
const { result } = setup();
|
||||
typeAndFlush(result, VALID_SERVER_JSON);
|
||||
act(() => result.current.selectPackage(1));
|
||||
expect(result.current.draft.selectedPackageIndex).toBe(1);
|
||||
// The pypi option declares no env vars.
|
||||
expect(result.current.envVars).toEqual([]);
|
||||
});
|
||||
|
||||
it("setEnvVar overrides a declared env value", () => {
|
||||
const { result } = setup();
|
||||
typeAndFlush(result, VALID_SERVER_JSON);
|
||||
act(() => result.current.setEnvVar("API_KEY", "secret"));
|
||||
expect(
|
||||
result.current.envVars.find((v) => v.name === "API_KEY")?.value,
|
||||
).toBe("secret");
|
||||
});
|
||||
|
||||
it("re-opens the File Contents disclosure when cleared", () => {
|
||||
const { result } = setup();
|
||||
typeAndFlush(result, VALID_SERVER_JSON);
|
||||
act(() => result.current.setFileContentsOpen(false));
|
||||
expect(result.current.fileContentsOpen).toBe(false);
|
||||
typeAndFlush(result, "");
|
||||
expect(result.current.fileContentsOpen).toBe(true);
|
||||
});
|
||||
|
||||
it("flashes then auto-collapses the disclosure after content loads", () => {
|
||||
const { result } = setup();
|
||||
act(() => result.current.setRawText(VALID_SERVER_JSON));
|
||||
expect(result.current.fileContentsOpen).toBe(true);
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(COLLAPSE_DELAY_MS);
|
||||
});
|
||||
expect(result.current.fileContentsHighlight).toBe(true);
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(HIGHLIGHT_DURATION_MS);
|
||||
});
|
||||
expect(result.current.fileContentsHighlight).toBe(false);
|
||||
expect(result.current.fileContentsOpen).toBe(false);
|
||||
});
|
||||
|
||||
it("resets its state when the modal is re-opened", () => {
|
||||
const { result, rerender } = setup({ opened: false });
|
||||
// Open, dirty the draft, then close and re-open — the draft must clear.
|
||||
rerender({ opened: true, existingIds: [], onAddServer: vi.fn() });
|
||||
typeAndFlush(result, VALID_SERVER_JSON);
|
||||
expect(result.current.draft.rawText).not.toBe("");
|
||||
rerender({ opened: false, existingIds: [], onAddServer: vi.fn() });
|
||||
rerender({ opened: true, existingIds: [], onAddServer: vi.fn() });
|
||||
expect(result.current.draft.rawText).toBe("");
|
||||
});
|
||||
|
||||
it("pickFile reads a file into the draft", async () => {
|
||||
const { result } = setup();
|
||||
const file = new File([VALID_SERVER_JSON], "server.json");
|
||||
await act(async () => {
|
||||
await result.current.pickFile(file);
|
||||
});
|
||||
expect(result.current.draft.rawText).toBe(VALID_SERVER_JSON);
|
||||
});
|
||||
|
||||
it("pickFile ignores a null file", async () => {
|
||||
const { result } = setup();
|
||||
await act(async () => {
|
||||
await result.current.pickFile(null);
|
||||
});
|
||||
expect(result.current.draft.rawText).toBe("");
|
||||
});
|
||||
|
||||
it("pickFile surfaces a read error", async () => {
|
||||
const { result } = setup();
|
||||
const file = new File(["x"], "server.json");
|
||||
vi.spyOn(file, "text").mockRejectedValue(new Error("read boom"));
|
||||
await act(async () => {
|
||||
await result.current.pickFile(file);
|
||||
});
|
||||
expect(
|
||||
result.current.validation.some((v) => v.message.includes("read boom")),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it("submit persists the selected server and resolves true", async () => {
|
||||
const onAddServer = vi.fn(async () => {});
|
||||
const { result } = setup({ onAddServer });
|
||||
typeAndFlush(result, VALID_SERVER_JSON);
|
||||
let ok = false;
|
||||
await act(async () => {
|
||||
ok = await result.current.submit();
|
||||
});
|
||||
expect(ok).toBe(true);
|
||||
expect(onAddServer).toHaveBeenCalledWith("weather", expect.any(Object));
|
||||
});
|
||||
|
||||
it("submit refuses invalid content", async () => {
|
||||
const onAddServer = vi.fn(async () => {});
|
||||
const { result } = setup({ onAddServer });
|
||||
typeAndFlush(result, "{ not json");
|
||||
let ok = true;
|
||||
await act(async () => {
|
||||
ok = await result.current.submit();
|
||||
});
|
||||
expect(ok).toBe(false);
|
||||
expect(onAddServer).not.toHaveBeenCalled();
|
||||
expect(
|
||||
result.current.validation.some((v) =>
|
||||
v.message.includes("Fix the validation errors"),
|
||||
),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it("submit refuses a duplicate id", async () => {
|
||||
const onAddServer = vi.fn(async () => {});
|
||||
const { result } = setup({ existingIds: ["weather"], onAddServer });
|
||||
typeAndFlush(result, VALID_SERVER_JSON);
|
||||
let ok = true;
|
||||
await act(async () => {
|
||||
ok = await result.current.submit();
|
||||
});
|
||||
expect(ok).toBe(false);
|
||||
expect(onAddServer).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("submit surfaces an onAddServer failure", async () => {
|
||||
const onAddServer = vi.fn(async () => {
|
||||
throw new Error("save boom");
|
||||
});
|
||||
const { result } = setup({ onAddServer });
|
||||
typeAndFlush(result, VALID_SERVER_JSON);
|
||||
let ok = true;
|
||||
await act(async () => {
|
||||
ok = await result.current.submit();
|
||||
});
|
||||
expect(ok).toBe(false);
|
||||
expect(
|
||||
result.current.validation.some((v) => v.message.includes("save boom")),
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue