marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-05 07:09:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix for amp and adjusted tests

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-09-12 16:58:52 +02:00
parent 355e218837
commit 4162a25425
12 changed files with 261 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/integration/rendering/flowchart-shape-alias.spec.ts
View File

@@ -126,7 +126,7 @@ aliasSets.forEach((aliasSet) => {
it(`All ${aliasSet.join(',')} should render same shape`, () => {
let flowchartCode = `flowchart \n`;
aliasSet.forEach((alias, index) => {
flowchartCode += ` n${index}@{ shape: ${alias}, label: "${alias}" }@\n`;
flowchartCode += ` n${index}@{ shape: ${alias}, label: "${alias}" }\n`;
});
imgSnapshotTest(flowchartCode);
});

16
cypress/integration/rendering/iconShape.spec.ts
View File

@@ -16,7 +16,7 @@ looks.forEach((look) => {
if (form) {
flowchartCode += `, form: '${form}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
imgSnapshotTest(flowchartCode, { look });
});
@@ -29,7 +29,7 @@ looks.forEach((look) => {
if (pos) {
flowchartCode += `, pos: '${pos}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
imgSnapshotTest(flowchartCode, { look });
});
@@ -42,7 +42,7 @@ looks.forEach((look) => {
if (pos) {
flowchartCode += `, pos: '${pos}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
imgSnapshotTest(flowchartCode, { look });
});
@@ -55,7 +55,7 @@ looks.forEach((look) => {
if (pos) {
flowchartCode += `, pos: '${pos}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
imgSnapshotTest(flowchartCode, { look });
});
@@ -68,7 +68,7 @@ looks.forEach((look) => {
if (pos) {
flowchartCode += `, pos: '${pos}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
imgSnapshotTest(flowchartCode, {
look,
htmlLabels: false,
@@ -85,7 +85,7 @@ looks.forEach((look) => {
if (pos) {
flowchartCode += `, pos: '${pos}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
flowchartCode += ` style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`;
imgSnapshotTest(flowchartCode, { look });
});
@@ -100,7 +100,7 @@ looks.forEach((look) => {
if (pos) {
flowchartCode += `, pos: '${pos}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
flowchartCode += ` nAA:::customClazz\n`;
imgSnapshotTest(flowchartCode, { look });
});
@@ -115,7 +115,7 @@ describe('Test iconShape with different h', () => {
let flowchartCode = `flowchart TB\n`;
const icon = 'fa:bell';
const iconHeight = 64;
flowchartCode += ` nA --> nAA@{ icon: '${icon}', label: 'icon with different h', h: ${iconHeight} }@\n`;
flowchartCode += ` nA --> nAA@{ icon: '${icon}', label: 'icon with different h', h: ${iconHeight} }\n`;
imgSnapshotTest(flowchartCode);
});
});

14
cypress/integration/rendering/imageShape.spec.ts
View File

@@ -10,7 +10,7 @@ looks.forEach((look) => {
describe(`Test imageShape in ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => {
it(`without label`, () => {
let flowchartCode = `flowchart ${direction}\n`;
flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }@\n`;
flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }\n`;
imgSnapshotTest(flowchartCode, { look });
});
@@ -22,7 +22,7 @@ looks.forEach((look) => {
if (pos) {
flowchartCode += `, pos: '${pos}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
imgSnapshotTest(flowchartCode, { look });
});
@@ -34,7 +34,7 @@ looks.forEach((look) => {
if (pos) {
flowchartCode += `, pos: '${pos}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
imgSnapshotTest(flowchartCode, { look });
});
@@ -46,7 +46,7 @@ looks.forEach((look) => {
if (pos) {
flowchartCode += `, pos: '${pos}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
imgSnapshotTest(flowchartCode, { look, htmlLabels: true });
});
@@ -58,7 +58,7 @@ looks.forEach((look) => {
if (pos) {
flowchartCode += `, pos: '${pos}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
imgSnapshotTest(flowchartCode, {
look,
htmlLabels: false,
@@ -74,7 +74,7 @@ looks.forEach((look) => {
if (pos) {
flowchartCode += `, pos: '${pos}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
flowchartCode += ` style A fill:#f9f,stroke:#333,stroke-width:4px \n`;
imgSnapshotTest(flowchartCode, { look });
});
@@ -88,7 +88,7 @@ looks.forEach((look) => {
if (pos) {
flowchartCode += `, pos: '${pos}'`;
}
flowchartCode += ` }@\n`;
flowchartCode += ` }\n`;
flowchartCode += ` A:::customClazz\n`;
imgSnapshotTest(flowchartCode, { look });
});

16
cypress/integration/rendering/newShapes.spec.ts
View File

@@ -59,7 +59,7 @@ looks.forEach((look) => {
it(`without label`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape} }@\n`;
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape} }\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
@@ -67,7 +67,7 @@ looks.forEach((look) => {
it(`with label`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
@@ -75,7 +75,7 @@ looks.forEach((look) => {
it(`connect all shapes with each other`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
flowchartCode += ` n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
});
for (let i = 0; i < newShapesSet.length; i++) {
for (let j = i + 1; j < newShapesSet.length; j++) {
@@ -88,7 +88,7 @@ looks.forEach((look) => {
it(`with very long label`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }@\n`;
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
@@ -96,7 +96,7 @@ looks.forEach((look) => {
it(`with markdown htmlLabels:true`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
@@ -104,7 +104,7 @@ looks.forEach((look) => {
it(`with markdown htmlLabels:false`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
});
imgSnapshotTest(flowchartCode, {
look,
@@ -116,7 +116,7 @@ looks.forEach((look) => {
it(`with styles`, () => {
let flowchartCode = `flowchart ${direction}\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
});
imgSnapshotTest(flowchartCode, { look });
@@ -126,7 +126,7 @@ looks.forEach((look) => {
let flowchartCode = `flowchart ${direction}\n`;
flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
newShapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
flowchartCode += ` n${index}${index}:::customClazz\n`;
});
imgSnapshotTest(flowchartCode, { look });

16
cypress/integration/rendering/oldShapes.spec.ts
View File

@@ -23,7 +23,7 @@ looks.forEach((look) => {
it(`without label`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape} }@\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape} }\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
@@ -31,7 +31,7 @@ looks.forEach((look) => {
it(`with label`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
@@ -39,7 +39,7 @@ looks.forEach((look) => {
it(`connect all shapes with each other`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
});
for (let i = 0; i < shapesSet.length; i++) {
for (let j = i + 1; j < shapesSet.length; j++) {
@@ -52,7 +52,7 @@ looks.forEach((look) => {
it(`with very long label`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }@\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
@@ -60,7 +60,7 @@ looks.forEach((look) => {
it(`with markdown htmlLabels:true`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
@@ -68,7 +68,7 @@ looks.forEach((look) => {
it(`with markdown htmlLabels:false`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
});
imgSnapshotTest(flowchartCode, {
look,
@@ -80,7 +80,7 @@ looks.forEach((look) => {
it(`with styles`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
});
imgSnapshotTest(flowchartCode, { look });
@@ -90,7 +90,7 @@ looks.forEach((look) => {
let flowchartCode = `flowchart ${direction}\n`;
flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
flowchartCode += ` n${index}${index}:::customClazz\n`;
});
imgSnapshotTest(flowchartCode, { look });

66
cypress/platform/knsv2.html
View File

@@ -252,40 +252,40 @@ config:
---
flowchart RL
subgraph " "
A5@{ shape: manual-file, label: "a label"}@
B5@{ shape: manual-input, label: "a label" }@
C5@{ shape: mul-doc, label: "a label" }@
D5@{ shape: mul-proc, label: "a label" }@
E5@{ shape: paper-tape, label: "a label" }@
B3@{ shape: das, label: "a label" }@
C3@{ shape: disk, label: "a label" }@
D4@{ shape: lin-doc, label: "a label" }@
E4@{ shape: loop-limit, label: "a label" }@
A5@{ shape: manual-file, label: "a label"}
B5@{ shape: manual-input, label: "a label" }
C5@{ shape: mul-doc, label: "a label" }
D5@{ shape: mul-proc, label: "a label" }
E5@{ shape: paper-tape, label: "a label" }
B3@{ shape: das, label: "a label" }
C3@{ shape: disk, label: "a label" }
D4@{ shape: lin-doc, label: "a label" }
E4@{ shape: loop-limit, label: "a label" }
end
subgraph " "
B6@{ shape: summary, label: "a label" }@
C6@{ shape: tag-we-rect, label: "a label" }@
D6@{ shape: tag-rect, label: "a label" }@
A2@{ shape: fork}@
B2@{ shape: hourglass }@
C2@{ shape: comment, label: "I am a comment" }@
D2@{ shape: bolt }@
D3@{ shape: disp, label: "a label" }@
C4@{ shape: junction, label: "a label" }@
A4@{ shape: extract, label: "a label"}@
B52[a fr]@{ shape: fr }@
B6@{ shape: summary, label: "a label" }
C6@{ shape: tag-we-rect, label: "a label" }
D6@{ shape: tag-rect, label: "a label" }
A2@{ shape: fork}
B2@{ shape: hourglass }
C2@{ shape: comment, label: "I am a comment" }
D2@{ shape: bolt }
D3@{ shape: disp, label: "a label" }
C4@{ shape: junction, label: "a label" }
A4@{ shape: extract, label: "a label"}
B52[a fr]@{ shape: fr }
end
subgraph " "
A1@{ shape: text, label: This is a textblock}@
B1@{ shape: card, label: "a label" }@
C1@{ shape: lined-proc, label: "a label" }@
D1@{ shape: start, label: "a label" }@
E1@{ shape: stop, label: "a label" }@
E2@{ shape: doc, label: "a label" }@
A6@{ shape: stored-data, label: "a label"}@
A3@{ shape: delay, label: "a label" }@
E3@{ shape: div-proc, label: "a label" }@
B4[a label]@{ shape: win-pane }@
A1@{ shape: text, label: This is a textblock}
B1@{ shape: card, label: "a label" }
C1@{ shape: lined-proc, label: "a label" }
D1@{ shape: start, label: "a label" }
E1@{ shape: stop, label: "a label" }
E2@{ shape: doc, label: "a label" }
A6@{ shape: stored-data, label: "a label"}
A3@{ shape: delay, label: "a label" }
E3@{ shape: div-proc, label: "a label" }
B4[a label]@{ shape: win-pane }
end
</pre>
<pre id="diagram" class="mermaid2">
@@ -422,8 +422,10 @@ flowchart LR
</pre>
<pre id="diagram4" class="mermaid">
flowchart
D@{ shape: circle, label: "circle" } & E
flowchart TB
A@{
label: "aksljhf kasjdh"
}
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';

16
cypress/platform/saurabh.html
View File

@@ -63,8 +63,8 @@
<body style="display: flex; gap: 2rem; flex-direction: row">
<pre id="diagram4" class="mermaid">
flowchart TD
B2@{ icon: "fa:bell", form: "square", label: "B2 agsyua duadu", pos: "t", h: 80 }@
B2@{ icon: "fa:bell", form: "square", pos: "t", h: 80 }
W --> B2
X --> B2
@@ -76,7 +76,7 @@
</pre>
<pre id="diagram4" class="mermaid2">
flowchart TB
A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }@
A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
B2 --test--> C
D --> B2 --> E
style B2 fill:#f9f,stroke:#333,stroke-width:4px
@@ -84,31 +84,31 @@
>
<pre id="diagram43" class="mermaid2">
flowchart BT
A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }@
A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
B2 --test--> C
D --> B2 --> E
</pre
>
<pre id="diagram4" class="mermaid2">
flowchart BT
A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }@
A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
B2 --test--> C
</pre
>
<pre id="diagram43" class="mermaid2">
flowchart BT
A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }@
A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
B2 --test--> C
</pre
>
<pre id="diagram6" class="mermaid2">
flowchart TB
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 }@ --> C
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
</pre
>
<pre id="diagram6" class="mermaid2">
flowchart TB
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 }@ --> C
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
D --> B2 --> E
</pre
>