AgentHub/client/src/components/__tests__/MarkdownPreview.test.tsx

/**
 * @file MarkdownPreview.test.tsx
 * @description The markdown preview: GFM renders (headings, tables, task
 * lists), raw HTML stays text, links open in a new tab, frontmatter is a
 * code block; and the config FileViewer offers Raw / Preview only for a
 * markdown file.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
import { FileViewer } from "../config/FileViewer";

describe("MarkdownPreview", () => {
  it("renders GFM: headings, tables and task lists", () => {
    render(
      <MarkdownPreview
        text={"# Title\n\n| a | b |\n|---|---|\n| 1 | 2 |\n\n- [x] done\n- [ ] todo\n"}
      />
    );
    expect(screen.getByRole("heading", { level: 1, name: "Title" })).toBeInTheDocument();
    expect(screen.getByRole("table")).toBeInTheDocument();
    expect(screen.getAllByRole("checkbox")).toHaveLength(2);
  });

  it("never runs raw HTML and opens links in a new tab", () => {
    const { container } = render(
      <MarkdownPreview
        text={'<script>alert(1)</script><img src=x onerror="alert(1)">\n\n[x](https://a.example)'}
      />
    );
    expect(container.querySelector("script")).toBeNull();
    expect(container.querySelector("img")).toBeNull();
    const link = screen.getByRole("link", { name: "x" });
    expect(link).toHaveAttribute("target", "_blank");
    expect(link).toHaveAttribute("rel", "noreferrer noopener");
  });

  it("shows frontmatter as a block, not as a heading", () => {
    const { container } = render(
      <MarkdownPreview text={"---\nname: demo\ndescription: d\n---\n\nBody text\n"} />
    );
    expect(container.querySelector(".md-frontmatter")).toHaveTextContent("name: demo");
    expect(screen.queryByRole("heading")).toBeNull();
    expect(screen.getByText("Body text")).toBeInTheDocument();
  });

  it("knows a markdown path", () => {
    expect(isMarkdown("/a/SKILL.md")).toBe(true);
    expect(isMarkdown("README.markdown")).toBe(true);
    expect(isMarkdown("config.toml")).toBe(false);
    expect(isMarkdown(null)).toBe(false);
  });
});

describe("FileViewer — markdown preview", () => {
  const data = { text: "# Hello\n", truncated: false } as never;

  it("opens a markdown file rendered, and switches it to raw and back", async () => {
    render(<FileViewer state={{ path: "/x/CLAUDE.md", data, error: null }} onClose={vi.fn()} />);
    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
    await userEvent.click(screen.getByRole("button", { name: "Raw" }));
    expect(screen.queryByTestId("markdown-preview")).toBeNull();
    expect(screen.getByText("# Hello")).toBeInTheDocument();
    await userEvent.click(screen.getByRole("button", { name: "Preview" }));
    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
  });

  it("opens it as source when Settings → Appearance says Raw", () => {
    window.localStorage.setItem("agenthub.markdown.view", "raw");
    try {
      render(<FileViewer state={{ path: "/x/CLAUDE.md", data, error: null }} onClose={vi.fn()} />);
      expect(screen.queryByTestId("markdown-preview")).toBeNull();
      expect(screen.getByText("# Hello")).toBeInTheDocument();
    } finally {
      window.localStorage.removeItem("agenthub.markdown.view");
    }
  });

  it("offers no preview for another file type", () => {
    render(<FileViewer state={{ path: "/x/config.toml", data, error: null }} onClose={vi.fn()} />);
    expect(screen.queryByRole("button", { name: "Preview" })).toBeNull();
  });
});