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

describe('StatusBadge', () => {
  it.each([
    ['confirmed', 'Confirmed'],
    ['pending',   'Pending'],
    ['cancelled', 'Cancelled'],
  ])('renders "%s" with correct visible label', (status, label) => {
    render(<StatusBadge status={status} />);
    expect(screen.getByText(label)).toBeInTheDocument();
  });

  it('sets an aria-label that includes the status', () => {
    const { container } = render(<StatusBadge status="confirmed" />);
    expect(container.querySelector('[aria-label="Status: Confirmed"]')).toBeInTheDocument();
  });

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

  it('renders a dot element for visual indicator', () => {
    const { container } = render(<StatusBadge status="pending" />);
    expect(container.querySelector('[aria-hidden="true"]')).toBeInTheDocument();
  });
});
