import { FunctionComponent } from 'react';
import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../theme';
import StatusChip, { StatusChipProps } from './StatusChip';

const ComponentToTest: FunctionComponent<StatusChipProps> = (props) => (
  <ThemeProvider>
    <StatusChip {...props} />
  </ThemeProvider>
);

describe('<StatusChip/> component', () => {
  it('renders the label', () => {
    render(<ComponentToTest status="verified" label="Verified" />);
    expect(screen.getByText('Verified')).toBeInTheDocument();
  });

  it('exposes the status via a data attribute', () => {
    const { container } = render(<ComponentToTest status="pending" label="Pending" />);
    expect(container.querySelector('[data-status="pending"]')).toBeInTheDocument();
  });

  it('renders the status icon for rejected', () => {
    const { container } = render(<ComponentToTest status="rejected" label="Rejected" />);
    expect(container.querySelector('[data-icon="rejected"]')).toBeInTheDocument();
  });
});
