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

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

describe('<PlaceholderScreen/> component', () => {
  it('renders the title as a heading', () => {
    render(<ComponentToTest title="Bookings" />);
    expect(screen.getByRole('heading', { name: 'Bookings' })).toBeInTheDocument();
  });

  it('renders the description when provided', () => {
    render(<ComponentToTest title="Bookings" description="Coming soon in a later phase." />);
    expect(screen.getByText('Coming soon in a later phase.')).toBeInTheDocument();
  });

  it('omits the description when not provided', () => {
    render(<ComponentToTest title="Wallet" />);
    expect(screen.queryByText(/phase/i)).not.toBeInTheDocument();
  });

  it('renders the named icon', () => {
    const { container } = render(<ComponentToTest title="Patients" icon="patients" />);
    expect(container.querySelector('[data-icon="patients"]')).toBeInTheDocument();
  });
});
