deckhearth/test/components/StatCard.test.js

// @vitest-environment jsdom
import { afterEach, describe, expect, test } from 'vitest';
import { cleanup, render, screen } from '@testing-library/react';
import StatCard from '../../components/ui/StatCard';

afterEach(() => cleanup());

describe('<StatCard>', () => {
  test('renders label and value', () => {
    render(<StatCard accent="gold" label="Total Cards" value="2,458" />);
    expect(screen.getByText('Total Cards')).toBeDefined();
    expect(screen.getByText('2,458')).toBeDefined();
  });

  test('renders positive delta in green with up-arrow', () => {
    const { container } = render(
      <StatCard accent="gold" label="Cards" value="100" delta="+12.5%" />
    );
    const deltaEl = container.querySelector('[style*="34, 197, 94"]');
    expect(deltaEl).not.toBeNull();
    expect(container.textContent).toContain('+12.5%');
    expect(container.textContent).toContain('▲');
  });

  test('renders negative delta in red with down-arrow', () => {
    const { container } = render(
      <StatCard accent="red" label="Cards" value="100" delta="-2.1%" />
    );
    const deltaEl = container.querySelector('[style*="239, 68, 68"]');
    expect(deltaEl).not.toBeNull();
    expect(container.textContent).toContain('-2.1%');
    expect(container.textContent).toContain('▼');
  });

  test('omits the delta row when delta prop is not provided', () => {
    const { container } = render(
      <StatCard accent="purple" label="Wishlist" value="0" />
    );
    expect(container.textContent).not.toContain('▲');
    expect(container.textContent).not.toContain('▼');
  });

  test('renders all 4 accent gradients without crashing', () => {
    for (const accent of ['gold', 'purple', 'blue', 'red']) {
      cleanup();
      const { container } = render(
        <StatCard accent={accent} label="Test" value="1" />
      );
      expect(container.querySelector('[style*="linear-gradient"]')).not.toBeNull();
    }
  });

  test('renders subtitle when provided', () => {
    render(
      <StatCard
        accent="gold"
        label="Rare Cards"
        value="317"
        subtitle="12.9% of collection"
      />
    );
    expect(screen.getByText('12.9% of collection')).toBeDefined();
  });
});