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

/**
 * UserStatsSummary Component Tests
 * 
 * Tests for the UserStatsSummary component that displays summary statistics
 * for user management.
 */

import React from 'react';
import { render, screen } from '@testing-library/react';
import { UserStatsSummary } from './UserStatsSummary';
import { describe, it, expect, vi } from 'vitest';

// Mock the MetricCard component
vi.mock('@/ui/MetricCard', () => ({
  MetricCard: ({ label, value, icon, intent }: any) => (
    <div data-testid="metric-card" data-intent={intent}>
      <span data-testid="label">{label}</span>
      <span data-testid="value">{value}</span>
      {icon && <span data-testid="icon">Icon</span>}
    </div>
  ),
}));

// Mock the StatGrid component
vi.mock('@/ui/StatGrid', () => ({
  StatGrid: ({ stats, columns }: any) => (
    <div data-testid="stat-grid" data-columns={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>Icon</span>}
          {stat.intent && <span data-intent={stat.intent}>{stat.intent}</span>}
        </div>
      ))}
    </div>
  ),
}));

describe('UserStatsSummary', () => {
  it('should render with all stats', () => {
    render(
      <UserStatsSummary
        total={100}
        activeCount={80}
        adminCount={10}
      />
    );

    expect(screen.getByText('Total Users')).toBeTruthy();
    expect(screen.getByText('100')).toBeTruthy();
    expect(screen.getByText('Active')).toBeTruthy();
    expect(screen.getByText('80')).toBeTruthy();
    expect(screen.getByText('Admins')).toBeTruthy();
    expect(screen.getByText('10')).toBeTruthy();
  });

  it('should render with zero values', () => {
    render(
      <UserStatsSummary
        total={0}
        activeCount={0}
        adminCount={0}
      />
    );

    expect(screen.getByText('Total Users')).toBeTruthy();
    expect(screen.getByText('0')).toBeTruthy();
    expect(screen.getByText('Active')).toBeTruthy();
    expect(screen.getByText('0')).toBeTruthy();
    expect(screen.getByText('Admins')).toBeTruthy();
    expect(screen.getByText('0')).toBeTruthy();
  });

  it('should render with large numbers', () => {
    render(
      <UserStatsSummary
        total={12345}
        activeCount={9876}
        adminCount={123}
      />
    );

    expect(screen.getByText('12345')).toBeTruthy();
    expect(screen.getByText('9876')).toBeTruthy();
    expect(screen.getByText('123')).toBeTruthy();
  });

  it('should render with single digit numbers', () => {
    render(
      <UserStatsSummary
        total={5}
        activeCount={3}
        adminCount={1}
      />
    );

    expect(screen.getByText('5')).toBeTruthy();
    expect(screen.getByText('3')).toBeTruthy();
    expect(screen.getByText('1')).toBeTruthy();
  });

  it('should render with negative numbers (edge case)', () => {
    render(
      <UserStatsSummary
        total={-5}
        activeCount={-3}
        adminCount={-1}
      />
    );

    expect(screen.getByText('-5')).toBeTruthy();
    expect(screen.getByText('-3')).toBeTruthy();
    expect(screen.getByText('-1')).toBeTruthy();
  });

  it('should render with decimal numbers', () => {
    render(
      <UserStatsSummary
        total={100.5}
        activeCount={75.25}
        adminCount={10.75}
      />
    );

    expect(screen.getByText('100.5')).toBeTruthy();
    expect(screen.getByText('75.25')).toBeTruthy();
    expect(screen.getByText('10.75')).toBeTruthy();
  });

  it('should render with very large numbers', () => {
    render(
      <UserStatsSummary
        total={1000000}
        activeCount={750000}
        adminCount={50000}
      />
    );

    expect(screen.getByText('1000000')).toBeTruthy();
    expect(screen.getByText('750000')).toBeTruthy();
    expect(screen.getByText('50000')).toBeTruthy();
  });

  it('should render with string numbers', () => {
    render(
      <UserStatsSummary
        total={100}
        activeCount={80}
        adminCount={10}
      />
    );

    expect(screen.getByText('100')).toBeTruthy();
    expect(screen.getByText('80')).toBeTruthy();
    expect(screen.getByText('10')).toBeTruthy();
  });

  it('should render with mixed number types', () => {
    render(
      <UserStatsSummary
        total={100}
        activeCount={80}
        adminCount={10}
      />
    );

    expect(screen.getByText('100')).toBeTruthy();
    expect(screen.getByText('80')).toBeTruthy();
    expect(screen.getByText('10')).toBeTruthy();
  });
});