Add preliminary UI tests

client/jest.config.cjs

@@ -3,20 +3,16 @@ 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",
-      },
-    ],
+        tsconfig: "tsconfig.jest.json"
+      }
+    ]
   },
   extensionsToTreatAsEsm: [".ts", ".tsx"],
   testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
@@ -25,13 +21,13 @@ module.exports = {
     "/node_modules/",
     "/dist/",
     "/bin/",
-    "\\.config\\.(js|ts|cjs|mjs)$",
+    "\\.config\\.(js|ts|cjs|mjs)$"
   ],
   // Exclude the same patterns from coverage reports
   coveragePathIgnorePatterns: [
     "/node_modules/",
     "/dist/",
     "/bin/",
-    "\\.config\\.(js|ts|cjs|mjs)$",
-  ],
+    "\\.config\\.(js|ts|cjs|mjs)$"
+  ]
 };

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();
+    });
+  });
+});