import { describe, expect, it } from 'vitest';
import { renderToStaticMarkup } from 'react-dom/server';
import { highlightText } from '../../src/components/HighlightText/highlight-text';

describe('highlightText', () => {
  it('returns original string when search query is empty', () => {
    expect(highlightText('Test Finding', '')).toBe('Test Finding');
    expect(highlightText('Test Finding', '   ')).toBe('Test Finding');
    expect(highlightText('Test Finding', undefined)).toBe('Test Finding');
  });

  it('wraps matching case-insensitive query in yellow mark tag', () => {
    const output = renderToStaticMarkup(<>{highlightText('Critical Active Directory finding', 'active')}</>);
    expect(output).toContain('Critical ');
    expect(output).toContain('<mark class="search-highlight">Active</mark>');
    expect(output).toContain(' Directory finding');
  });

  it('handles multiple occurrences of search term', () => {
    const output = renderToStaticMarkup(<>{highlightText('Password reset and password policy', 'password')}</>);
    expect(output).toBe('<mark class="search-highlight">Password</mark> reset and <mark class="search-highlight">password</mark> policy');
  });
});