marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-21 17:26:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adding rendering tests and unit tests

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-04-03 12:12:51 +02:00
parent 99f65813a1
commit 471c842a58
8 changed files with 392 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
cypress/integration/rendering/flowchart-elk.spec.js
View File

@@ -684,4 +684,149 @@ A --> B
{ titleTopMargin: 0 }
);
});
describe('Markdown strings flowchart-elk (#4220)', () => {
describe('html labels', () => {
it('With styling and classes', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef someclass fill:#f96
`,
{ titleTopMargin: 0 }
);
});
it('With formatting in a node', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
a{"\`The **cat** in the hat\`"} -- 1o --> b
a -- 2o --> c
a -- 3o --> d
g --2i--> a
d --1i--> a
h --3i -->a
b --> d(The dog in the hog)
c --> d
`,
{ titleTopMargin: 0 }
);
});
it('New line in node and formatted edge label', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
b("\`The dog in **the** hog.(1)
NL\`") --"\`1o **bold**\`"--> c
`,
{ titleTopMargin: 0 }
);
});
it('Wrapping long text with a new line', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
b(\`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
`,
{ titleTopMargin: 0 }
);
});
it('Sub graphs and markdown strings', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
subgraph "One"
a("\`The **cat**
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
end
subgraph "\`**Two**\`"
c("\`The **cat**
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
end
`,
{ titleTopMargin: 0 }
);
});
});
describe('svg text labels', () => {
it('With styling and classes', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart-elk LR
A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef someclass fill:#f96
`,
{ titleTopMargin: 0 }
);
});
it('With formatting in a node', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart-elk LR
a{"\`The **cat** in the hat\`"} -- 1o --> b
a -- 2o --> c
a -- 3o --> d
g --2i--> a
d --1i--> a
h --3i -->a
b --> d(The dog in the hog)
c --> d
`,
{ titleTopMargin: 0 }
);
});
it('New line in node and formatted edge label', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart-elk LR
b("\`The dog in **the** hog.(1)
NL\`") --"\`1o **bold**\`"--> c
`,
{ titleTopMargin: 0 }
);
});
it('Wrapping long text with a new line', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart-elk LR
b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
`,
{ titleTopMargin: 0 }
);
});
it('Sub graphs and markdown strings', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart-elk LR
subgraph "One"
a("\`The **cat**
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
end
subgraph "\`**Two**\`"
c("\`The **cat**
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
end
`,
{ titleTopMargin: 0 }
);
});
});
});
});

145
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -685,4 +685,149 @@ A ~~~ B
{ titleTopMargin: 0 }
);
});
describe('Markdown strings flowchart (#4220)', () => {
describe('html labels', () => {
it('With styling and classes', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef someclass fill:#f96
`,
{ titleTopMargin: 0 }
);
});
it('With formatting in a node', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
a{"\`The **cat** in the hat\`"} -- 1o --> b
a -- 2o --> c
a -- 3o --> d
g --2i--> a
d --1i--> a
h --3i -->a
b --> d(The dog in the hog)
c --> d
`,
{ titleTopMargin: 0 }
);
});
it('New line in node and formatted edge label', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
b("\`The dog in **the** hog.(1)
NL\`") --"\`1o **bold**\`"--> c
`,
{ titleTopMargin: 0 }
);
});
it('Wrapping long text with a new line', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
`,
{ titleTopMargin: 0 }
);
});
it('Sub graphs and markdown strings', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
subgraph "One"
a("\`The **cat**
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
end
subgraph "\`**Two**\`"
c("\`The **cat**
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
end
`,
{ titleTopMargin: 0 }
);
});
});
describe('svg text labels', () => {
it('With styling and classes', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef someclass fill:#f96
`,
{ titleTopMargin: 0 }
);
});
it('With formatting in a node', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
a{"\`The **cat** in the hat\`"} -- 1o --> b
a -- 2o --> c
a -- 3o --> d
g --2i--> a
d --1i--> a
h --3i -->a
b --> d(The dog in the hog)
c --> d
`,
{ titleTopMargin: 0 }
);
});
it('New line in node and formatted edge label', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
b("\`The dog in **the** hog.(1)
NL\`") --"\`1o **bold**\`"--> c
`,
{ titleTopMargin: 0 }
);
});
it('Wrapping long text with a new line', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
`,
{ titleTopMargin: 0 }
);
});
it('Sub graphs and markdown strings', () => {
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
subgraph "One"
a("\`The **cat**
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
end
subgraph "\`**Two**\`"
c("\`The **cat**
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
end
`,
{ titleTopMargin: 0 }
);
});
});
});
});

