Merge branch 'main' into feat/json-view-component

client/jest.config.cjs

@@ -3,16 +3,12 @@ module.exports = {
   testEnvironment: "jsdom",
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
-    "^../components/DynamicJsonForm$":
-      "<rootDir>/src/utils/__mocks__/DynamicJsonForm.ts",
-    "^../../components/DynamicJsonForm$":
-      "<rootDir>/src/utils/__mocks__/DynamicJsonForm.ts",
+    "\\.css$": "<rootDir>/src/__mocks__/styleMock.js",
   },
   transform: {
     "^.+\\.tsx?$": [
       "ts-jest",
       {
-        useESM: true,
         jsx: "react-jsx",
         tsconfig: "tsconfig.jest.json",
       },

client/package.json

@@ -24,8 +24,8 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.6.1",
-    "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.3",
@@ -50,6 +50,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.7.5",
     "@types/react": "^18.3.10",

client/src/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

client/src/components/__tests__/DynamicJsonForm.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, jest } from "@jest/globals";
+import DynamicJsonForm from "../DynamicJsonForm";
+import type { JsonSchemaType } from "../DynamicJsonForm";
+
+describe("DynamicJsonForm String Fields", () => {
+  const renderForm = (props = {}) => {
+    const defaultProps = {
+      schema: {
+        type: "string" as const,
+        description: "Test string field",
+      } satisfies JsonSchemaType,
+      value: undefined,
+      onChange: jest.fn(),
+    };
+    return render(<DynamicJsonForm {...defaultProps} {...props} />);
+  };
+
+  describe("Type Validation", () => {
+    it("should handle numeric input as string type", () => {
+      const onChange = jest.fn();
+      renderForm({ onChange });
+
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "123321" } });
+
+      expect(onChange).toHaveBeenCalledWith("123321");
+      // Verify the value is a string, not a number
+      expect(typeof onChange.mock.calls[0][0]).toBe("string");
+    });
+
+    it("should render as text input, not number input", () => {
+      renderForm();
+      const input = screen.getByRole("textbox");
+      expect(input).toHaveProperty("type", "text");
+    });
+  });
+});
+
+describe("DynamicJsonForm Integer Fields", () => {
+  const renderForm = (props = {}) => {
+    const defaultProps = {
+      schema: {
+        type: "integer" as const,
+        description: "Test integer field",
+      } satisfies JsonSchemaType,
+      value: undefined,
+      onChange: jest.fn(),
+    };
+    return render(<DynamicJsonForm {...defaultProps} {...props} />);
+  };
+
+  describe("Basic Operations", () => {
+    it("should render number input with step=1", () => {
+      renderForm();
+      const input = screen.getByRole("spinbutton");
+      expect(input).toHaveProperty("type", "number");
+      expect(input).toHaveProperty("step", "1");
+    });
+
+    it("should pass integer values to onChange", () => {
+      const onChange = jest.fn();
+      renderForm({ onChange });
+
+      const input = screen.getByRole("spinbutton");
+      fireEvent.change(input, { target: { value: "42" } });
+
+      expect(onChange).toHaveBeenCalledWith(42);
+      // Verify the value is a number, not a string
+      expect(typeof onChange.mock.calls[0][0]).toBe("number");
+    });
+
+    it("should not pass string values to onChange", () => {
+      const onChange = jest.fn();
+      renderForm({ onChange });
+
+      const input = screen.getByRole("spinbutton");
+      fireEvent.change(input, { target: { value: "abc" } });
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle non-numeric input by not calling onChange", () => {
+      const onChange = jest.fn();
+      renderForm({ onChange });
+
+      const input = screen.getByRole("spinbutton");
+      fireEvent.change(input, { target: { value: "abc" } });
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+});

client/src/components/__tests__/Sidebar.test.tsx

@@ -0,0 +1,307 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, beforeEach, jest } from "@jest/globals";
+import Sidebar from "../Sidebar";
+
+// Mock theme hook
+jest.mock("../../lib/useTheme", () => ({
+  __esModule: true,
+  default: () => ["light", jest.fn()],
+}));
+
+describe("Sidebar Environment Variables", () => {
+  const defaultProps = {
+    connectionStatus: "disconnected" as const,
+    transportType: "stdio" as const,
+    setTransportType: jest.fn(),
+    command: "",
+    setCommand: jest.fn(),
+    args: "",
+    setArgs: jest.fn(),
+    sseUrl: "",
+    setSseUrl: jest.fn(),
+    env: {},
+    setEnv: jest.fn(),
+    bearerToken: "",
+    setBearerToken: jest.fn(),
+    onConnect: jest.fn(),
+    stdErrNotifications: [],
+    logLevel: "info" as const,
+    sendLogLevelRequest: jest.fn(),
+    loggingSupported: true,
+  };
+
+  const renderSidebar = (props = {}) => {
+    return render(<Sidebar {...defaultProps} {...props} />);
+  };
+
+  const openEnvVarsSection = () => {
+    const button = screen.getByText("Environment Variables");
+    fireEvent.click(button);
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Basic Operations", () => {
+    it("should add a new environment variable", () => {
+      const setEnv = jest.fn();
+      renderSidebar({ env: {}, setEnv });
+
+      openEnvVarsSection();
+
+      const addButton = screen.getByText("Add Environment Variable");
+      fireEvent.click(addButton);
+
+      expect(setEnv).toHaveBeenCalledWith({ "": "" });
+    });
+
+    it("should remove an environment variable", () => {
+      const setEnv = jest.fn();
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const removeButton = screen.getByRole("button", { name: "×" });
+      fireEvent.click(removeButton);
+
+      expect(setEnv).toHaveBeenCalledWith({});
+    });
+
+    it("should update environment variable value", () => {
+      const setEnv = jest.fn();
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const valueInput = screen.getByDisplayValue("test_value");
+      fireEvent.change(valueInput, { target: { value: "new_value" } });
+
+      expect(setEnv).toHaveBeenCalledWith({ TEST_KEY: "new_value" });
+    });
+
+    it("should toggle value visibility", () => {
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv });
+
+      openEnvVarsSection();
+
+      const valueInput = screen.getByDisplayValue("test_value");
+      expect(valueInput).toHaveProperty("type", "password");
+
+      const toggleButton = screen.getByRole("button", { name: /show value/i });
+      fireEvent.click(toggleButton);
+
+      expect(valueInput).toHaveProperty("type", "text");
+    });
+  });
+
+  describe("Key Editing", () => {
+    it("should maintain order when editing first key", () => {
+      const setEnv = jest.fn();
+      const initialEnv = {
+        FIRST_KEY: "first_value",
+        SECOND_KEY: "second_value",
+        THIRD_KEY: "third_value",
+      };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const firstKeyInput = screen.getByDisplayValue("FIRST_KEY");
+      fireEvent.change(firstKeyInput, { target: { value: "NEW_FIRST_KEY" } });
+
+      expect(setEnv).toHaveBeenCalledWith({
+        NEW_FIRST_KEY: "first_value",
+        SECOND_KEY: "second_value",
+        THIRD_KEY: "third_value",
+      });
+    });
+
+    it("should maintain order when editing middle key", () => {
+      const setEnv = jest.fn();
+      const initialEnv = {
+        FIRST_KEY: "first_value",
+        SECOND_KEY: "second_value",
+        THIRD_KEY: "third_value",
+      };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const middleKeyInput = screen.getByDisplayValue("SECOND_KEY");
+      fireEvent.change(middleKeyInput, { target: { value: "NEW_SECOND_KEY" } });
+
+      expect(setEnv).toHaveBeenCalledWith({
+        FIRST_KEY: "first_value",
+        NEW_SECOND_KEY: "second_value",
+        THIRD_KEY: "third_value",
+      });
+    });
+
+    it("should maintain order when editing last key", () => {
+      const setEnv = jest.fn();
+      const initialEnv = {
+        FIRST_KEY: "first_value",
+        SECOND_KEY: "second_value",
+        THIRD_KEY: "third_value",
+      };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const lastKeyInput = screen.getByDisplayValue("THIRD_KEY");
+      fireEvent.change(lastKeyInput, { target: { value: "NEW_THIRD_KEY" } });
+
+      expect(setEnv).toHaveBeenCalledWith({
+        FIRST_KEY: "first_value",
+        SECOND_KEY: "second_value",
+        NEW_THIRD_KEY: "third_value",
+      });
+    });
+
+    it("should maintain order during key editing", () => {
+      const setEnv = jest.fn();
+      const initialEnv = {
+        KEY1: "value1",
+        KEY2: "value2",
+      };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      // Type "NEW_" one character at a time
+      const key1Input = screen.getByDisplayValue("KEY1");
+      "NEW_".split("").forEach((char) => {
+        fireEvent.change(key1Input, {
+          target: { value: char + "KEY1".slice(1) },
+        });
+      });
+
+      // Verify the last setEnv call maintains the order
+      const lastCall = setEnv.mock.calls[
+        setEnv.mock.calls.length - 1
+      ][0] as Record<string, string>;
+      const entries = Object.entries(lastCall);
+
+      // The values should stay with their original keys
+      expect(entries[0][1]).toBe("value1"); // First entry should still have value1
+      expect(entries[1][1]).toBe("value2"); // Second entry should still have value2
+    });
+  });
+
+  describe("Multiple Operations", () => {
+    it("should maintain state after multiple key edits", () => {
+      const setEnv = jest.fn();
+      const initialEnv = {
+        FIRST_KEY: "first_value",
+        SECOND_KEY: "second_value",
+      };
+      const { rerender } = renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      // First key edit
+      const firstKeyInput = screen.getByDisplayValue("FIRST_KEY");
+      fireEvent.change(firstKeyInput, { target: { value: "NEW_FIRST_KEY" } });
+
+      // Get the updated env from the first setEnv call
+      const updatedEnv = setEnv.mock.calls[0][0] as Record<string, string>;
+
+      // Rerender with the updated env
+      rerender(<Sidebar {...defaultProps} env={updatedEnv} setEnv={setEnv} />);
+
+      // Second key edit
+      const secondKeyInput = screen.getByDisplayValue("SECOND_KEY");
+      fireEvent.change(secondKeyInput, { target: { value: "NEW_SECOND_KEY" } });
+
+      // Verify the final state matches what we expect
+      expect(setEnv).toHaveBeenLastCalledWith({
+        NEW_FIRST_KEY: "first_value",
+        NEW_SECOND_KEY: "second_value",
+      });
+    });
+
+    it("should maintain visibility state after key edit", () => {
+      const initialEnv = { TEST_KEY: "test_value" };
+      const { rerender } = renderSidebar({ env: initialEnv });
+
+      openEnvVarsSection();
+
+      // Show the value
+      const toggleButton = screen.getByRole("button", { name: /show value/i });
+      fireEvent.click(toggleButton);
+
+      const valueInput = screen.getByDisplayValue("test_value");
+      expect(valueInput).toHaveProperty("type", "text");
+
+      // Edit the key
+      const keyInput = screen.getByDisplayValue("TEST_KEY");
+      fireEvent.change(keyInput, { target: { value: "NEW_KEY" } });
+
+      // Rerender with updated env
+      rerender(<Sidebar {...defaultProps} env={{ NEW_KEY: "test_value" }} />);
+
+      // Value should still be visible
+      const updatedValueInput = screen.getByDisplayValue("test_value");
+      expect(updatedValueInput).toHaveProperty("type", "text");
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle empty key", () => {
+      const setEnv = jest.fn();
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const keyInput = screen.getByDisplayValue("TEST_KEY");
+      fireEvent.change(keyInput, { target: { value: "" } });
+
+      expect(setEnv).toHaveBeenCalledWith({ "": "test_value" });
+    });
+
+    it("should handle special characters in key", () => {
+      const setEnv = jest.fn();
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const keyInput = screen.getByDisplayValue("TEST_KEY");
+      fireEvent.change(keyInput, { target: { value: "TEST-KEY@123" } });
+
+      expect(setEnv).toHaveBeenCalledWith({ "TEST-KEY@123": "test_value" });
+    });
+
+    it("should handle unicode characters", () => {
+      const setEnv = jest.fn();
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const keyInput = screen.getByDisplayValue("TEST_KEY");
+      fireEvent.change(keyInput, { target: { value: "TEST_🔑" } });
+
+      expect(setEnv).toHaveBeenCalledWith({ "TEST_🔑": "test_value" });
+    });
+
+    it("should handle very long key names", () => {
+      const setEnv = jest.fn();
+      const initialEnv = { TEST_KEY: "test_value" };
+      renderSidebar({ env: initialEnv, setEnv });
+
+      openEnvVarsSection();
+
+      const keyInput = screen.getByDisplayValue("TEST_KEY");
+      const longKey = "A".repeat(100);
+      fireEvent.change(keyInput, { target: { value: longKey } });
+
+      expect(setEnv).toHaveBeenCalledWith({ [longKey]: "test_value" });
+    });
+  });
+});

