4.1 KB104 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 labelPos = [undefined, 't', 'b'] as const;
11
12looks.forEach((look) => {
13 directions.forEach((direction) => {
14 labelPos.forEach((pos) => {
15 describe(`Test imageShape in ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => {
16 it(`without label`, () => {
17 let flowchartCode = `flowchart ${direction}\n`;
18 flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }\n`;
19 imgSnapshotTest(flowchartCode, { look });
20 });
21
22 it(`with label`, () => {
23 let flowchartCode = `flowchart ${direction}\n`;
24 flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'This is a label for image shape'`;
25
26 flowchartCode += `, w: '100', h: '200'`;
27 if (pos) {
28 flowchartCode += `, pos: '${pos}'`;
29 }
30 flowchartCode += ` }\n`;
31 imgSnapshotTest(flowchartCode, { look });
32 });
33
34 it(`with very long label`, () => {
35 let flowchartCode = `flowchart ${direction}\n`;
36 flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'This is a very very very very very long long long label for image shape'`;
37
38 flowchartCode += `, w: '100', h: '250'`;
39 if (pos) {
40 flowchartCode += `, pos: '${pos}'`;
41 }
42 flowchartCode += ` }\n`;
43 imgSnapshotTest(flowchartCode, { look });
44 });
45
46 it(`with markdown htmlLabels:true`, () => {
47 let flowchartCode = `flowchart ${direction}\n`;
48 flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'This is **bold** </br>and <strong>strong</strong> for image shape'`;
49
50 flowchartCode += `, w: '550', h: '200'`;
51 if (pos) {
52 flowchartCode += `, pos: '${pos}'`;
53 }
54 flowchartCode += ` }\n`;
55 imgSnapshotTest(flowchartCode, { look, htmlLabels: true });
56 });
57
58 it(`with markdown htmlLabels:false`, () => {
59 let flowchartCode = `flowchart ${direction}\n`;
60 flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'This is **bold** </br>and <strong>strong</strong> for image shape'`;
61 flowchartCode += `, w: '250', h: '200'`;
62
63 if (pos) {
64 flowchartCode += `, pos: '${pos}'`;
65 }
66 flowchartCode += ` }\n`;
67 imgSnapshotTest(flowchartCode, {
68 look,
69 htmlLabels: false,
70 flowchart: { htmlLabels: false },
71 });
72 });
73
74 it(`with styles`, () => {
75 let flowchartCode = `flowchart ${direction}\n`;
76 flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'new image shape'`;
77 flowchartCode += `, w: '550', h: '200'`;
78
79 if (pos) {
80 flowchartCode += `, pos: '${pos}'`;
81 }
82 flowchartCode += ` }\n`;
83 flowchartCode += ` style A fill:#f9f,stroke:#333,stroke-width:4px \n`;
84 imgSnapshotTest(flowchartCode, { look });
85 });
86
87 it(`with classDef`, () => {
88 let flowchartCode = `flowchart ${direction}\n`;
89 flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#000000,stroke-dasharray: 5 5\n`;
90 flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'new image shape'`;
91
92 flowchartCode += `, w: '500', h: '550'`;
93 if (pos) {
94 flowchartCode += `, pos: '${pos}'`;
95 }
96 flowchartCode += ` }\n`;
97 flowchartCode += ` A:::customClazz\n`;
98 imgSnapshotTest(flowchartCode, { look });
99 });
100 });
101 });
102 });
103});
104