// @vitest-environment jsdom
/**
 * Component tests for StatChip: a label/value pill whose value styling branches
 * on the value type (number → big extrabold, string → smaller truncating text)
 * unless an explicit valueClassName overrides both.
 */
import '../../test/dom-setup';
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { StatChip } from './StatChip';

describe('StatChip', () => {
  it('renders the label and value', () => {
    render(<StatChip label="Tasks" value={42} />);
    expect(screen.getByText('Tasks')).toBeInTheDocument();
    expect(screen.getByText('42')).toBeInTheDocument();
  });

  it('uses the number styling branch for a numeric value', () => {
    render(<StatChip label="Count" value={7} />);
    const valueEl = screen.getByText('7');
    expect(valueEl).toHaveClass('text-lg', 'font-extrabold');
    expect(valueEl).not.toHaveClass('truncate');
  });

  it('uses the string styling branch (truncate) for a string value', () => {
    render(<StatChip label="Owner" value="alice" />);
    const valueEl = screen.getByText('alice');
    expect(valueEl).toHaveClass('truncate');
    expect(valueEl).not.toHaveClass('text-lg');
  });

  it('honors an explicit valueClassName over the type-based branch', () => {
    render(<StatChip label="X" value={99} valueClassName="custom-value-class" />);
    const valueEl = screen.getByText('99');
    expect(valueEl).toHaveClass('custom-value-class');
    // type-based classes are not applied when overridden
    expect(valueEl).not.toHaveClass('text-lg');
  });
});
