test: add frontend test suite with vitest

frontend/package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.60.0",
@@ -19,18 +21,22 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.7.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
+    "jsdom": "^29.0.1",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.14",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vitest": "^4.1.2"
   }
 }

frontend/src/test/components.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Button } from '../components/ui/Button';
+import { Badge } from '../components/ui/Badge';
+import { Card, CardHeader, CardContent } from '../components/ui/Card';
+
+describe('UI Components', () => {
+  describe('Button', () => {
+    it('renders with children', () => {
+      render(<Button>Click me</Button>);
+      expect(screen.getByText('Click me')).toBeInTheDocument();
+    });
+
+    it('applies variant classes', () => {
+      render(<Button variant="primary">Primary</Button>);
+      const button = screen.getByText('Primary');
+      expect(button).toHaveClass('btn-primary');
+    });
+
+    it('is disabled when disabled prop is true', () => {
+      render(<Button disabled>Disabled</Button>);
+      const button = screen.getByText('Disabled');
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('Badge', () => {
+    it('renders with text', () => {
+      render(<Badge>Status</Badge>);
+      expect(screen.getByText('Status')).toBeInTheDocument();
+    });
+
+    it('applies success variant classes', () => {
+      render(<Badge variant="success">Success</Badge>);
+      const badge = screen.getByText('Success');
+      expect(badge).toHaveClass('text-green-400');
+    });
+  });
+
+  describe('Card', () => {
+    it('renders card with header and content', () => {
+      render(
+        <Card>
+          <CardHeader title="Test Card" />
+          <CardContent>Card content</CardContent>
+        </Card>
+      );
+      expect(screen.getByText('Test Card')).toBeInTheDocument();
+      expect(screen.getByText('Card content')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/test/helpers.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import { formatTimestamp, truncateText, classNames, formatDuration } from '../utils/helpers';
+
+describe('helpers', () => {
+  describe('formatTimestamp', () => {
+    it('formats ISO timestamps', () => {
+      const result = formatTimestamp('2024-01-15T10:30:00Z');
+      expect(result).toBeDefined();
+      expect(typeof result).toBe('string');
+    });
+
+    it('handles invalid dates', () => {
+      const result = formatTimestamp('invalid');
+      expect(result).toBe('Invalid Date');
+    });
+  });
+
+  describe('truncateText', () => {
+    it('truncates long strings', () => {
+      const result = truncateText('This is a long string', 13);
+      expect(result).toBe('This is a ...');
+    });
+
+    it('leaves short strings unchanged', () => {
+      const result = truncateText('Short', 10);
+      expect(result).toBe('Short');
+    });
+  });
+
+  describe('classNames', () => {
+    it('joins class names', () => {
+      const result = classNames('a', 'b', 'c');
+      expect(result).toBe('a b c');
+    });
+
+    it('filters falsy values', () => {
+      const result = classNames('a', false, undefined, 'b', null, 'c');
+      expect(result).toBe('a b c');
+    });
+  });
+
+  describe('formatDuration', () => {
+    it('formats milliseconds to seconds', () => {
+      expect(formatDuration(45000)).toBe('45s');
+    });
+
+    it('formats minutes and seconds', () => {
+      expect(formatDuration(125000)).toBe('2m 5s');
+    });
+
+    it('formats hours', () => {
+      expect(formatDuration(3665000)).toBe('1h 1m');
+    });
+  });
+});

frontend/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

frontend/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/components/actionpanel.tsx","./src/components/agentview.tsx","./src/components/dashboard.tsx","./src/components/episodepanel.tsx","./src/components/memorypanel.tsx","./src/components/observationview.tsx","./src/components/rewardchart.tsx","./src/components/settings.tsx","./src/components/toolregistry.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/select.tsx","./src/hooks/useagents.ts","./src/hooks/useepisode.ts","./src/hooks/usememory.ts","./src/hooks/usewebsocket.ts","./src/types/index.ts","./src/utils/helpers.ts"],"version":"5.6.3"}

frontend/vite.config.ts

@@ -22,4 +22,9 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+  },
 });