Add: Test case for parameter slider component

Author: alphacoder-mp3

package-lock.json

@@ -28,13 +28,15 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "eslint": "^8",
     "eslint-config-next": "15.0.3",
     "postcss": "^8",

package.json

@@ -0,0 +1,49 @@
+// Import from '@testing-library/react' and '@testing-library/user-event'
+import { render } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/dom';
+import '@testing-library/jest-dom'; // This adds the custom matchers like toBeInTheDocument
+
+import { ParameterSlider } from '@/components/controls/parameter-slider';
+
+// Add proper types for the mock function
+const mockOnChange = jest.fn() as jest.MockedFunction<(value: number) => void>;
+
+describe('ParameterSlider', () => {
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it('renders with correct label and value', () => {
+    render(
+      <ParameterSlider
+        label="Temperature"
+        value={0.7}
+        onChange={mockOnChange}
+        min={0}
+        max={1}
+        step={0.1}
+      />
+    );
+
+    expect(screen.getByText('Temperature')).toBeInTheDocument();
+    expect(screen.getByText('0.7')).toBeInTheDocument();
+  });
+
+  it('calls onChange when slider value changes', () => {
+    render(
+      <ParameterSlider
+        label="Temperature"
+        value={0.7}
+        onChange={mockOnChange}
+        min={0}
+        max={1}
+        step={0.1}
+      />
+    );
+
+    const slider = screen.getByRole('slider') as HTMLInputElement;
+    fireEvent.change(slider, { target: { value: '0.8' } });
+
+    expect(mockOnChange).toHaveBeenCalledWith(0.8);
+  });
+});

tests/components/parameter-slider.test.tsx

@@ -23,5 +23,9 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
+  "types": [
+    "jest",
+    "@testing-library/jest-dom"
+  ]
 }