hikari-desktop/src/lib/components/Markdown.test.ts

/**
 * Markdown Component Tests
 *
 * Tests the pure helper functions extracted from the Markdown component:
 * - processSpoilers: wraps ||text|| syntax in spoiler spans, leaving code blocks untouched
 * - highlightSearchMatches: injects <mark> tags for search terms, skipping code blocks
 *
 * Manual testing checklist:
 * - [ ] Code blocks render with syntax highlighting and a copy button
 * - [ ] ||spoiler text|| renders as a hidden span revealed on click
 * - [ ] Search query highlights matching text in non-code content
 * - [ ] Regular links open in the system browser via the Tauri opener
 * - [ ] Binary file links invoke open_binary_file (WSL-path-aware) instead of openPath
 */

import { describe, it, expect } from "vitest";

// Mirror functions from Markdown.svelte for isolated testing

function processSpoilers(html: string): string {
  const codeBlockPlaceholders: string[] = [];

  let processed = html.replace(/<(pre|code)[^>]*>[\s\S]*?<\/\1>/gi, (match) => {
    codeBlockPlaceholders.push(match);
    return `__CODE_PLACEHOLDER_${codeBlockPlaceholders.length - 1}__`;
  });

  processed = processed.replace(
    /\|\|(.+?)\|\|/g,
    '<span class="spoiler" role="button" tabindex="0">$1</span>'
  );

  processed = processed.replace(/__CODE_PLACEHOLDER_(\d+)__/g, (_, index) => {
    return codeBlockPlaceholders[parseInt(index)];
  });

  return processed;
}

function highlightSearchMatches(html: string, query: string): string {
  if (!query) return html;

  const codeBlockPlaceholders: string[] = [];
  const tagPlaceholders: string[] = [];

  let processed = html.replace(/<(pre|code)[^>]*>[\s\S]*?<\/\1>/gi, (match) => {
    codeBlockPlaceholders.push(match);
    return `__CODE_SEARCH_PLACEHOLDER_${codeBlockPlaceholders.length - 1}__`;
  });

  processed = processed.replace(/<[^>]+>/g, (match) => {
    tagPlaceholders.push(match);
    return `__TAG_PLACEHOLDER_${tagPlaceholders.length - 1}__`;
  });

  const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  const regex = new RegExp(`(${escapedQuery})`, "gi");
  processed = processed.replace(regex, '<mark class="search-highlight">$1</mark>');

  processed = processed.replace(/__TAG_PLACEHOLDER_(\d+)__/g, (_, index) => {
    return tagPlaceholders[parseInt(index)];
  });

  processed = processed.replace(/__CODE_SEARCH_PLACEHOLDER_(\d+)__/g, (_, index) => {
    return codeBlockPlaceholders[parseInt(index)];
  });

  return processed;
}

// ---

describe("processSpoilers", () => {
  it("wraps ||text|| in a spoiler span", () => {
    const result = processSpoilers("<p>||secret||</p>");
    expect(result).toContain('<span class="spoiler"');
    expect(result).toContain("secret");
  });

  it("adds role=button and tabindex to spoiler spans", () => {
    const result = processSpoilers("<p>||hidden||</p>");
    expect(result).toContain('role="button"');
    expect(result).toContain('tabindex="0"');
  });

  it("leaves content without spoiler markers unchanged", () => {
    const html = "<p>Normal text here</p>";
    expect(processSpoilers(html)).toBe(html);
  });

  it("handles multiple spoilers in the same string", () => {
    const result = processSpoilers("<p>||a|| and ||b||</p>");
    const matches = result.match(/class="spoiler"/g);
    expect(matches).toHaveLength(2);
  });

  it("does not apply spoiler syntax inside code blocks", () => {
    const html = "<pre><code>||not a spoiler||</code></pre>";
    const result = processSpoilers(html);
    expect(result).not.toContain('class="spoiler"');
    expect(result).toContain("||not a spoiler||");
  });

  it("does not apply spoiler syntax inside inline code", () => {
    const html = "<p>Example: <code>||inline||</code></p>";
    const result = processSpoilers(html);
    expect(result).not.toContain('class="spoiler"');
  });

  it("handles spoilers adjacent to code blocks correctly", () => {
    const html = "<pre><code>code</code></pre><p>||revealed||</p>";
    const result = processSpoilers(html);
    expect(result).toContain('<span class="spoiler"');
    expect(result).toContain("<pre><code>code</code></pre>");
  });
});

describe("highlightSearchMatches", () => {
  it("returns unchanged html when query is empty string", () => {
    const html = "<p>hello world</p>";
    expect(highlightSearchMatches(html, "")).toBe(html);
  });

  it("wraps matched text in a mark element", () => {
    const result = highlightSearchMatches("<p>hello world</p>", "hello");
    expect(result).toContain('<mark class="search-highlight">hello</mark>');
  });

  it("is case-insensitive", () => {
    const result = highlightSearchMatches("<p>Hello World</p>", "hello");
    expect(result).toContain('<mark class="search-highlight">Hello</mark>');
  });

  it("highlights all occurrences", () => {
    const result = highlightSearchMatches("<p>cat and cat</p>", "cat");
    const matches = result.match(/<mark class="search-highlight">/g);
    expect(matches).toHaveLength(2);
  });

  it("does not highlight inside code blocks", () => {
    const html = "<pre><code>hello inside code</code></pre>";
    const result = highlightSearchMatches(html, "hello");
    expect(result).not.toContain('<mark class="search-highlight">');
    expect(result).toContain("hello inside code");
  });

  it("does not corrupt HTML tags", () => {
    const result = highlightSearchMatches('<p class="foo">hello</p>', "hello");
    expect(result).toContain('<p class="foo">');
    expect(result).toContain('<mark class="search-highlight">hello</mark>');
  });

  it("escapes regex special characters in the query", () => {
    const result = highlightSearchMatches("<p>price: $1.00</p>", "$1");
    expect(result).toContain('<mark class="search-highlight">$1</mark>');
  });

  it("highlights text outside code blocks whilst leaving code intact", () => {
    const html = "<pre><code>match here</code></pre><p>match here too</p>";
    const result = highlightSearchMatches(html, "match");
    expect(result).toContain("<pre><code>match here</code></pre>");
    expect(result).toContain('<mark class="search-highlight">match</mark>');
  });
});