kaboot/tests/components/Podium.test.tsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { Podium } from '../../components/Podium';
import { Player } from '../../types';

vi.mock('framer-motion', () => ({
  motion: {
    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => <div {...props}>{children}</div>,
  },
  AnimatePresence: ({ children }: React.PropsWithChildren) => <>{children}</>,
}));

vi.mock('canvas-confetti', () => ({
  default: vi.fn(),
}));

describe('Podium', () => {
  const createPlayer = (overrides: Partial<Player> = {}): Player => ({
    id: 'player-1',
    name: 'Test Player',
    score: 100,
    previousScore: 0,
    streak: 0,
    lastAnswerCorrect: null,
    selectedShape: null,
    pointsBreakdown: null,
    isBot: false,
    avatarSeed: 0.5,
    color: '#ff0000',
    ...overrides,
  });

  const defaultPlayers = [
    createPlayer({ id: '1', name: 'Alice', score: 300 }),
    createPlayer({ id: '2', name: 'Bob', score: 200 }),
    createPlayer({ id: '3', name: 'Charlie', score: 100 }),
  ];

  const mockOnRestart = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  describe('podium display', () => {
    it('renders podium title', () => {
      render(<Podium players={defaultPlayers} onRestart={mockOnRestart} />);
      
      expect(screen.getByText('Podium')).toBeInTheDocument();
    });

    it('displays top 3 players on podium', () => {
      render(<Podium players={defaultPlayers} onRestart={mockOnRestart} />);
      
      expect(screen.getByText('Alice')).toBeInTheDocument();
      expect(screen.getByText('Bob')).toBeInTheDocument();
      expect(screen.getByText('Charlie')).toBeInTheDocument();
    });

    it('shows Play Again button', () => {
      render(<Podium players={defaultPlayers} onRestart={mockOnRestart} />);
      
      expect(screen.getByText('Play Again')).toBeInTheDocument();
    });

    it('calls onRestart when Play Again clicked', async () => {
      const user = userEvent.setup();
      render(<Podium players={defaultPlayers} onRestart={mockOnRestart} />);
      
      await user.click(screen.getByText('Play Again'));
      
      expect(mockOnRestart).toHaveBeenCalled();
    });
  });

  describe('all rankings feature', () => {
    it('shows All Rankings button', () => {
      render(<Podium players={defaultPlayers} onRestart={mockOnRestart} />);
      
      expect(screen.getByText('All Rankings')).toBeInTheDocument();
    });

    it('opens rankings modal when All Rankings clicked', async () => {
      const user = userEvent.setup();
      render(<Podium players={defaultPlayers} onRestart={mockOnRestart} />);
      
      await user.click(screen.getByText('All Rankings'));
      
      expect(screen.getByText('Final Rankings')).toBeInTheDocument();
    });

    it('shows all players in rankings modal', async () => {
      const user = userEvent.setup();
      const players = [
        createPlayer({ id: '1', name: 'RankAlice', score: 300 }),
        createPlayer({ id: '2', name: 'RankBob', score: 100 }),
        createPlayer({ id: '3', name: 'RankCharlie', score: 200 }),
        createPlayer({ id: '4', name: 'RankDiana', score: 50 }),
      ];
      
      render(<Podium players={players} onRestart={mockOnRestart} />);
      await user.click(screen.getByText('All Rankings'));
      
      const modal = screen.getByText('Final Rankings').parentElement?.parentElement;
      expect(modal).toHaveTextContent('RankAlice');
      expect(modal).toHaveTextContent('RankBob');
      expect(modal).toHaveTextContent('RankCharlie');
      expect(modal).toHaveTextContent('RankDiana');
    });

    it('shows rank numbers in modal', async () => {
      const user = userEvent.setup();
      render(<Podium players={defaultPlayers} onRestart={mockOnRestart} />);
      
      await user.click(screen.getByText('All Rankings'));
      
      expect(screen.getByText('1')).toBeInTheDocument();
      expect(screen.getByText('2')).toBeInTheDocument();
      expect(screen.getByText('3')).toBeInTheDocument();
    });

    it('shows player scores in modal', async () => {
      const user = userEvent.setup();
      render(<Podium players={defaultPlayers} onRestart={mockOnRestart} />);
      
      await user.click(screen.getByText('All Rankings'));
      
      const modal = screen.getByText('Final Rankings').parentElement?.parentElement;
      expect(modal).toHaveTextContent('300');
      expect(modal).toHaveTextContent('200');
      expect(modal).toHaveTextContent('100');
    });

    it('closes modal when X button clicked', async () => {
      const user = userEvent.setup();
      render(<Podium players={defaultPlayers} onRestart={mockOnRestart} />);
      
      await user.click(screen.getByText('All Rankings'));
      expect(screen.getByText('Final Rankings')).toBeInTheDocument();
      
      const modal = screen.getByText('Final Rankings').parentElement;
      const closeButton = modal?.querySelector('button');
      await user.click(closeButton!);
      
      expect(screen.queryByText('Final Rankings')).not.toBeInTheDocument();
    });

    it('modal content does not close when clicking inside', async () => {
      const user = userEvent.setup();
      render(<Podium players={defaultPlayers} onRestart={mockOnRestart} />);
      
      await user.click(screen.getByText('All Rankings'));
      expect(screen.getByText('Final Rankings')).toBeInTheDocument();
      
      await user.click(screen.getByText('Final Rankings'));
      
      expect(screen.getByText('Final Rankings')).toBeInTheDocument();
    });

    it('handles many players in rankings', async () => {
      const user = userEvent.setup();
      const manyPlayers = Array.from({ length: 20 }, (_, i) => 
        createPlayer({ id: `${i}`, name: `ManyPlayer${i + 1}`, score: 1000 - i * 50 })
      );
      
      render(<Podium players={manyPlayers} onRestart={mockOnRestart} />);
      await user.click(screen.getByText('All Rankings'));
      
      const modal = screen.getByText('Final Rankings').parentElement?.parentElement;
      expect(modal).toHaveTextContent('ManyPlayer1');
      expect(modal).toHaveTextContent('ManyPlayer20');
    });

    it('handles single player', async () => {
      const user = userEvent.setup();
      const singlePlayer = [createPlayer({ id: '1', name: 'SoloPlayer', score: 500 })];
      
      render(<Podium players={singlePlayer} onRestart={mockOnRestart} />);
      await user.click(screen.getByText('All Rankings'));
      
      const modal = screen.getByText('Final Rankings').parentElement?.parentElement;
      expect(modal).toHaveTextContent('SoloPlayer');
      expect(modal).toHaveTextContent('500');
    });

    it('handles players with same score', async () => {
      const user = userEvent.setup();
      const tiedPlayers = [
        createPlayer({ id: '1', name: 'TiedAlice', score: 200 }),
        createPlayer({ id: '2', name: 'TiedBob', score: 200 }),
        createPlayer({ id: '3', name: 'TiedCharlie', score: 200 }),
      ];
      
      render(<Podium players={tiedPlayers} onRestart={mockOnRestart} />);
      await user.click(screen.getByText('All Rankings'));
      
      expect(screen.getByText('Final Rankings')).toBeInTheDocument();
      const modal = screen.getByText('Final Rankings').parentElement?.parentElement;
      expect(modal).toHaveTextContent('TiedAlice');
      expect(modal).toHaveTextContent('TiedBob');
      expect(modal).toHaveTextContent('TiedCharlie');
    });
  });
});