Add some json form tests and handle css in ui tests

Author: olaservo

client/jest.config.cjs

@@ -2,7 +2,8 @@ module.exports = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
   moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/src/$1"
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "\\.css$": "<rootDir>/src/__mocks__/styleMock.js"
   },
   transform: {
     "^.+\\.tsx?$": [

client/src/__mocks__/styleMock.js

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

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

@@ -0,0 +1,61 @@
+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 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();
+    });
+  });
+});