277 lines
6.7 KiB
TypeScript
277 lines
6.7 KiB
TypeScript
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();
|
||
});
|
||
});
|