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

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

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

// Mock next/image
jest.mock('next/image', () => ({
  __esModule: true,
  default: (props: any) => {
    // eslint-disable-next-line @next/next/no-img-element
    return <img {...props} alt={props.alt} />;
  },
}));

describe('PrizeCard', () => {
  const defaultProps = {
    imageSrc: '/images/lots/infuseur.png',
    imageAlt: 'Infuseur à thé premium',
    badge: '60%',
    title: 'Infuseur à thé premium',
    description: 'Un infuseur en acier inoxydable de haute qualité',
  };

  it('should render prize card with all props', () => {
    render(<PrizeCard {...defaultProps} />);

    expect(screen.getByText('Infuseur à thé premium')).toBeInTheDocument();
    expect(screen.getByText('Un infuseur en acier inoxydable de haute qualité')).toBeInTheDocument();
    expect(screen.getByText('60%')).toBeInTheDocument();
    expect(screen.getByAltText('Infuseur à thé premium')).toBeInTheDocument();
  });

  it('should render image with correct src', () => {
    render(<PrizeCard {...defaultProps} />);

    const image = screen.getByAltText('Infuseur à thé premium');
    expect(image).toHaveAttribute('src', '/images/lots/infuseur.png');
  });

  it('should render with default styling for non-grand prix', () => {
    const { container } = render(<PrizeCard {...defaultProps} />);

    const card = container.firstChild;
    expect(card).toHaveClass('border-beige-300');
    expect(card).not.toHaveClass('border-primary-500');
  });

  it('should render with grand prix styling when isGrandPrix is true', () => {
    const { container } = render(<PrizeCard {...defaultProps} isGrandPrix />);

    const card = container.firstChild;
    expect(card).toHaveClass('border-primary-500');
  });

  it('should apply custom className', () => {
    const { container } = render(<PrizeCard {...defaultProps} className="custom-class" />);

    const card = container.firstChild;
    expect(card).toHaveClass('custom-class');
  });

  it('should render badge with different text', () => {
    render(<PrizeCard {...defaultProps} badge="1 an de THÉ" />);

    expect(screen.getByText('1 an de THÉ')).toBeInTheDocument();
  });

  it('should have correct structure with image container and content', () => {
    const { container } = render(<PrizeCard {...defaultProps} />);

    // Check image container exists
    expect(container.querySelector('.aspect-square')).toBeInTheDocument();

    // Check title is h3
    const title = screen.getByText('Infuseur à thé premium');
    expect(title.tagName).toBe('H3');
  });
});