13
cypress/integration/rendering/mindmap.spec.ts
View File

@@ -223,5 +223,18 @@ mindmap
shouldHaveRoot
);
});
describe('Markdown strings mindmaps (#4220)', () => {
it('Formatted label with linebreak and a wrapping label and emojis', () => {
imgSnapshotTest(
`mindmap
id1[\`**Start** with
a second line 😎\`]
id2[\`The dog in **the** hog... a *very long text* about it
Word!\`]
`,
{ titleTopMargin: 0 }
);
});
});
/* The end */
});

98
cypress/platform/knsv2.html
View File

@@ -58,91 +58,23 @@
</head>
<body>
<pre id="diagram" class="mermaid">
flowchart LR
A:::someclass --> B[`The **cat** in the hat`]:::someclass
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef someclass fill:#f96
</pre
>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
%%
flowchart LR
A:::someclass --> B[`The **cat** in the hat`]:::someclass
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef someclass fill:#f96
</pre
>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
%%
graph LR
a{`The **cat** in the hat`} -- 1o --> b
a -- 2o --> c
a -- 3o --> d
g --2i--> a
d --1i--> a
h --3i -->a
b --> d(The dog in the hog)
c --> d
</pre
>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart LR
b(`The dog in **the** hog.(1)
NL`) --`1o **bold**`--> c
</pre
>
<pre id="diagram" class="mermaid">
flowchart-elk LR
b(`The dog in **the** hog.(1)
NL`) --`1o **bold**`--> c
</pre
>
<pre id="diagram" class="mermaid">
flowchart-elk LR
b(`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `) --> c
</pre
>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"htmlLabels": true}} }%%
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart-elk LR
b(`The dog in **the** hog(2)... a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `)
</pre
>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"htmlLabels": false}} }%%
<pre id="diagram" class="mermaid2">
flowchart-elk LR
b("The dog in the hog... a very<br/>long text about it<br/>Word!")
</pre>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"htmlLabels": true}} }%%
<pre id="diagram" class="mermaid2">
flowchart-elk LR
b("The dog in the hog... a very<br/>long text about it<br/>Word!")
</pre>
<pre id="diagram" class="mermaid">
flowchart-elk LR
subgraph "One"
a(`The **cat**
in the hat`) -- "1o" --> b{{`The **dog** in the hog`}}
end
subgraph `**Two**`
c(`The **cat**
in the hat`) -- `1o **ipa**` --> d("The dog in the hog")
end
</pre
>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
mindmap
id1[`**Start2**
second line 😎 with long text that is wrapping to the next line`]
@@ -157,12 +89,12 @@ mindmap
</pre>
<pre id="diagram" class="mermaid">
mindmap
id1[`**Start** with
a second line 😎`]
id2[`The dog in **the** hog... a *very long text* about it
Word!`]
id1["`**Start** with
a second line 😎`"]
id2["`The dog in **the** hog... a *very long text* about it
Word!`"]
</pre>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
@@ -218,7 +150,7 @@ flowchart TB
</pre
>
<br />
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU]
@@ -274,7 +206,7 @@ flowchart TB
>
<br />
&nbsp;
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
flowchart LR
B1 --be be--x B2
B1 --bo bo--o B3
@@ -307,7 +239,7 @@ flowchart TB
B6 --> B5
</pre
>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
sequenceDiagram
Customer->>+Stripe: Makes a payment request
Stripe->>+Bank: Forwards the payment request to the bank
@@ -320,7 +252,7 @@ sequenceDiagram
Customer->>+Merchant: Receives goods or services
</pre
>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
mindmap
root((mindmap))
Origins
@@ -340,7 +272,7 @@ mindmap
Mermaid
</pre>
<br />
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
example-diagram
</pre>
@@ -368,7 +300,7 @@ mindmap
htmlLabels: false,
// htmlLabels: true,
},
htmlLabels: false,
// htmlLabels: true,
gantt: {
useMaxWidth: false,
},

64
packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js Normal file
View File

@@ -0,0 +1,64 @@
import flowDb from '../flowDb';
import flow from './flow';
import { setConfig } from '../../../config';
setConfig({
securityLevel: 'strict',
});
describe('parsing a flow chart with markdown strings', function () {
beforeEach(function () {
flow.parser.yy = flowDb;
flow.parser.yy.clear();
});
it('mardown formatting in nodes and labels', function () {
const res = flow.parser.parse(`flowchart
A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in the hog"] -- "The rat in the mat" -->C;`);
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['A'].text).toBe('The cat in **the** hat');
expect(vert['A'].labelType).toBe('markdown');
expect(vert['B'].id).toBe('B');
expect(vert['B'].text).toBe('The dog in the hog');
expect(vert['B'].labelType).toBe('text');
expect(edges.length).toBe(2);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('arrow_point');
expect(edges[0].text).toBe('The *bat* in the chat');
expect(edges[0].labelType).toBe('markdown');
expect(edges[1].start).toBe('B');
expect(edges[1].end).toBe('C');
expect(edges[1].type).toBe('arrow_point');
expect(edges[1].text).toBe('The rat in the mat');
expect(edges[1].labelType).toBe('text');
});
it('mardown formatting in subgraphs', function () {
const res = flow.parser.parse(`flowchart LR
subgraph "One"
a("\`The **cat**
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
end
subgraph "\`**Two**\`"
c("\`The **cat**
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
end`);
const subgraphs = flow.parser.yy.getSubGraphs();
expect(subgraphs.length).toBe(2);
const subgraph = subgraphs[0];
expect(subgraph.nodes.length).toBe(2);
expect(subgraph.title).toBe('One');
expect(subgraph.labelType).toBe('text');
const subgraph2 = subgraphs[1];
expect(subgraph2.nodes.length).toBe(2);
expect(subgraph2.title).toBe('**Two**');
expect(subgraph2.labelType).toBe('markdown');
});
});

