MorphDoc/packages/renderer/tests/render-markdown.test.ts

import { describe, expect, it } from "vitest";
import {
  extractMarkdownImageSources,
  MarkdownDocumentParseError,
  renderMarkdown
} from "../src/render-markdown.js";

describe("renderMarkdown", () => {
  it("渲染常用 Markdown 扩展并识别能力", () => {
    const result = renderMarkdown(`
# 示例文档

| 名称 | 状态 |
| --- | --- |
| PDF | 可用 |

- [x] 已完成
- [ ] 待处理

\`\`\`ts
const answer = 42;
\`\`\`

脚注引用[^note]。

[^note]: 脚注正文。
`);

    expect(result.articleHtml).toContain('id="write"');
    expect(result.bodyHtml).toContain("<table>");
    expect(result.bodyHtml).toContain("md-task-list-item");
    expect(result.bodyHtml).toContain("hljs-keyword");
    expect(result.bodyHtml).toContain("footnote");
    expect(result.metadata.title).toBe("示例文档");
    expect(result.features).toEqual(
      expect.arrayContaining(["code", "table", "task-list", "footnote"])
    );
  });

  it("保留 Markdown 表格的列对齐语义", () => {
    const result = renderMarkdown(`
| 左对齐 | 居中 | 右对齐 |
| :--- | :---: | ---: |
| A | B | C |
`);

    expect(result.bodyHtml).toContain('<th style="text-align:left">左对齐</th>');
    expect(result.bodyHtml).toContain('<th style="text-align:center">居中</th>');
    expect(result.bodyHtml).toContain('<th style="text-align:right">右对齐</th>');
    expect(result.bodyHtml).toContain('<td style="text-align:left">A</td>');
    expect(result.bodyHtml).toContain('<td style="text-align:center">B</td>');
    expect(result.bodyHtml).toContain('<td style="text-align:right">C</td>');
  });

  it("读取并规范化 Front Matter 元数据", () => {
    const result = renderMarkdown(`---
title: 项目报告
author: 张三
subject: 技术方案
keywords:
  - Markdown
  - PDF
lang: zh-CN
---

# 不作为标题
`);

    expect(result.metadata).toEqual({
      title: "项目报告",
      author: "张三",
      subject: "技术方案",
      keywords: ["Markdown", "PDF"],
      language: "zh-CN"
    });
  });

  it("使用稳定错误类型报告无效 Front Matter", () => {
    expect(() =>
      renderMarkdown(`---
title: [未闭合
---

# 文档
`)
    ).toThrow(MarkdownDocumentParseError);
  });

  it("服务端渲染公式并保留 Mermaid 安全占位", () => {
    const result = renderMarkdown(`
内联公式 $E=mc^2$。

\`\`\`mermaid
flowchart LR
  A[开始] --> B[结束]
\`\`\`
`);

    expect(result.bodyHtml).toContain("katex");
    expect(result.bodyHtml).toContain('class="mermaid"');
    expect(result.bodyHtml).toContain("data-mermaid-pending");
    expect(result.features).toEqual(
      expect.arrayContaining(["katex", "mermaid"])
    );
  });

  it("完整保留 Mermaid 区块内的 config frontmatter", () => {
    const result = renderMarkdown(`
\`\`\`mermaid
---
title: Frontmatter 示例
config:
  layout: elk
  theme: forest
  look: handDrawn
  fontFamily: Microsoft YaHei
  themeVariables:
    primaryColor: "#dbeafe"
  flowchart:
    curve: basis
---
flowchart LR
  classDef important fill:#fee2e2,stroke:#dc2626
  A[开始] --> B[结束]
  style A fill:#dcfce7,stroke:#16a34a
  class B important
\`\`\`
`);

    expect(result.bodyHtml).toContain("title: Frontmatter 示例");
    expect(result.bodyHtml).toContain("layout: elk");
    expect(result.bodyHtml).toContain("theme: forest");
    expect(result.bodyHtml).toContain("look: handDrawn");
    expect(result.bodyHtml).toContain("fontFamily: Microsoft YaHei");
    expect(result.bodyHtml).toContain("primaryColor:");
    expect(result.bodyHtml).toContain("curve: basis");
    expect(result.bodyHtml).toContain("flowchart LR");
    expect(result.bodyHtml).toContain("classDef important");
    expect(result.bodyHtml).toContain("style A fill:");
    expect(result.bodyHtml).toContain("class B important");
  });

  it("将 ECharts YAML 围栏转换为安全占位并识别能力", () => {
    const result = renderMarkdown(`
\`\`\`echarts
version: 1
height: 80mm
caption: 年度收入
option:
  xAxis:
    type: category
    data: [2023, 2024]
  yAxis:
    type: value
  series:
    - type: bar
      data: [120, 180]
\`\`\`
`);

    expect(result.bodyHtml).toContain('class="md-echarts"');
    expect(result.bodyHtml).toContain(
      'data-echarts-pending="true"'
    );
    expect(result.bodyHtml).toContain(
      'data-echarts-protocol="1"'
    );
    expect(result.bodyHtml).toContain(
      'class="md-echarts-definition" hidden="hidden"'
    );
    expect(result.bodyHtml).toContain(
      "<figcaption>年度收入</figcaption>"
    );
    expect(result.features).toContain("echarts");
    expect(result.warnings).toEqual([]);
  });

  it("将无效 ECharts 配置转为局部错误和文档告警", () => {
    const result = renderMarkdown(`
\`\`\`echarts
version: 1
height: 80mm
option:
  series:
    - type: custom
\`\`\`
`);

    expect(result.bodyHtml).toContain(
      'class="md-echarts-error"'
    );
    expect(result.bodyHtml).not.toContain(
      "data-echarts-pending"
    );
    expect(result.features).toContain("echarts");
    expect(result.warnings).toHaveLength(1);
    expect(result.warnings[0]).toContain(
      "ECharts 图表配置无效"
    );
  });

  it("阻止原始 HTML 和危险链接形成可执行内容", () => {
    const result = renderMarkdown(`
<script>alert("xss")</script>

[危险链接](javascript:alert("xss"))
`);

    expect(result.bodyHtml).not.toContain("<script");
    expect(result.bodyHtml).not.toMatch(/href=["']javascript:/u);
    expect(result.bodyHtml).toContain("&lt;script&gt;");
  });

  it("提取图片引用并使用受控资源地址替换", () => {
    const source =
      "![本地](./文档.assets/a%20b.png)\n\n![远程](https://example.com/a.png)";
    expect(extractMarkdownImageSources(source)).toEqual([
      "./%E6%96%87%E6%A1%A3.assets/a%20b.png",
      "https://example.com/a.png"
    ]);

    const result = renderMarkdown(source, {
      imageSourceMap: new Map([
        [
          "./%E6%96%87%E6%A1%A3.assets/a%20b.png",
          "data:image/png;base64,iVBORw0KGgo="
        ]
      ]),
      warnings: ["远程图片下载失败"]
    });

    expect(result.bodyHtml).toContain(
      'class="md-document-image"'
    );
    expect(result.bodyHtml).toContain(
      '<figure class="md-document-image-block">'
    );
    expect(result.bodyHtml).toContain(
      '<figcaption class="md-document-image-caption">本地</figcaption>'
    );
    expect(result.bodyHtml).toContain(
      'src="data:image/png;base64,iVBORw0KGgo="'
    );
    expect(result.warnings).toContain("远程图片下载失败");
  });

  it("只为独立图片块生成可见标题，行内图片保持段落语义", () => {
    const result = renderMarkdown(
      "文字 ![行内图](inline.png) 继续\n\n![独立标题](block.png)"
    );

    expect(result.bodyHtml).toContain(
      '<p>文字 <img src="inline.png" alt="行内图" class="md-document-image" /> 继续</p>'
    );
    expect(result.bodyHtml).not.toContain(
      "md-document-image-caption\">行内图"
    );
    expect(result.bodyHtml).toContain(
      '<figcaption class="md-document-image-caption">独立标题</figcaption>'
    );
  });

  it("为重复中文标题生成唯一锚点", () => {
    const result = renderMarkdown(`
# 章节

## 章节

## 章节
`);

    expect(result.bodyHtml).toContain('id="%E7%AB%A0%E8%8A%82"');
    expect(result.bodyHtml).toContain('id="%E7%AB%A0%E8%8A%82-2"');
    expect(result.bodyHtml).toContain('id="%E7%AB%A0%E8%8A%82-3"');
  });
});