import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { HelpText } from './HelpText';

describe('HelpText Component', () => {
  it('renders help text icon', () => {
    const { container } = render(
      <HelpText text="This is helpful information" />,
    );

    const icon = container.querySelector('svg');
    expect(icon).toBeInTheDocument();
  });

  it('has correct aria-label', () => {
    render(<HelpText text="Helpful information" />);

    const element = screen.getByLabelText('Aide: Helpful information');
    expect(element).toBeInTheDocument();
  });

  it('applies custom className', () => {
    const { container } = render(
      <HelpText text="Test" className="custom-class" />,
    );

    const element = container.querySelector('span');
    expect(element).toHaveClass('custom-class');
  });

  it('renders with different positions', () => {
    const { rerender } = render(<HelpText text="Test" position="top" />);
    expect(screen.getByLabelText('Aide: Test')).toBeInTheDocument();

    rerender(<HelpText text="Test" position="bottom" />);
    expect(screen.getByLabelText('Aide: Test')).toBeInTheDocument();

    rerender(<HelpText text="Test" position="left" />);
    expect(screen.getByLabelText('Aide: Test')).toBeInTheDocument();

    rerender(<HelpText text="Test" position="right" />);
    expect(screen.getByLabelText('Aide: Test')).toBeInTheDocument();
  });
});