add Sidebar tests

Author: pulkitsharma07

client/src/components/Sidebar.tsx

@@ -318,6 +318,7 @@ const Sidebar = ({
                       {typeof configItem.value === "number" ? (
                         <Input
                           type="number"
+                          data-testid={`${configKey}-input`}
                           value={configItem.value}
                           onChange={(e) => {
                             const newConfig = { ...config };
@@ -331,6 +332,7 @@ const Sidebar = ({
                         />
                       ) : typeof configItem.value === "boolean" ? (
                         <Select
+                          data-testid={`${configKey}-select`}
                           value={configItem.value.toString()}
                           onValueChange={(val) => {
                             const newConfig = { ...config };
@@ -351,6 +353,7 @@ const Sidebar = ({
                         </Select>
                       ) : (
                         <Input
+                          data-testid={`${configKey}-input`}
                           value={configItem.value}
                           onChange={(e) => {
                             const newConfig = { ...config };

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

@@ -1,6 +1,8 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, it, beforeEach, jest } from "@jest/globals";
 import Sidebar from "../Sidebar";
+import { DEFAULT_INSPECTOR_CONFIG } from "../../lib/constants";
+import { InspectorConfig } from "../../lib/configurationTypes";
 
 // Mock theme hook
 jest.mock("../../lib/useTheme", () => ({
@@ -28,6 +30,8 @@ describe("Sidebar Environment Variables", () => {
     logLevel: "info" as const,
     sendLogLevelRequest: jest.fn(),
     loggingSupported: true,
+    config: DEFAULT_INSPECTOR_CONFIG,
+    setConfig: jest.fn(),
   };
 
   const renderSidebar = (props = {}) => {
@@ -304,4 +308,74 @@ describe("Sidebar Environment Variables", () => {
       expect(setEnv).toHaveBeenCalledWith({ [longKey]: "test_value" });
     });
   });
+
+  describe("Configuration Operations", () => {
+    const openConfigSection = () => {
+      const button = screen.getByText("Configuration");
+      fireEvent.click(button);
+    };
+
+    it("should update MCP server request timeout", () => {
+      const setConfig = jest.fn();
+      renderSidebar({ config: DEFAULT_INSPECTOR_CONFIG, setConfig });
+
+      openConfigSection();
+
+      const timeoutInput = screen.getByTestId("MCP_SERVER_REQUEST_TIMEOUT-input");
+      fireEvent.change(timeoutInput, { target: { value: "5000" } });
+
+      expect(setConfig).toHaveBeenCalledWith({
+        MCP_SERVER_REQUEST_TIMEOUT: {
+          description: "Timeout for requests to the MCP server (ms)",
+          value: 5000,
+        },
+      });
+    });
+
+    it("should handle invalid timeout values entered by user", () => {
+      const setConfig = jest.fn();
+      renderSidebar({ config: DEFAULT_INSPECTOR_CONFIG, setConfig });
+
+      openConfigSection();
+
+      const timeoutInput = screen.getByTestId("MCP_SERVER_REQUEST_TIMEOUT-input");
+      fireEvent.change(timeoutInput, { target: { value: "abc1" } });
+
+      expect(setConfig).toHaveBeenCalledWith({
+        MCP_SERVER_REQUEST_TIMEOUT: {
+          description: "Timeout for requests to the MCP server (ms)",
+          value: 0,
+        },
+      });
+    });
+
+    it("should maintain configuration state after multiple updates", () => {
+      const setConfig = jest.fn();
+      const { rerender } = renderSidebar({ config: DEFAULT_INSPECTOR_CONFIG, setConfig });
+
+      openConfigSection();
+
+      // First update
+      const timeoutInput = screen.getByTestId("MCP_SERVER_REQUEST_TIMEOUT-input");
+      fireEvent.change(timeoutInput, { target: { value: "5000" } });
+
+      // Get the updated config from the first setConfig call
+      const updatedConfig = setConfig.mock.calls[0][0] as InspectorConfig;
+
+      // Rerender with the updated config
+      rerender(<Sidebar {...defaultProps} config={updatedConfig} setConfig={setConfig} />);
+
+      // Second update
+      const updatedTimeoutInput = screen.getByTestId("MCP_SERVER_REQUEST_TIMEOUT-input");
+      fireEvent.change(updatedTimeoutInput, { target: { value: "3000" } });
+
+      // Verify the final state matches what we expect
+      expect(setConfig).toHaveBeenLastCalledWith({
+        MCP_SERVER_REQUEST_TIMEOUT: {
+          description: "Timeout for requests to the MCP server (ms)",
+          value: 3000,
+        },
+      });
+    });
+  });
 });

package.json

@@ -23,6 +23,7 @@
   "scripts": {
     "dev": "concurrently \"cd client && npm run dev\" \"cd server && npm run dev\"",
     "dev:windows": "concurrently \"cd client && npm run dev\" \"cd server && npm run dev:windows",
+    "test": "cd client && npm test",
     "build-server": "cd server && npm run build",
     "build-client": "cd client && npm run build",
     "build": "npm run build-server && npm run build-client",