the-tip-top-frontend/__tests__/components/ui/TicketTableRow.test.tsx

/**
 * Tests for the TicketTableRow component
 * @jest-environment jsdom
 */

import React from 'react';
import { render, screen } from '@testing-library/react';
import { TicketTableRow } from '@/components/ui/TicketTableRow';
import { Ticket } from '@/types';

describe('TicketTableRow', () => {
  const mockTicket: Ticket = {
    id: '1',
    code: 'ABC123',
    status: 'PENDING',
    playedAt: '2024-01-15T10:30:00Z',
    claimedAt: null,
    prize: {
      id: '1',
      type: 'INFUSEUR',
      name: 'Infuseur à thé',
      value: 10,
    },
  };

  it('should render ticket code', () => {
    render(
      <table>
        <tbody>
          <TicketTableRow ticket={mockTicket} />
        </tbody>
      </table>
    );
    expect(screen.getByText('ABC123')).toBeInTheDocument();
  });

  it('should render ticket status badge', () => {
    render(
      <table>
        <tbody>
          <TicketTableRow ticket={mockTicket} />
        </tbody>
      </table>
    );
    expect(screen.getByText('En attente')).toBeInTheDocument();
  });

  it('should render prize display when prize exists', () => {
    render(
      <table>
        <tbody>
          <TicketTableRow ticket={mockTicket} />
        </tbody>
      </table>
    );
    expect(screen.getByText('Infuseur à thé')).toBeInTheDocument();
  });

  it('should render played date', () => {
    render(
      <table>
        <tbody>
          <TicketTableRow ticket={mockTicket} />
        </tbody>
      </table>
    );
    // French date format
    expect(screen.getByText(/15\/01\/2024|15 janvier 2024/)).toBeInTheDocument();
  });

  it('should show claimed date when showClaimedDate is true', () => {
    const ticketWithClaim: Ticket = {
      ...mockTicket,
      status: 'CLAIMED',
      claimedAt: '2024-01-20T14:00:00Z',
    };

    render(
      <table>
        <tbody>
          <TicketTableRow ticket={ticketWithClaim} showClaimedDate />
        </tbody>
      </table>
    );

    // Should have an extra column for claimed date
    const cells = screen.getAllByRole('cell');
    expect(cells.length).toBe(5); // code, prize, status, playedAt, claimedAt
  });

  it('should not show claimed date column when showClaimedDate is false', () => {
    render(
      <table>
        <tbody>
          <TicketTableRow ticket={mockTicket} showClaimedDate={false} />
        </tbody>
      </table>
    );

    const cells = screen.getAllByRole('cell');
    expect(cells.length).toBe(4); // code, prize, status, playedAt
  });

  it('should show dash when playedAt is null', () => {
    const ticketWithoutDate: Ticket = {
      ...mockTicket,
      playedAt: null,
    };

    render(
      <table>
        <tbody>
          <TicketTableRow ticket={ticketWithoutDate} />
        </tbody>
      </table>
    );

    expect(screen.getByText('-')).toBeInTheDocument();
  });

  it('should show dash when claimedAt is null with showClaimedDate', () => {
    render(
      <table>
        <tbody>
          <TicketTableRow ticket={mockTicket} showClaimedDate />
        </tbody>
      </table>
    );

    const dashes = screen.getAllByText('-');
    expect(dashes.length).toBeGreaterThan(0);
  });

  it('should render CLAIMED status correctly', () => {
    const claimedTicket: Ticket = {
      ...mockTicket,
      status: 'CLAIMED',
    };

    render(
      <table>
        <tbody>
          <TicketTableRow ticket={claimedTicket} />
        </tbody>
      </table>
    );

    expect(screen.getByText('Réclamé')).toBeInTheDocument();
  });

  it('should handle ticket without prize', () => {
    const ticketWithoutPrize: Ticket = {
      ...mockTicket,
      prize: undefined,
    };

    render(
      <table>
        <tbody>
          <TicketTableRow ticket={ticketWithoutPrize} />
        </tbody>
      </table>
    );

    expect(screen.getByText('ABC123')).toBeInTheDocument();
    // Should not crash and prize cell should be empty
  });

  it('should have hover styling on row', () => {
    render(
      <table>
        <tbody>
          <TicketTableRow ticket={mockTicket} />
        </tbody>
      </table>
    );

    const row = screen.getByRole('row');
    expect(row).toHaveClass('hover:bg-gradient-to-r');
  });

  it('should render code with monospace font', () => {
    render(
      <table>
        <tbody>
          <TicketTableRow ticket={mockTicket} />
        </tbody>
      </table>
    );

    const codeElement = screen.getByText('ABC123');
    expect(codeElement).toHaveClass('font-mono');
  });
});