import { render, screen } from '../../test-utils';
import Highlight from './highlight';

describe('Highlight', () => {
  it('renders value with highlighted query (case-insensitive)', () => {
    render(<Highlight value="Hello World" query="world" />);
    expect(screen.getByText('World')).toBeInTheDocument();
    expect(screen.getByText('World').tagName).toBe('STRONG');
    expect(screen.getByText('Hello', { exact: false })).toBeInTheDocument();
  });

  it('renders value with highlighted query (case-sensitive in output)', () => {
    render(<Highlight value="Hello World" query="HELLO" />);
    expect(screen.getByText('Hello').tagName).toBe('STRONG');
    expect(screen.getByText('World', { exact: false })).toBeInTheDocument();
  });

  it('renders value without highlight if query not found', () => {
    render(<Highlight value="Hello World" query="foo" />);
    expect(screen.getByText('Hello World')).toBeInTheDocument();
    expect(screen.queryByRole('strong')).not.toBeInTheDocument();
  });

  it('renders value as is if query is empty', () => {
    render(<Highlight value="Hello World" query="" />);
    expect(screen.getByText('Hello World')).toBeInTheDocument();
    expect(screen.queryByRole('strong')).not.toBeInTheDocument();
  });

  it('renders value as is if value is empty', () => {
    render(<Highlight value="" query="test" />);
    expect(screen.queryByText(/./)).not.toBeInTheDocument();
    expect(screen.queryByRole('strong')).not.toBeInTheDocument();
  });

  it('wraps content in span if className is provided', () => {
    const { container } = render(
      <Highlight value="Hello World" query="world" className="highlighted" />,
    );
    expect(container.querySelector('span.highlighted')).toBeInTheDocument();
    expect(container.querySelector('strong')).toBeInTheDocument();
  });
});