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

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