5.0 KB147 lines
Blame
1import { imgSnapshotTest } from '../../helpers/util.ts';
2
3const looks = ['classic', 'handDrawn'] as const;
4const directions = [
5 'TB',
6 //'BT',
7 'LR',
8 //'RL'
9] as const;
10const newShapesSet1 = [
11 'triangle',
12 'sloped-rectangle',
13 'horizontal-cylinder',
14 'flipped-triangle',
15 'hourglass',
16] as const;
17const newShapesSet2 = [
18 'tagged-rectangle',
19 'documents',
20 'lightning-bolt',
21 'filled-circle',
22 'window-pane',
23] as const;
24
25const newShapesSet3 = [
26 'curved-trapezoid',
27 'bow-rect',
28 'tagged-document',
29 'divided-rectangle',
30 'crossed-circle',
31] as const;
32
33const newShapesSet4 = [
34 'document',
35 'notched-pentagon',
36 'lined-cylinder',
37 'stacked-document',
38 'half-rounded-rectangle',
39] as const;
40
41const newShapesSet5 = [
42 'lined-document',
43 'tagged-document',
44 'brace-l',
45 'comment',
46 'braces',
47 'brace-r',
48] as const;
49
50const newShapesSet6 = ['brace-r', 'braces'] as const;
51// Aggregate all shape sets into a single array
52const newShapesSets = [
53 newShapesSet1,
54 newShapesSet2,
55 newShapesSet3,
56 newShapesSet4,
57 newShapesSet5,
58 newShapesSet6,
59];
60
61looks.forEach((look) => {
62 directions.forEach((direction) => {
63 newShapesSets.forEach((newShapesSet) => {
64 describe(`Test ${newShapesSet.join(', ')} in ${look} look and dir ${direction}`, () => {
65 it(`without label`, () => {
66 let flowchartCode = `flowchart ${direction}\n`;
67 newShapesSet.forEach((newShape, index) => {
68 flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape} }\n`;
69 });
70 imgSnapshotTest(flowchartCode, { look });
71 });
72
73 it(`with label`, () => {
74 let flowchartCode = `flowchart ${direction}\n`;
75 newShapesSet.forEach((newShape, index) => {
76 flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
77 });
78 imgSnapshotTest(flowchartCode, { look });
79 });
80
81 it(`connect all shapes with each other`, () => {
82 let flowchartCode = `flowchart ${direction}\n`;
83 newShapesSet.forEach((newShape, index) => {
84 flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
85 });
86 for (let i = 0; i < newShapesSet.length; i++) {
87 for (let j = i + 1; j < newShapesSet.length; j++) {
88 flowchartCode += ` n${i}${i} --> n${j}${j}\n`;
89 }
90 }
91 if (!(direction === 'TB' && look === 'handDrawn' && newShapesSet === newShapesSet1)) {
92 //skip this test, works in real. Need to look
93 imgSnapshotTest(flowchartCode, { look });
94 }
95 });
96
97 it(`with very long label`, () => {
98 let flowchartCode = `flowchart ${direction}\n`;
99 newShapesSet.forEach((newShape, index) => {
100 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`;
101 });
102 imgSnapshotTest(flowchartCode, { look });
103 });
104
105 it(`with markdown htmlLabels:true`, () => {
106 let flowchartCode = `flowchart ${direction}\n`;
107 newShapesSet.forEach((newShape, index) => {
108 flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
109 });
110 imgSnapshotTest(flowchartCode, { look });
111 });
112
113 it(`with markdown htmlLabels:false`, () => {
114 let flowchartCode = `flowchart ${direction}\n`;
115 newShapesSet.forEach((newShape, index) => {
116 flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
117 });
118 imgSnapshotTest(flowchartCode, {
119 look,
120 htmlLabels: false,
121 flowchart: { htmlLabels: false },
122 });
123 });
124
125 it(`with styles`, () => {
126 let flowchartCode = `flowchart ${direction}\n`;
127 newShapesSet.forEach((newShape, index) => {
128 flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
129 flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
130 });
131 imgSnapshotTest(flowchartCode, { look });
132 });
133
134 it(`with classDef`, () => {
135 let flowchartCode = `flowchart ${direction}\n`;
136 flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
137 newShapesSet.forEach((newShape, index) => {
138 flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
139 flowchartCode += ` n${index}${index}:::customClazz\n`;
140 });
141 imgSnapshotTest(flowchartCode, { look });
142 });
143 });
144 });
145 });
146});
147