6
packages/mermaid/src/diagrams/flowchart/parser/flow.jison
View File

@@ -38,9 +38,9 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
<acc_descr_multiline>[\}] { this.popState(); }
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
// <acc_descr_multiline>.*[^\n]* { return "acc_descr_line"}
[`] { this.begin("md_string");}
<md_string>[^`]+ { return "MD_STR";}
<md_string>[`] { this.popState();}
["][`] { this.begin("md_string");}
<md_string>[^`"]+ { return "MD_STR";}
<md_string>[`]["] { this.popState();}
["] this.begin("string");
<string>["] this.popState();
<string>[^"]* return "STR";

5
packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
View File

@@ -167,12 +167,15 @@ function positionNodes(cy) {
export const draw = async (text, id, version, diagObj) => {
const conf = getConfig();
// console.log('Config: ', conf);
conf.htmlLabels = false;
// This is done only for throwing the error if the text is not valid.
diagObj.db.clear();
// Parse the graph definition
diagObj.parser.parse(text);
log.debug('Renering info diagram\n' + text);
log.debug('Renering mindmap diagram\n' + text, diagObj);
const securityLevel = getConfig().securityLevel;
// Handle root and Document for when rendering in sandbox mode

6
packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
View File

@@ -42,9 +42,9 @@
// !(-\() return 'NODE_ID';
[^\(\[\n\-\)\{\}]+ return 'NODE_ID';
<<EOF>> return 'EOF';
<NODE>[`] { this.begin("NSTR2");}
<NSTR2>[^`]+ { return "NODE_DESCR";}
<NSTR2>[`] { this.popState();}
<NODE>["][`] { this.begin("NSTR2");}
<NSTR2>[^`"]+ { return "NODE_DESCR";}
<NSTR2>[`]["] { this.popState();}
<NODE>["] { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");}
<NSTR>[^"]+ { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";}
<NSTR>["] {this.popState();}