add tests

apps/website/components/admin/AdminStatsPanel.test.tsx

@@ -0,0 +1,180 @@
+/**
+ * AdminStatsPanel Component Tests
+ * 
+ * Tests for the AdminStatsPanel component that displays statistics
+ * in a grid format for admin dashboards.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AdminStatsPanel } from './AdminStatsPanel';
+import { describe, it, expect, vi } from 'vitest';
+import { Users, Shield, Activity } from 'lucide-react';
+
+// Mock the StatGrid component
+vi.mock('@/ui/StatGrid', () => ({
+  StatGrid: ({ stats, columns }: any) => (
+    <div data-testid="stat-grid" data-columns={JSON.stringify(columns)}>
+      {stats.map((stat: any, index: number) => (
+        <div key={index} data-testid={`stat-${index}`}>
+          <span>{stat.label}</span>
+          <span>{stat.value}</span>
+          {stat.icon && <span data-testid="icon">{stat.icon.name || 'Icon'}</span>}
+          {stat.intent && <span data-testid="intent">{stat.intent}</span>}
+          {stat.trend && <span data-testid="trend">{stat.trend.value}</span>}
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+describe('AdminStatsPanel', () => {
+  it('should render with single stat', () => {
+    const stats = [
+      {
+        label: 'Total Users',
+        value: '1,234',
+        icon: Users,
+        intent: 'primary' as const,
+      },
+    ];
+
+    render(<AdminStatsPanel stats={stats} />);
+
+    expect(screen.getByText('Total Users')).toBeTruthy();
+    expect(screen.getByText('1,234')).toBeTruthy();
+  });
+
+  it('should render with multiple stats', () => {
+    const stats = [
+      {
+        label: 'Total Users',
+        value: '1,234',
+        icon: Users,
+        intent: 'primary' as const,
+      },
+      {
+        label: 'Active Users',
+        value: '892',
+        icon: Activity,
+        intent: 'success' as const,
+      },
+      {
+        label: 'Admins',
+        value: '12',
+        icon: Shield,
+        intent: 'telemetry' as const,
+      },
+    ];
+
+    render(<AdminStatsPanel stats={stats} />);
+
+    expect(screen.getByText('Total Users')).toBeTruthy();
+    expect(screen.getByText('1,234')).toBeTruthy();
+    expect(screen.getByText('Active Users')).toBeTruthy();
+    expect(screen.getByText('892')).toBeTruthy();
+    expect(screen.getByText('Admins')).toBeTruthy();
+    expect(screen.getByText('12')).toBeTruthy();
+  });
+
+  it('should render stats with trends', () => {
+    const stats = [
+      {
+        label: 'Growth',
+        value: '15%',
+        icon: Activity,
+        intent: 'success' as const,
+        trend: {
+          value: 5,
+          isPositive: true,
+        },
+      },
+    ];
+
+    render(<AdminStatsPanel stats={stats} />);
+
+    expect(screen.getByText('Growth')).toBeTruthy();
+    expect(screen.getByText('15%')).toBeTruthy();
+    expect(screen.getByText('5')).toBeTruthy();
+  });
+
+  it('should render stats with different intents', () => {
+    const stats = [
+      {
+        label: 'Primary',
+        value: '100',
+        icon: Users,
+        intent: 'primary' as const,
+      },
+      {
+        label: 'Success',
+        value: '200',
+        icon: Users,
+        intent: 'success' as const,
+      },
+      {
+        label: 'Warning',
+        value: '300',
+        icon: Users,
+        intent: 'warning' as const,
+      },
+      {
+        label: 'Critical',
+        value: '400',
+        icon: Users,
+        intent: 'critical' as const,
+      },
+      {
+        label: 'Telemetry',
+        value: '500',
+        icon: Users,
+        intent: 'telemetry' as const,
+      },
+    ];
+
+    render(<AdminStatsPanel stats={stats} />);
+
+    expect(screen.getByText('Primary')).toBeTruthy();
+    expect(screen.getByText('Success')).toBeTruthy();
+    expect(screen.getByText('Warning')).toBeTruthy();
+    expect(screen.getByText('Critical')).toBeTruthy();
+    expect(screen.getByText('Telemetry')).toBeTruthy();
+  });
+
+  it('should render stats with numeric values', () => {
+    const stats = [
+      {
+        label: 'Count',
+        value: 42,
+        icon: Users,
+      },
+    ];
+
+    render(<AdminStatsPanel stats={stats} />);
+
+    expect(screen.getByText('Count')).toBeTruthy();
+    expect(screen.getByText('42')).toBeTruthy();
+  });
+
+  it('should render stats with string values', () => {
+    const stats = [
+      {
+        label: 'Status',
+        value: 'Active',
+        icon: Shield,
+      },
+    ];
+
+    render(<AdminStatsPanel stats={stats} />);
+
+    expect(screen.getByText('Status')).toBeTruthy();
+    expect(screen.getByText('Active')).toBeTruthy();
+  });
+
+  it('should render with empty stats array', () => {
+    render(<AdminStatsPanel stats={[]} />);
+
+    // Should render without errors
+    expect(document.body).toBeTruthy();
+  });
+});