4.4 KB108 lines
Blame
1import { imgSnapshotTest } from '../../helpers/util';
2
3const looks = ['classic', 'handDrawn'] as const;
4const directions = [
5 'TB',
6 //'BT',
7 'LR',
8 //'RL'
9] as const;
10
11const shapesSet1 = ['text', 'card', 'lin-rect', 'diamond', 'hexagon'] as const;
12
13// removing labelRect, need have alias for it
14const shapesSet2 = ['rounded', 'rect', 'start', 'stop'] as const;
15
16const shapesSet3 = ['fork', 'choice', 'note', 'stadium', 'odd'] as const;
17
18const shapesSet4 = ['subroutine', 'cylinder', 'circle', 'doublecircle', 'odd'] as const;
19
20const shapesSet5 = ['anchor', 'lean-r', 'lean-l', 'trap-t', 'trap-b'] as const;
21
22// Aggregate all shape sets into a single array
23const shapesSets = [shapesSet1, shapesSet2, shapesSet3, shapesSet4, shapesSet5] as const;
24
25looks.forEach((look) => {
26 directions.forEach((direction) => {
27 shapesSets.forEach((shapesSet) => {
28 describe(`Test ${shapesSet.join(', ')} in ${look} look and dir ${direction}`, () => {
29 it(`without label`, () => {
30 let flowchartCode = `flowchart ${direction}\n`;
31 shapesSet.forEach((newShape, index) => {
32 flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape} }\n`;
33 });
34 imgSnapshotTest(flowchartCode, { look });
35 });
36
37 it(`with label`, () => {
38 let flowchartCode = `flowchart ${direction}\n`;
39 shapesSet.forEach((newShape, index) => {
40 flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
41 });
42 imgSnapshotTest(flowchartCode, { look });
43 });
44
45 it(`connect all shapes with each other`, () => {
46 let flowchartCode = `flowchart ${direction}\n`;
47 shapesSet.forEach((newShape, index) => {
48 flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
49 });
50 for (let i = 0; i < shapesSet.length; i++) {
51 for (let j = i + 1; j < shapesSet.length; j++) {
52 flowchartCode += ` n${i}${i} --> n${j}${j}\n`;
53 }
54 }
55 imgSnapshotTest(flowchartCode, { look });
56 });
57
58 it(`with very long label`, () => {
59 let flowchartCode = `flowchart ${direction}\n`;
60 shapesSet.forEach((newShape, index) => {
61 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`;
62 });
63 imgSnapshotTest(flowchartCode, { look });
64 });
65
66 it(`with markdown htmlLabels:true`, () => {
67 let flowchartCode = `flowchart ${direction}\n`;
68 shapesSet.forEach((newShape, index) => {
69 flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
70 });
71 imgSnapshotTest(flowchartCode, { look });
72 });
73
74 it(`with markdown htmlLabels:false`, () => {
75 let flowchartCode = `flowchart ${direction}\n`;
76 shapesSet.forEach((newShape, index) => {
77 flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
78 });
79 imgSnapshotTest(flowchartCode, {
80 look,
81 htmlLabels: false,
82 flowchart: { htmlLabels: false },
83 });
84 });
85
86 it(`with styles`, () => {
87 let flowchartCode = `flowchart ${direction}\n`;
88 shapesSet.forEach((newShape, index) => {
89 flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
90 flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
91 });
92 imgSnapshotTest(flowchartCode, { look });
93 });
94
95 it(`with classDef`, () => {
96 let flowchartCode = `flowchart ${direction}\n`;
97 flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
98 shapesSet.forEach((newShape, index) => {
99 flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
100 flowchartCode += ` n${index}${index}:::customClazz\n`;
101 });
102 imgSnapshotTest(flowchartCode, { look });
103 });
104 });
105 });
106 });
107});
108