syndarix/frontend/tests/components/dashboard/DashboardQuickStats.test.tsx

/**
 * 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(<DashboardQuickStats stats={mockStats} />);

    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(<DashboardQuickStats stats={mockStats} />);

    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(<DashboardQuickStats stats={mockStats} />);

    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(<DashboardQuickStats />);

    // Should show 0 for all stats
    const zeros = screen.getAllByText('0');
    expect(zeros).toHaveLength(4);
  });

  it('shows loading state when isLoading is true', () => {
    render(<DashboardQuickStats isLoading />);

    // 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(<DashboardQuickStats className="custom-class" />);

    expect(container.firstChild).toHaveClass('custom-class');
  });
});