mimic/frontend/tests/StatusBadge.test.tsx

import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import { StatusBadge } from '@/components/StatusBadge';

describe('StatusBadge', () => {
  it.each(['planned', 'active', 'closed'] as const)('renders %s label and data attr', (status) => {
    render(<StatusBadge status={status} />);
    const badge = screen.getByTestId('status-badge');
    expect(badge).toHaveAttribute('data-status', status);
    expect(badge.textContent?.toLowerCase()).toBe(status);
  });

  it('applies warn-soft surface for planned', () => {
    render(<StatusBadge status="planned" />);
    expect(screen.getByTestId('status-badge').className).toContain('bg-warn-soft');
  });

  it('applies primary-soft surface for active', () => {
    render(<StatusBadge status="active" />);
    expect(screen.getByTestId('status-badge').className).toContain('bg-primary-soft');
  });

  it('applies cloud surface for closed', () => {
    render(<StatusBadge status="closed" />);
    expect(screen.getByTestId('status-badge').className).toContain('bg-cloud');
  });
});