/** @jest-environment jsdom */

// Load sanitizer and highlight utils used by the UI
require('../sanitizer.js');
require('../highlight.js');

describe('Search highlight integration (server snippet rendering)', () => {
  const { formatSnippet, highlight, buildTokens } = window.highlightUtils;

  test('formatSnippet preserves server <strong> and sanitizes dangerous HTML', () => {
    const tokens = buildTokens('alpha');
    const serverSnippet = 'Hello <strong>Alpha</strong> <img src=x onerror=alert(1)> <a href="javascript:evil()">link</a>';
    const html = formatSnippet(serverSnippet, tokens);
    // Server-provided strong is preserved
    expect(html).toContain('<strong>Alpha</strong>');
    // Dangerous attributes removed
    expect(html).not.toContain('onerror=');
    // javascript: protocol removed
    expect(html.toLowerCase()).not.toContain('href="javascript:');
    // Image tag should remain but sanitized (no onerror)
    expect(html).toContain('<img');
  });

  test('setSafeHTML inserts sanitized content into DOM safely', () => {
    const container = document.createElement('div');
    const rawHtml = '<div onclick="evil()"><script>alert(1)</script>Text <b>bold</b></div>';
    // Using global helper installed by sanitizer.js
    window.setSafeHTML(container, rawHtml);
    // Script tags removed
    expect(container.innerHTML).not.toContain('<script>');
    // Event handlers stripped
    expect(container.innerHTML).not.toContain('onclick=');
    // Harmless markup preserved
    expect(container.innerHTML).toContain('<b>bold</b>');
  });

  test('highlight then sanitize flow escapes original tags and wraps tokens', () => {
    const tokens = buildTokens('john smith');
    const out = highlight('Hello <b>John</b> Smith & Sons', tokens);
    // Original b-tags escaped
    expect(out).toContain('&lt;b&gt;');
    // Tokens wrapped with strong
    expect(out).toMatch(/<strong>John<\/strong>/);
    expect(out).toMatch(/<strong>Smith<\/strong>/);
    // Ampersand escaped
    expect(out).toContain('&amp; Sons');
  });
});