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