brackt/app/components/__tests__/DraftGrid.test.tsx

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { DraftGrid } from '../DraftGrid';
import { mockDraftSlots } from '~/test/fixtures/team';

describe('DraftGrid Component', () => {
  const mockGrid = [
    [
      { participant: { name: 'Player 1' }, sport: { name: 'NFL' } },
      null,
    ],
    [
      null,
      { participant: { name: 'Player 2' }, sport: { name: 'NBA' } },
    ],
  ];

  describe('Rendering', () => {
    it('should render team names in headers', () => {
      render(
        <DraftGrid
          draftSlots={mockDraftSlots}
          draftGrid={mockGrid}
          currentPick={2}
        />
      );

      expect(screen.getByText('Team 1')).toBeInTheDocument();
      expect(screen.getByText('Team 2')).toBeInTheDocument();
    });

    it('should render draft grid with correct structure', () => {
      render(
        <DraftGrid
          draftSlots={mockDraftSlots}
          draftGrid={mockGrid}
          currentPick={2}
        />
      );

      // Should have cells for all picks
      const cells = screen.getAllByTitle(/Overall Pick/i);
      expect(cells.length).toBeGreaterThan(0);
    });

    it('should display picked players', () => {
      render(
        <DraftGrid
          draftSlots={mockDraftSlots}
          draftGrid={mockGrid}
          currentPick={2}
        />
      );

      expect(screen.getByText('Player 1')).toBeInTheDocument();
      expect(screen.getByText('NFL')).toBeInTheDocument();
      expect(screen.getByText('Player 2')).toBeInTheDocument();
      expect(screen.getByText('NBA')).toBeInTheDocument();
    });
  });

  describe('Current Pick Highlighting', () => {
    it('should highlight current pick with "On Clock" text', () => {
      render(
        <DraftGrid
          draftSlots={mockDraftSlots}
          draftGrid={mockGrid}
          currentPick={2}
        />
      );

      expect(screen.getByText('On Clock')).toBeInTheDocument();
    });

    it('should apply correct styling to current pick', () => {
      render(
        <DraftGrid
          draftSlots={mockDraftSlots}
          draftGrid={mockGrid}
          currentPick={2}
        />
      );

      const currentPickCell = screen.getByText('On Clock').parentElement;
      expect(currentPickCell).toHaveClass('border-electric');
      expect(currentPickCell).toHaveClass('bg-electric/15');
    });
  });

  describe('Pick Numbering', () => {
    it('should display round and pick numbers', () => {
      render(
        <DraftGrid
          draftSlots={mockDraftSlots}
          draftGrid={mockGrid}
          currentPick={1}
        />
      );

      // Should show format like "1.01", "1.02", etc.
      expect(screen.getByText(/1\.01/)).toBeInTheDocument();
    });
  });

  describe('Optional Features', () => {
    it('should render with title when provided', () => {
      render(
        <DraftGrid
          draftSlots={mockDraftSlots}
          draftGrid={mockGrid}
          currentPick={1}
          title="Draft Board"
        />
      );

      expect(screen.getByText('Draft Board')).toBeInTheDocument();
    });

    it('should display timers when provided', () => {
      const formatTime = (seconds: number | undefined) => {
        if (seconds === undefined) return '--:--';
        const mins = Math.floor(seconds / 60);
        const secs = seconds % 60;
        return `${mins}:${secs.toString().padStart(2, '0')}`;
      };

      render(
        <DraftGrid
          draftSlots={mockDraftSlots}
          draftGrid={mockGrid}
          currentPick={1}
          teamTimers={{ 'team-1': 120, 'team-2': 90 }}
          formatTime={formatTime}
        />
      );

      expect(screen.getByText('2:00')).toBeInTheDocument();
      expect(screen.getByText('1:30')).toBeInTheDocument();
    });
  });

  describe('Snake Draft Order', () => {
    it('should reverse picks on even rounds', () => {
      const snakeGrid = [
        [
          { participant: { name: 'Pick 1' }, sport: { name: 'NFL' } },
          { participant: { name: 'Pick 2' }, sport: { name: 'NBA' } },
        ],
        [
          { participant: { name: 'Pick 4' }, sport: { name: 'MLB' } },
          { participant: { name: 'Pick 3' }, sport: { name: 'NHL' } },
        ],
      ];

      render(
        <DraftGrid
          draftSlots={mockDraftSlots}
          draftGrid={snakeGrid}
          currentPick={5}
        />
      );

      // All picks should be visible
      expect(screen.getByText('Pick 1')).toBeInTheDocument();
      expect(screen.getByText('Pick 2')).toBeInTheDocument();
      expect(screen.getByText('Pick 3')).toBeInTheDocument();
      expect(screen.getByText('Pick 4')).toBeInTheDocument();
    });
  });
});