import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { RowLabel } from '@/components/compare/sectionShared';

describe('RowLabel', () => {
  it('renders its label text', () => {
    render(<RowLabel>Attainment 8</RowLabel>);
    expect(screen.getByText('Attainment 8')).toBeInTheDocument();
  });

  it('shows no help affordance when no tip is given', () => {
    render(<RowLabel>Attainment 8</RowLabel>);
    expect(screen.queryByRole('button')).not.toBeInTheDocument();
  });

  it('opens the tip in a popover on click', async () => {
    const user = userEvent.setup();
    render(<RowLabel tip="Average GCSE score across 8 subjects">Attainment 8</RowLabel>);
    await user.click(screen.getByRole('button'));
    expect(await screen.findByRole('tooltip')).toHaveTextContent(
      'Average GCSE score across 8 subjects',
    );
  });
});