lotr-sut/sut/frontend/test/components/ScoringCard.test.tsx

/**
 * ScoringCard.test.tsx
 * Unit tests for the ScoringCard component
 */

import React from 'react';
import { render, screen } from '@testing-library/react';
import ScoringCard from '../../src/components/ScoringCard';

describe('ScoringCard Component', () => {
  it('should render all three stats', () => {
    render(
      <ScoringCard 
        gold={500} 
        completedQuests={10} 
        averageSavings={15.5}
      />
    );

    // Check that all stat cards are rendered
    expect(screen.getByTestId('scoring-card-gold')).toBeInTheDocument();
    expect(screen.getByTestId('scoring-card-quests')).toBeInTheDocument();
    expect(screen.getByTestId('scoring-card-savings')).toBeInTheDocument();
  });

  it('should display correct gold value', () => {
    render(
      <ScoringCard 
        gold={1250} 
        completedQuests={5} 
        averageSavings={10}
      />
    );

    const goldSection = screen.getByTestId('scoring-card-gold');
    expect(goldSection).toHaveTextContent('1250');
  });

  it('should display correct completed quests value', () => {
    render(
      <ScoringCard 
        gold={100} 
        completedQuests={42} 
        averageSavings={20}
      />
    );

    const questsSection = screen.getByTestId('scoring-card-quests');
    expect(questsSection).toHaveTextContent('42');
  });

  it('should display average savings as percentage', () => {
    render(
      <ScoringCard 
        gold={100} 
        completedQuests={5} 
        averageSavings={23.456}
      />
    );

    const savingsSection = screen.getByTestId('scoring-card-savings');
    expect(savingsSection).toHaveTextContent('23.46%');
  });

  it('should display dash when average savings is null', () => {
    render(
      <ScoringCard 
        gold={100} 
        completedQuests={5} 
        averageSavings={null}
      />
    );

    const savingsSection = screen.getByTestId('scoring-card-savings');
    expect(savingsSection).toHaveTextContent('—');
  });

  it('should display dash when average savings is undefined', () => {
    render(
      <ScoringCard 
        gold={100} 
        completedQuests={5} 
        averageSavings={undefined}
      />
    );

    const savingsSection = screen.getByTestId('scoring-card-savings');
    expect(savingsSection).toHaveTextContent('—');
  });

  it('should display all labels correctly', () => {
    render(
      <ScoringCard 
        gold={100} 
        completedQuests={5} 
        averageSavings={10}
      />
    );

    expect(screen.getByText('Gold in Treasury')).toBeInTheDocument();
    expect(screen.getByText('Quests Completed')).toBeInTheDocument();
    expect(screen.getByText('Average Savings')).toBeInTheDocument();
  });

  it('should render the main scoring card container', () => {
    render(
      <ScoringCard 
        gold={100} 
        completedQuests={5} 
        averageSavings={10}
      />
    );

    expect(screen.getByTestId('scoring-card')).toBeInTheDocument();
  });

  it('should display icons for each stat', () => {
    render(
      <ScoringCard 
        gold={100} 
        completedQuests={5} 
        averageSavings={10}
      />
    );

    // Check that the scoring card is rendered and contains all three stat sections
    const scoringCard = screen.getByTestId('scoring-card');
    expect(scoringCard).toBeInTheDocument();
    
    // Verify all stat divs are present
    expect(screen.getByTestId('scoring-card-gold')).toBeInTheDocument();
    expect(screen.getByTestId('scoring-card-quests')).toBeInTheDocument();
    expect(screen.getByTestId('scoring-card-savings')).toBeInTheDocument();
  });

  it('should handle zero values', () => {
    render(
      <ScoringCard 
        gold={0} 
        completedQuests={0} 
        averageSavings={0}
      />
    );

    const goldSection = screen.getByTestId('scoring-card-gold');
    const questsSection = screen.getByTestId('scoring-card-quests');
    const savingsSection = screen.getByTestId('scoring-card-savings');

    expect(goldSection).toHaveTextContent('0');
    expect(questsSection).toHaveTextContent('0');
    expect(savingsSection).toHaveTextContent('0.00%');
  });

  it('should handle large values', () => {
    render(
      <ScoringCard 
        gold={999999} 
        completedQuests={9999} 
        averageSavings={99.99}
      />
    );

    const goldSection = screen.getByTestId('scoring-card-gold');
    const questsSection = screen.getByTestId('scoring-card-quests');
    const savingsSection = screen.getByTestId('scoring-card-savings');

    expect(goldSection).toHaveTextContent('999999');
    expect(questsSection).toHaveTextContent('9999');
    expect(savingsSection).toHaveTextContent('99.99%');
  });
});