/** * DashboardQuickStats Component Tests */ import { render, screen } from '@testing-library/react'; import { DashboardQuickStats } from '@/components/dashboard/DashboardQuickStats'; import type { DashboardStats } from '@/lib/api/hooks/useDashboard'; describe('DashboardQuickStats', () => { const mockStats: DashboardStats = { activeProjects: 5, runningAgents: 12, openIssues: 34, pendingApprovals: 3, }; it('renders all four stat cards', () => { render(); expect(screen.getByText('Active Projects')).toBeInTheDocument(); expect(screen.getByText('Running Agents')).toBeInTheDocument(); expect(screen.getByText('Open Issues')).toBeInTheDocument(); expect(screen.getByText('Pending Approvals')).toBeInTheDocument(); }); it('displays correct stat values', () => { render(); expect(screen.getByText('5')).toBeInTheDocument(); expect(screen.getByText('12')).toBeInTheDocument(); expect(screen.getByText('34')).toBeInTheDocument(); expect(screen.getByText('3')).toBeInTheDocument(); }); it('displays descriptions for each stat', () => { render(); expect(screen.getByText('Currently in progress')).toBeInTheDocument(); expect(screen.getByText('Working on tasks')).toBeInTheDocument(); expect(screen.getByText('Across all projects')).toBeInTheDocument(); expect(screen.getByText('Awaiting your review')).toBeInTheDocument(); }); it('shows zero values when stats are undefined', () => { render(); // Should show 0 for all stats const zeros = screen.getAllByText('0'); expect(zeros).toHaveLength(4); }); it('shows loading state when isLoading is true', () => { render(); // StatCard shows loading animation const statCards = screen.getAllByTestId('stat-card'); statCards.forEach((card) => { expect(card).toHaveClass('animate-pulse'); }); }); it('applies custom className', () => { const { container } = render(); expect(container.firstChild).toHaveClass('custom-class'); }); });