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