import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../../theme';
import StatusTimeline, { TimelineNode } from './StatusTimeline';

describe('<StatusTimeline/>', () => {
  const wrap = (ui: React.ReactNode) => render(<ThemeProvider>{ui}</ThemeProvider>);

  const nodes: TimelineNode[] = [
    { key: 'submitted', label: 'Submitted', state: 'completed', timestamp: 'Jul 1' },
    { key: 'on_its_way', label: 'On its way', state: 'current', note: 'Bank transfer' },
    { key: 'completed', label: 'Completed', state: 'pending' },
  ];

  it('renders every node label, timestamp, and note', () => {
    wrap(<StatusTimeline nodes={nodes} />);
    expect(screen.getByText('Submitted')).toBeInTheDocument();
    expect(screen.getByText('Jul 1')).toBeInTheDocument();
    expect(screen.getByText('On its way')).toBeInTheDocument();
    expect(screen.getByText('Bank transfer')).toBeInTheDocument();
    expect(screen.getByText('Completed')).toBeInTheDocument();
  });

  it('exposes each node state via a data attribute', () => {
    const { container } = render(<StatusTimeline nodes={nodes} />);
    expect(container.querySelector('[data-node="submitted"][data-node-state="completed"]')).toBeInTheDocument();
    expect(container.querySelector('[data-node="on_its_way"][data-node-state="current"]')).toBeInTheDocument();
  });

  it('renders a failed node distinctly', () => {
    const { container } = render(
      <StatusTimeline nodes={[{ key: 'failed', label: 'Failed', state: 'failed' }]} />,
    );
    expect(container.querySelector('[data-node-state="failed"]')).toBeInTheDocument();
  });
});
