import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import StageBadge from './StageBadge.svelte';

describe('StageBadge', () => {
  it('renders Processing + spinner when state is in_progress', () => {
    render(StageBadge, { props: { state: 'in_progress' } });
    expect(screen.getByText('Processing')).toBeInTheDocument();
    // The spinner is a lucide icon — just confirm a child SVG exists.
    expect(document.querySelector('svg')).toBeTruthy();
  });

  it('renders Done + check when state is done', () => {
    render(StageBadge, { props: { state: 'done' } });
    expect(screen.getByText('Done')).toBeInTheDocument();
    expect(document.querySelector('svg')).toBeTruthy();
  });

  it('renders Pending muted when state is pending', () => {
    render(StageBadge, { props: { state: 'pending' } });
    expect(screen.getByText('Pending')).toBeInTheDocument();
    // No icon for the muted states.
    expect(document.querySelector('svg')).toBeFalsy();
  });

  it('renders Skipped muted when state is skipped', () => {
    render(StageBadge, { props: { state: 'skipped' } });
    expect(screen.getByText('Skipped')).toBeInTheDocument();
    expect(document.querySelector('svg')).toBeFalsy();
  });
});
