recipe/packages/md-enhance/__tests__/unit/mermaid.spec.ts

import { decodeData } from "@vuepress/helper";
import MarkdownIt from "markdown-it";
import { describe, expect, it } from "vitest";

import {
  getMermaidContent,
  mermaid,
} from "../../src/node/markdown-it/mermaid.js";

const title = "Sample Title";

const flowchartDemo = `\
flowchart TB
  c1-->a2
  subgraph one
  a1-->a2
  end
  subgraph two
  b1-->b2
  end
  subgraph three
  c1-->c2
  end
  one --> two
  three --> two
  two --> c2\
`;

const sequenceDemo = `\
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?\
`;

describe("getMermaidContent()", () => {
  it("Should work with content", () => {
    expect(getMermaidContent({ content: flowchartDemo })).toMatchSnapshot();
    expect(
      getMermaidContent({ diagram: "sequenceDiagram", content: sequenceDemo }),
    ).toMatchSnapshot();
  });

  it("Should work with title and content", () => {
    expect(
      getMermaidContent({ title, content: flowchartDemo }),
    ).toMatchSnapshot();
    expect(
      getMermaidContent({
        diagram: "sequenceDiagram",
        title,
        content: sequenceDemo,
      }),
    ).toMatchSnapshot();
  });
});

describe("mermaid plugin", () => {
  const markdownIt = MarkdownIt({ linkify: true }).use(mermaid);

  it("Should render ```mermaid", () => {
    const renderResult = markdownIt.render(`
\`\`\`mermaid
${flowchartDemo}
\`\`\`
`);

    expect(renderResult).toMatch(
      /<Mermaid id="mermaid.*?" code=".*?"><\/Mermaid>/,
    );
    expect(
      decodeData(
        /<Mermaid id="mermaid.*?" code="(.*?)"><\/Mermaid>/.exec(
          renderResult,
        )?.[1] ?? "",
      ),
    ).toMatch(flowchartDemo);
    expect(renderResult).toMatchSnapshot();
  });

  it("Should not render", () => {
    expect(
      markdownIt.render(`
${flowchartDemo}
`),
    ).toMatchSnapshot();

    expect(
      markdownIt.render(`
\`\`\`md
${flowchartDemo}
\`\`\`
`),
    ).toMatchSnapshot();
  });

  it("Should render ```sequence", () => {
    const renderResult1 = markdownIt.render(`
\`\`\`sequence
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
\`\`\`
`);
    const renderResult2 = markdownIt.render(`
\`\`\`sequence Greetings
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
\`\`\`
`);

    expect(renderResult1).toMatchSnapshot();
    expect(renderResult2).toMatchSnapshot();
  });

  it("Should render ```class", () => {
    const renderResult = markdownIt.render(`
\`\`\`class
class Square~Shape~{
  int id
  List~int~ position
  setPoints(List~int~ points)
  getPoints() List~int~
}

Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
\`\`\`
`);

    expect(renderResult).toMatchSnapshot();
  });

  it("Should render ```state", () => {
    const renderResult = markdownIt.render(`
\`\`\`state
[*] --> Active

state Active {
  [*] --> NumLockOff
  NumLockOff --> NumLockOn : EvNumLockPressed
  NumLockOn --> NumLockOff : EvNumLockPressed
  --
  [*] --> CapsLockOff
  CapsLockOff --> CapsLockOn : EvCapsLockPressed
  CapsLockOn --> CapsLockOff : EvCapsLockPressed
  --
  [*] --> ScrollLockOff
  ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
  ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
\`\`\`
`);

    expect(renderResult).toMatchSnapshot();
  });

  it("Should render ```er", () => {
    const renderResult = markdownIt.render(`
\`\`\`er
CAR ||--o{ NAMED-DRIVER : allows
CAR {
  string registrationNumber
  string make
  string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
  string firstName
  string lastName
  int age
}
\`\`\`
`);

    expect(renderResult).toMatchSnapshot();
  });

  it("Should render ```journey", () => {
    const renderResult = markdownIt.render(`
\`\`\`journey
title My working day
section Go to work
  Make tea: 5: Me
  Go upstairs: 3: Me
  Do work: 1: Me, Cat
section Go home
  Go downstairs: 5: Me
  Sit down: 5: Me
\`\`\`
`);

    expect(renderResult).toMatchSnapshot();
  });

  it("Should render ```gantt", () => {
    const renderResult = markdownIt.render(`
\`\`\`gantt
dateFormat  YYYY-MM-DD
title       Adding GANTT diagram functionality to mermaid
excludes    weekends
%% (\`excludes\` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2              :         des4, after des3, 5d

section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser                    :crit, done, after des1, 2d
Create tests for parser             :crit, active, 3d
Future task in critical line        :crit, 5d
Create tests for renderer           :2d
Add to mermaid                      :1d

section Documentation
Describe gantt syntax               :active, a1, after des1, 3d
Add gantt diagram to demo page      :after a1  , 20h
Add another diagram to demo page    :doc1, after a1  , 48h

section Last section
Describe gantt syntax               :after doc1, 3d
Add gantt diagram to demo page      :20h
Add another diagram to demo page    :48h
\`\`\`
`);

    expect(renderResult).toMatchSnapshot();
  });

  it("Should render ```pie", () => {
    const renderResult = markdownIt.render(`
\`\`\`pie
title What Voldemort doesn’t have?
  "FRIENDS" : 2
  "FAMILY" : 3
  "NOSE" : 45
\`\`\`
`);

    expect(renderResult).toMatchSnapshot();
  });

  it("Should render ```git-graph", () => {
    const renderResult = markdownIt.render(`
\`\`\`git-graph
commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE
commit
commit id: "Highlight" type: HIGHLIGHT
commit
\`\`\`
`);

    expect(renderResult).toMatchSnapshot();
  });
});