5.2 KB144 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;
10const forms = [undefined, 'square', 'circle', 'rounded'] as const;
11const labelPos = [undefined, 't', 'b'] as const;
12
13looks.forEach((look) => {
14 directions.forEach((direction) => {
15 forms.forEach((form) => {
16 labelPos.forEach((pos) => {
17 describe(`Test iconShape in ${form ? `${form} form,` : ''} ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => {
18 it(`without label`, () => {
19 let flowchartCode = `flowchart ${direction}\n`;
20 flowchartCode += ` nA --> nAA@{ icon: 'fa:bell'`;
21 if (form) {
22 flowchartCode += `, form: '${form}'`;
23 }
24 flowchartCode += ` }\n`;
25 imgSnapshotTest(flowchartCode, { look });
26 });
27
28 it(`with label`, () => {
29 let flowchartCode = `flowchart ${direction}\n`;
30 flowchartCode += ` nA --> nAA@{ icon: 'fa:bell', label: 'This is a label for icon shape'`;
31 if (form) {
32 flowchartCode += `, form: '${form}'`;
33 }
34 if (pos) {
35 flowchartCode += `, pos: '${pos}'`;
36 }
37 flowchartCode += ` }\n`;
38 imgSnapshotTest(flowchartCode, { look });
39 });
40
41 it(`with very long label`, () => {
42 let flowchartCode = `flowchart ${direction}\n`;
43 flowchartCode += ` nA --> nAA@{ icon: 'fa:bell', label: 'This is a very very very very very long long long label for icon shape'`;
44 if (form) {
45 flowchartCode += `, form: '${form}'`;
46 }
47 if (pos) {
48 flowchartCode += `, pos: '${pos}'`;
49 }
50 flowchartCode += ` }\n`;
51 imgSnapshotTest(flowchartCode, { look });
52 });
53
54 it(`with markdown htmlLabels:true`, () => {
55 let flowchartCode = `flowchart ${direction}\n`;
56 flowchartCode += ` nA --> nAA@{ icon: 'fa:bell', label: 'This is **bold** </br>and <strong>strong</strong> for icon shape'`;
57 if (form) {
58 flowchartCode += `, form: '${form}'`;
59 }
60 if (pos) {
61 flowchartCode += `, pos: '${pos}'`;
62 }
63 flowchartCode += ` }\n`;
64 imgSnapshotTest(flowchartCode, { look });
65 });
66
67 it(`with markdown htmlLabels:false`, () => {
68 let flowchartCode = `flowchart ${direction}\n`;
69 flowchartCode += ` nA --> nAA@{ icon: 'fa:bell', label: 'This is **bold** </br>and <strong>strong</strong> for icon shape'`;
70 if (form) {
71 flowchartCode += `, form: '${form}'`;
72 }
73 if (pos) {
74 flowchartCode += `, pos: '${pos}'`;
75 }
76 flowchartCode += ` }\n`;
77 imgSnapshotTest(flowchartCode, {
78 look,
79 htmlLabels: false,
80 flowchart: { htmlLabels: false },
81 });
82 });
83
84 it(`with styles`, () => {
85 let flowchartCode = `flowchart ${direction}\n`;
86 flowchartCode += ` nA --> nAA@{ icon: 'fa:bell', label: 'new icon shape'`;
87 if (form) {
88 flowchartCode += `, form: '${form}'`;
89 }
90 if (pos) {
91 flowchartCode += `, pos: '${pos}'`;
92 }
93 flowchartCode += ` }\n`;
94 flowchartCode += ` style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`;
95 imgSnapshotTest(flowchartCode, { look });
96 });
97
98 it(`with classDef`, () => {
99 let flowchartCode = `flowchart ${direction}\n`;
100 flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
101 flowchartCode += ` nA --> nAA@{ icon: 'fa:bell', label: 'new icon shape'`;
102 if (form) {
103 flowchartCode += `, form: '${form}'`;
104 }
105 if (pos) {
106 flowchartCode += `, pos: '${pos}'`;
107 }
108 flowchartCode += ` }\n`;
109 flowchartCode += ` nAA:::customClazz\n`;
110 imgSnapshotTest(flowchartCode, { look });
111 });
112 });
113 });
114 });
115 });
116});
117
118describe('Test iconShape with different h', () => {
119 it('with different h', () => {
120 let flowchartCode = `flowchart TB\n`;
121 const icon = 'fa:bell';
122 const iconHeight = 64;
123 flowchartCode += ` nA --> nAA@{ icon: '${icon}', label: 'icon with different h', h: ${iconHeight} }\n`;
124 imgSnapshotTest(flowchartCode);
125 });
126});
127
128describe('Test colored iconShape', () => {
129 it('with no styles', () => {
130 let flowchartCode = `flowchart TB\n`;
131 const icon = 'fluent-emoji:tropical-fish';
132 flowchartCode += ` nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`;
133 imgSnapshotTest(flowchartCode);
134 });
135
136 it('with styles', () => {
137 let flowchartCode = `flowchart TB\n`;
138 const icon = 'fluent-emoji:tropical-fish';
139 flowchartCode += ` nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`;
140 flowchartCode += ` style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`;
141 imgSnapshotTest(flowchartCode);
142 });
143});
144