import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MetricTooltip } from '@/components/MetricTooltip';
import { METRIC_EXPLANATIONS } from '@/lib/metrics';

describe('MetricTooltip', () => {
  it('resolves content from a metricKey', async () => {
    const key = Object.keys(METRIC_EXPLANATIONS)[0];
    const exp = METRIC_EXPLANATIONS[key];
    const user = userEvent.setup();
    render(<MetricTooltip metricKey={key} />);
    // Collapsed by default — the popover content is not in the DOM until opened
    // (the old component left an always-present role="tooltip" span behind).
    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
    await user.click(screen.getByRole('button', { name: `What does ${exp.label} mean?` }));
    const tip = await screen.findByRole('tooltip');
    expect(tip).toHaveTextContent(exp.plain);
  });

  it('renders nothing for an unknown metricKey with no explicit content', () => {
    const { container } = render(<MetricTooltip metricKey="__nope__" />);
    expect(container).toBeEmptyDOMElement();
  });

  it('lets explicit props override the looked-up explanation', async () => {
    const key = Object.keys(METRIC_EXPLANATIONS)[0];
    const user = userEvent.setup();
    render(<MetricTooltip metricKey={key} plain="custom text" />);
    await user.click(screen.getByRole('button'));
    expect(await screen.findByRole('tooltip')).toHaveTextContent('custom text');
  });
});
