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