// @vitest-environment jsdom
/**
 * Component tests for StatusBadge: it maps a job status string to a tone
 * (bg/fg) and a human label. Branching lives in `statusTone` (per-status
 * colors) and `formatStatusLabel` (known label vs. raw passthrough), both of
 * which the badge wires straight into the rendered <span>'s style + text.
 */
import '../../test/dom-setup';
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { StatusBadge } from './StatusBadge';
import { statusTone } from '../../lib/utils';

describe('StatusBadge', () => {
  it('renders the human label for a known status', () => {
    render(<StatusBadge status="succeeded" />);
    // COLUMN_LABELS maps succeeded -> "Done"
    expect(screen.getByText('Done')).toBeInTheDocument();
  });

  it('falls back to the raw status string for an unknown status', () => {
    render(<StatusBadge status="totally_unknown" />);
    expect(screen.getByText('totally_unknown')).toBeInTheDocument();
  });

  it('applies the running tone colors as inline style', () => {
    render(<StatusBadge status="running" />);
    const tone = statusTone('running');
    const badge = screen.getByText('Running');
    // jsdom normalizes color values; assert via the style object the component set.
    expect(badge).toHaveStyle({ background: tone.bg, color: tone.fg });
  });

  it('uses a distinct tone for failed vs succeeded (branching)', () => {
    const failed = statusTone('failed');
    const succeeded = statusTone('succeeded');
    expect(failed.bg).not.toBe(succeeded.bg);

    render(<StatusBadge status="failed" />);
    expect(screen.getByText('Failed')).toHaveStyle({ background: failed.bg });
  });

  it('merges an extra className onto the badge', () => {
    render(<StatusBadge status="queued" className="my-extra-class" />);
    expect(screen.getByText('Inbox')).toHaveClass('my-extra-class');
  });
});