client/src/components/__tests__/ToolsTab.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, jest } from "@jest/globals";
+import ToolsTab from "../ToolsTab";
+import { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { Tabs } from "@/components/ui/tabs";
+
+describe("ToolsTab", () => {
+  const mockTools: Tool[] = [
+    {
+      name: "tool1",
+      description: "First tool",
+      inputSchema: {
+        type: "object" as const,
+        properties: {
+          num: { type: "number" as const },
+        },
+      },
+    },
+    {
+      name: "tool2",
+      description: "Second tool",
+      inputSchema: {
+        type: "object" as const,
+        properties: {
+          num: { type: "number" as const },
+        },
+      },
+    },
+  ];
+
+  const defaultProps = {
+    tools: mockTools,
+    listTools: jest.fn(),
+    clearTools: jest.fn(),
+    callTool: jest.fn(),
+    selectedTool: null,
+    setSelectedTool: jest.fn(),
+    toolResult: null,
+    nextCursor: "",
+    error: null,
+  };
+
+  const renderToolsTab = (props = {}) => {
+    return render(
+      <Tabs defaultValue="tools">
+        <ToolsTab {...defaultProps} {...props} />
+      </Tabs>,
+    );
+  };
+
+  it("should reset input values when switching tools", () => {
+    const { rerender } = renderToolsTab({
+      selectedTool: mockTools[0],
+    });
+
+    // Enter a value in the first tool's input
+    const input = screen.getByRole("spinbutton") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "42" } });
+    expect(input.value).toBe("42");
+
+    // Switch to second tool
+    rerender(
+      <Tabs defaultValue="tools">
+        <ToolsTab {...defaultProps} selectedTool={mockTools[1]} />
+      </Tabs>,
+    );
+
+    // Verify input is reset
+    const newInput = screen.getByRole("spinbutton") as HTMLInputElement;
+    expect(newInput.value).toBe("");
+  });
+});

client/tsconfig.app.json

@@ -24,7 +24,8 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "types": ["jest", "@testing-library/jest-dom", "node"]
   },
   "include": ["src"]
 }