| 6dd74de | | | 1 | import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; |
| 6dd74de | | | 2 | |
| 6dd74de | | | 3 | describe('Flowchart HandDrawn', () => { |
| 6dd74de | | | 4 | it('FHD1: should render a simple flowchart no htmlLabels', () => { |
| 6dd74de | | | 5 | imgSnapshotTest( |
| 6dd74de | | | 6 | `graph TD |
| 6dd74de | | | 7 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 8 | B --> C{Let me think} |
| 6dd74de | | | 9 | C -->|One| D[Laptop] |
| 6dd74de | | | 10 | C -->|Two| E[iPhone] |
| 6dd74de | | | 11 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 12 | `, |
| 6dd74de | | | 13 | { |
| 6dd74de | | | 14 | look: 'handDrawn', |
| 6dd74de | | | 15 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 16 | fontFamily: 'courier', |
| 6dd74de | | | 17 | } |
| 6dd74de | | | 18 | ); |
| 6dd74de | | | 19 | }); |
| 6dd74de | | | 20 | |
| 6dd74de | | | 21 | it('FHD2: should render a simple flowchart with htmlLabels', () => { |
| 6dd74de | | | 22 | imgSnapshotTest( |
| 6dd74de | | | 23 | `graph TD |
| 6dd74de | | | 24 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 25 | B --> C{Let me think} |
| 6dd74de | | | 26 | C -->|One| D[Laptop] |
| 6dd74de | | | 27 | C -->|Two| E[iPhone] |
| 6dd74de | | | 28 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 29 | `, |
| 6dd74de | | | 30 | { |
| 6dd74de | | | 31 | look: 'handDrawn', |
| 6dd74de | | | 32 | flowchart: { htmlLabels: true }, |
| 6dd74de | | | 33 | fontFamily: 'courier', |
| 6dd74de | | | 34 | } |
| 6dd74de | | | 35 | ); |
| 6dd74de | | | 36 | }); |
| 6dd74de | | | 37 | |
| 6dd74de | | | 38 | it('FHD3: should render a simple flowchart with line breaks', () => { |
| 6dd74de | | | 39 | imgSnapshotTest( |
| 6dd74de | | | 40 | ` |
| 6dd74de | | | 41 | graph TD |
| 6dd74de | | | 42 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 43 | B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss} |
| 6dd74de | | | 44 | C -->|One| D[Laptop] |
| 6dd74de | | | 45 | C -->|Two| E[iPhone] |
| 6dd74de | | | 46 | C -->|Three| F[Car] |
| 6dd74de | | | 47 | `, |
| 6dd74de | | | 48 | { look: 'handDrawn', fontFamily: 'courier' } |
| 6dd74de | | | 49 | ); |
| 6dd74de | | | 50 | }); |
| 6dd74de | | | 51 | |
| 6dd74de | | | 52 | it('FHD4: should render a simple flowchart with trapezoid and inverse trapezoid vertex options.', () => { |
| 6dd74de | | | 53 | imgSnapshotTest( |
| 6dd74de | | | 54 | ` |
| 6dd74de | | | 55 | graph TD |
| 6dd74de | | | 56 | A[/Christmas\\] |
| 6dd74de | | | 57 | A -->|Get money| B[\\Go shopping/] |
| 6dd74de | | | 58 | B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss} |
| 6dd74de | | | 59 | C -->|One| D[/Laptop/] |
| 6dd74de | | | 60 | C -->|Two| E[\\iPhone\\] |
| 6dd74de | | | 61 | C -->|Three| F[Car] |
| 6dd74de | | | 62 | `, |
| 6dd74de | | | 63 | { look: 'handDrawn', fontFamily: 'courier' } |
| 6dd74de | | | 64 | ); |
| 6dd74de | | | 65 | }); |
| 6dd74de | | | 66 | |
| 6dd74de | | | 67 | it('FHD5: should style nodes via a class.', () => { |
| 6dd74de | | | 68 | imgSnapshotTest( |
| 6dd74de | | | 69 | ` |
| 6dd74de | | | 70 | graph TD |
| 6dd74de | | | 71 | 1A --> 1B |
| 6dd74de | | | 72 | 1B --> 1C |
| 6dd74de | | | 73 | 1C --> D |
| 6dd74de | | | 74 | 1C --> E |
| 6dd74de | | | 75 | |
| 6dd74de | | | 76 | classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f |
| 6dd74de | | | 77 | class 1A,1B,D,E processHead |
| 6dd74de | | | 78 | `, |
| 6dd74de | | | 79 | { look: 'handDrawn', fontFamily: 'courier' } |
| 6dd74de | | | 80 | ); |
| 6dd74de | | | 81 | }); |
| 6dd74de | | | 82 | |
| 6dd74de | | | 83 | it('FHD6: should render a flowchart full of circles', () => { |
| 6dd74de | | | 84 | imgSnapshotTest( |
| 6dd74de | | | 85 | ` |
| 6dd74de | | | 86 | graph LR |
| 6dd74de | | | 87 | 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget) |
| 6dd74de | | | 88 | 37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget) |
| 6dd74de | | | 89 | 35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary) |
| 6dd74de | | | 90 | 41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary) |
| 6dd74de | | | 91 | 44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary) |
| 6dd74de | | | 92 | 46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary) |
| 6dd74de | | | 93 | 40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary) |
| 6dd74de | | | 94 | 38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary) |
| 6dd74de | | | 95 | 43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary) |
| 6dd74de | | | 96 | 42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary) |
| 6dd74de | | | 97 | 45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity) |
| 6dd74de | | | 98 | 35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity) |
| 6dd74de | | | 99 | 41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity) |
| 6dd74de | | | 100 | 41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers) |
| 6dd74de | | | 101 | 39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays) |
| 6dd74de | | | 102 | 39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays) |
| 6dd74de | | | 103 | 39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost) |
| 6dd74de | | | 104 | 39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits) |
| 6dd74de | | | 105 | 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails) |
| 6dd74de | | | 106 | 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails) |
| 6dd74de | | | 107 | `, |
| 6dd74de | | | 108 | { look: 'handDrawn', fontFamily: 'courier' } |
| 6dd74de | | | 109 | ); |
| 6dd74de | | | 110 | }); |
| 6dd74de | | | 111 | |
| 6dd74de | | | 112 | it('FHD7: should render a flowchart full of icons', () => { |
| 6dd74de | | | 113 | imgSnapshotTest( |
| 6dd74de | | | 114 | ` |
| 6dd74de | | | 115 | graph TD |
| 6dd74de | | | 116 | 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment") |
| 6dd74de | | | 117 | 82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1") |
| 6dd74de | | | 118 | db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2") |
| 6dd74de | | | 119 | 4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1") |
| 6dd74de | | | 120 | 30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2") |
| 6dd74de | | | 121 | 5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1") |
| 6dd74de | | | 122 | c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2") |
| 6dd74de | | | 123 | b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\\SharedDbInstance].[SupportDb]") |
| 6dd74de | | | 124 | 8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\\SharedDbInstance].[DevelopmentDb]") |
| 6dd74de | | | 125 | 0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\\SharedDbInstance].[TestDb]") |
| 6dd74de | | | 126 | 07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\\SharedDbInstance].[SharedReportingDb]") |
| 6dd74de | | | 127 | c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server") |
| 6dd74de | | | 128 | ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server") |
| 6dd74de | | | 129 | 68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server") |
| 6dd74de | | | 130 | f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\\SharedDbInstance]") |
| 6dd74de | | | 131 | d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer") |
| 6dd74de | | | 132 | 71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\\:MSSQLSERVER") |
| 6dd74de | | | 133 | c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\\:SQLAgent") |
| 6dd74de | | | 134 | 9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\\:SQLBrowser") |
| 6dd74de | | | 135 | 1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1") |
| 6dd74de | | | 136 | 200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2") |
| 6dd74de | | | 137 | 1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3") |
| 6dd74de | | | 138 | 9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 139 | 9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 140 | 9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 141 | 9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 142 | 9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 143 | 9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 144 | 82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 145 | 82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 146 | 82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 147 | 82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 148 | db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 149 | db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 150 | 4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 151 | 4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 152 | 4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 153 | 4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 154 | 4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 155 | 30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 156 | 30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 157 | 5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 158 | 5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 159 | c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 160 | c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 161 | b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 162 | 8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 163 | 0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 164 | 07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 165 | c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 166 | ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 167 | 68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 168 | f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 169 | f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 170 | f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 171 | f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 172 | d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 173 | 71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 174 | c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 175 | c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 176 | 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 177 | 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 |
| 6dd74de | | | 178 | `, |
| 6dd74de | | | 179 | { look: 'handDrawn', fontFamily: 'courier' } |
| 6dd74de | | | 180 | ); |
| 6dd74de | | | 181 | }); |
| 6dd74de | | | 182 | |
| 6dd74de | | | 183 | it('FHD8: should render labels with numbers at the start', () => { |
| 6dd74de | | | 184 | imgSnapshotTest( |
| 6dd74de | | | 185 | ` |
| 6dd74de | | | 186 | graph TB;subgraph "number as labels";1;end; |
| 6dd74de | | | 187 | `, |
| 6dd74de | | | 188 | { look: 'handDrawn', fontFamily: 'courier' } |
| 6dd74de | | | 189 | ); |
| 6dd74de | | | 190 | }); |
| 6dd74de | | | 191 | |
| 6dd74de | | | 192 | it('FHD9: should render subgraphs', () => { |
| 6dd74de | | | 193 | imgSnapshotTest( |
| 6dd74de | | | 194 | ` |
| 6dd74de | | | 195 | graph TB |
| 6dd74de | | | 196 | subgraph One |
| 6dd74de | | | 197 | a1-->a2 |
| 6dd74de | | | 198 | end |
| 6dd74de | | | 199 | `, |
| 6dd74de | | | 200 | { look: 'handDrawn', fontFamily: 'courier' } |
| 6dd74de | | | 201 | ); |
| 6dd74de | | | 202 | }); |
| 6dd74de | | | 203 | |
| 6dd74de | | | 204 | it('FHD10: should render subgraphs with a title starting with a digit', () => { |
| 6dd74de | | | 205 | imgSnapshotTest( |
| 6dd74de | | | 206 | ` |
| 6dd74de | | | 207 | graph TB |
| 6dd74de | | | 208 | subgraph 2Two |
| 6dd74de | | | 209 | a1-->a2 |
| 6dd74de | | | 210 | end |
| 6dd74de | | | 211 | `, |
| 6dd74de | | | 212 | { look: 'handDrawn', fontFamily: 'courier' } |
| 6dd74de | | | 213 | ); |
| 6dd74de | | | 214 | }); |
| 6dd74de | | | 215 | |
| 6dd74de | | | 216 | it('FHD11: should render styled subgraphs', () => { |
| 6dd74de | | | 217 | imgSnapshotTest( |
| 6dd74de | | | 218 | ` |
| 6dd74de | | | 219 | graph TB |
| 6dd74de | | | 220 | A |
| 6dd74de | | | 221 | B |
| 6dd74de | | | 222 | subgraph foo[Foo SubGraph] |
| 6dd74de | | | 223 | C |
| 6dd74de | | | 224 | D |
| 6dd74de | | | 225 | end |
| 6dd74de | | | 226 | subgraph bar[Bar SubGraph] |
| 6dd74de | | | 227 | E |
| 6dd74de | | | 228 | F |
| 6dd74de | | | 229 | end |
| 6dd74de | | | 230 | G |
| 6dd74de | | | 231 | |
| 6dd74de | | | 232 | A-->B |
| 6dd74de | | | 233 | B-->C |
| 6dd74de | | | 234 | C-->D |
| 6dd74de | | | 235 | B-->D |
| 6dd74de | | | 236 | D-->E |
| 6dd74de | | | 237 | E-->A |
| 6dd74de | | | 238 | E-->F |
| 6dd74de | | | 239 | F-->D |
| 6dd74de | | | 240 | F-->G |
| 6dd74de | | | 241 | B-->G |
| 6dd74de | | | 242 | G-->D |
| 6dd74de | | | 243 | |
| 6dd74de | | | 244 | style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred |
| 6dd74de | | | 245 | style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue |
| 6dd74de | | | 246 | `, |
| 6dd74de | | | 247 | { look: 'handDrawn', fontFamily: 'courier' } |
| 6dd74de | | | 248 | ); |
| 6dd74de | | | 249 | }); |
| 6dd74de | | | 250 | |
| 6dd74de | | | 251 | it('FHD12: should render a flowchart with long names and class definitions', () => { |
| 6dd74de | | | 252 | imgSnapshotTest( |
| 6dd74de | | | 253 | `graph LR |
| 6dd74de | | | 254 | sid-B3655226-6C29-4D00-B685-3D5C734DC7E1[" |
| 6dd74de | | | 255 | |
| 6dd74de | | | 256 | 提交申请 |
| 6dd74de | | | 257 | 熊大 |
| 6dd74de | | | 258 | "]; |
| 6dd74de | | | 259 | class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed; |
| 6dd74de | | | 260 | sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A[" |
| 6dd74de | | | 261 | 负责人审批 |
| 6dd74de | | | 262 | 强子 |
| 6dd74de | | | 263 | "]; |
| 6dd74de | | | 264 | class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed; |
| 6dd74de | | | 265 | sid-E27C0367-E6D6-497F-9736-3CDC21FDE221[" |
| 6dd74de | | | 266 | DBA审批 |
| 6dd74de | | | 267 | 强子 |
| 6dd74de | | | 268 | "]; |
| 6dd74de | | | 269 | class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed; |
| 6dd74de | | | 270 | sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD[" |
| 6dd74de | | | 271 | SA审批 |
| 6dd74de | | | 272 | 阿美 |
| 6dd74de | | | 273 | "]; |
| 6dd74de | | | 274 | class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed; |
| 6dd74de | | | 275 | sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7[" |
| 6dd74de | | | 276 | 主管审批 |
| 6dd74de | | | 277 | 光头强 |
| 6dd74de | | | 278 | "]; |
| 6dd74de | | | 279 | class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed; |
| 6dd74de | | | 280 | sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89[" |
| 6dd74de | | | 281 | DBA确认 |
| 6dd74de | | | 282 | 强子 |
| 6dd74de | | | 283 | "]; |
| 6dd74de | | | 284 | class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed; |
| 6dd74de | | | 285 | sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937[" |
| 6dd74de | | | 286 | SA确认 |
| 6dd74de | | | 287 | 阿美 |
| 6dd74de | | | 288 | "]; |
| 6dd74de | | | 289 | class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed; |
| 6dd74de | | | 290 | sid-4FC27B48-A6F9-460A-A675-021F5854FE22[" |
| 6dd74de | | | 291 | 结束 |
| 6dd74de | | | 292 | "]; |
| 6dd74de | | | 293 | class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed; |
| 6dd74de | | | 294 | sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E[" |
| 6dd74de | | | 295 | SA执行1 |
| 6dd74de | | | 296 | 强子 |
| 6dd74de | | | 297 | "]; |
| 6dd74de | | | 298 | class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed; |
| 6dd74de | | | 299 | sid-6C2120F3-D940-4958-A067-0903DCE879C4[" |
| 6dd74de | | | 300 | SA执行2 |
| 6dd74de | | | 301 | 强子 |
| 6dd74de | | | 302 | "]; |
| 6dd74de | | | 303 | class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed; |
| 6dd74de | | | 304 | sid-9180E2A0-5C4B-435F-B42F-0D152470A338[" |
| 6dd74de | | | 305 | DBA执行1 |
| 6dd74de | | | 306 | 强子 |
| 6dd74de | | | 307 | "]; |
| 6dd74de | | | 308 | class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed; |
| 6dd74de | | | 309 | sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD[" |
| 6dd74de | | | 310 | DBA执行3 |
| 6dd74de | | | 311 | 强子 |
| 6dd74de | | | 312 | "]; |
| 6dd74de | | | 313 | class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed; |
| 6dd74de | | | 314 | sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756[" |
| 6dd74de | | | 315 | DBA执行2 |
| 6dd74de | | | 316 | 强子 |
| 6dd74de | | | 317 | "]; |
| 6dd74de | | | 318 | class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed; |
| 6dd74de | | | 319 | sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93[" |
| 6dd74de | | | 320 | DBA执行4 |
| 6dd74de | | | 321 | 强子 |
| 6dd74de | | | 322 | "]; |
| 6dd74de | | | 323 | class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed; |
| 6dd74de | | | 324 | sid-1897B30A-9C5C-4D5B-B80B-76A038785070[" |
| 6dd74de | | | 325 | 负责人确认 |
| 6dd74de | | | 326 | 梁静茹 |
| 6dd74de | | | 327 | "]; |
| 6dd74de | | | 328 | class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed; |
| 6dd74de | | | 329 | sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7; |
| 6dd74de | | | 330 | sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070; |
| 6dd74de | | | 331 | sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89; |
| 6dd74de | | | 332 | sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937; |
| 6dd74de | | | 333 | sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4; |
| 6dd74de | | | 334 | sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756; |
| 6dd74de | | | 335 | sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93; |
| 6dd74de | | | 336 | sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; |
| 6dd74de | | | 337 | sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22; |
| 6dd74de | | | 338 | sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E; |
| 6dd74de | | | 339 | sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338; |
| 6dd74de | | | 340 | sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD; |
| 6dd74de | | | 341 | sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; |
| 6dd74de | | | 342 | sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; |
| 6dd74de | | | 343 | sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD; |
| 6dd74de | | | 344 | sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221; |
| 6dd74de | | | 345 | sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4; |
| 6dd74de | | | 346 | sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; |
| 6dd74de | | | 347 | sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22; |
| 6dd74de | | | 348 | `, |
| 6dd74de | | | 349 | { look: 'handDrawn', fontFamily: 'courier' } |
| 6dd74de | | | 350 | ); |
| 6dd74de | | | 351 | }); |
| 6dd74de | | | 352 | |
| 6dd74de | | | 353 | it('FHD13: should render color of styled nodes', () => { |
| 6dd74de | | | 354 | imgSnapshotTest( |
| 6dd74de | | | 355 | ` |
| 6dd74de | | | 356 | graph LR |
| 6dd74de | | | 357 | foo-->bar |
| 6dd74de | | | 358 | |
| 6dd74de | | | 359 | classDef foo fill:lightblue,color:green,stroke:#FF9E2C,font-weight:bold |
| 6dd74de | | | 360 | style foo fill:#F99,stroke-width:2px,stroke:#F0F |
| 6dd74de | | | 361 | style bar fill:#999,color: #00ff00, stroke-width:10px,stroke:#0F0 |
| 6dd74de | | | 362 | `, |
| 6dd74de | | | 363 | { |
| 6dd74de | | | 364 | look: 'handDrawn', |
| 6dd74de | | | 365 | listUrl: false, |
| 6dd74de | | | 366 | listId: 'color styling', |
| 6dd74de | | | 367 | fontFamily: 'courier', |
| 6dd74de | | | 368 | logLevel: 0, |
| 6dd74de | | | 369 | } |
| 6dd74de | | | 370 | ); |
| 6dd74de | | | 371 | }); |
| 6dd74de | | | 372 | |
| 6dd74de | | | 373 | it('FHD14: should render hexagons', () => { |
| 6dd74de | | | 374 | imgSnapshotTest( |
| 6dd74de | | | 375 | ` |
| 6dd74de | | | 376 | graph TD |
| 6dd74de | | | 377 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 378 | B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}} |
| 6dd74de | | | 379 | C -->|One| D[Laptop] |
| 6dd74de | | | 380 | C -->|Two| E[iPhone] |
| 6dd74de | | | 381 | C -->|Three| F[Car] |
| 6dd74de | | | 382 | click A "index.html#link-clicked" "link test" |
| 6dd74de | | | 383 | click B testClick "click test" |
| 6dd74de | | | 384 | classDef someclass fill:#f96; |
| 6dd74de | | | 385 | class A someclass; |
| 6dd74de | | | 386 | class C someclass; |
| 6dd74de | | | 387 | `, |
| 6dd74de | | | 388 | { |
| 6dd74de | | | 389 | look: 'handDrawn', |
| 6dd74de | | | 390 | listUrl: false, |
| 6dd74de | | | 391 | listId: 'color styling', |
| 6dd74de | | | 392 | fontFamily: 'courier', |
| 6dd74de | | | 393 | logLevel: 0, |
| 6dd74de | | | 394 | } |
| 6dd74de | | | 395 | ); |
| 6dd74de | | | 396 | }); |
| 6dd74de | | | 397 | |
| 6dd74de | | | 398 | it('FHD15: should render a simple flowchart with comments', () => { |
| 6dd74de | | | 399 | imgSnapshotTest( |
| 6dd74de | | | 400 | `graph TD |
| 6dd74de | | | 401 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 402 | B --> C{Let me think} |
| 6dd74de | | | 403 | %% this is a comment |
| 6dd74de | | | 404 | C -->|One| D[Laptop] |
| 6dd74de | | | 405 | C -->|Two| E[iPhone] |
| 6dd74de | | | 406 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 407 | `, |
| 6dd74de | | | 408 | { |
| 6dd74de | | | 409 | look: 'handDrawn', |
| 6dd74de | | | 410 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 411 | fontFamily: 'courier', |
| 6dd74de | | | 412 | } |
| 6dd74de | | | 413 | ); |
| 6dd74de | | | 414 | }); |
| 6dd74de | | | 415 | |
| 6dd74de | | | 416 | it('FHD16: Render Stadium shape', () => { |
| 6dd74de | | | 417 | imgSnapshotTest( |
| 6dd74de | | | 418 | ` graph TD |
| 6dd74de | | | 419 | A([stadium shape test]) |
| 6dd74de | | | 420 | A -->|Get money| B([Go shopping]) |
| 6dd74de | | | 421 | B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]) |
| 6dd74de | | | 422 | C -->|One| D([Laptop]) |
| 6dd74de | | | 423 | C -->|Two| E([iPhone]) |
| 6dd74de | | | 424 | C -->|Three| F([Car<br/>wroom wroom]) |
| 6dd74de | | | 425 | click A "index.html#link-clicked" "link test" |
| 6dd74de | | | 426 | click B testClick "click test" |
| 6dd74de | | | 427 | classDef someclass fill:#f96; |
| 6dd74de | | | 428 | class A someclass; |
| 6dd74de | | | 429 | class C someclass; |
| 6dd74de | | | 430 | `, |
| 6dd74de | | | 431 | { |
| 6dd74de | | | 432 | look: 'handDrawn', |
| 6dd74de | | | 433 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 434 | fontFamily: 'courier', |
| 6dd74de | | | 435 | } |
| 6dd74de | | | 436 | ); |
| 6dd74de | | | 437 | }); |
| 6dd74de | | | 438 | |
| 6dd74de | | | 439 | it('FHD17: Render multiline texts', () => { |
| 6dd74de | | | 440 | imgSnapshotTest( |
| 6dd74de | | | 441 | `graph LR |
| 6dd74de | | | 442 | A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line) |
| 6dd74de | | | 443 | C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line) |
| 6dd74de | | | 444 | E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line) |
| 6dd74de | | | 445 | A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line) |
| 6dd74de | | | 446 | C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line) |
| 6dd74de | | | 447 | E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line) |
| 6dd74de | | | 448 | linkStyle 0 stroke:DarkGray,stroke-width:2px |
| 6dd74de | | | 449 | linkStyle 1 stroke:DarkGray,stroke-width:2px |
| 6dd74de | | | 450 | linkStyle 2 stroke:DarkGray,stroke-width:2px |
| 6dd74de | | | 451 | `, |
| 6dd74de | | | 452 | { |
| 6dd74de | | | 453 | look: 'handDrawn', |
| 6dd74de | | | 454 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 455 | fontFamily: 'courier', |
| 6dd74de | | | 456 | } |
| 6dd74de | | | 457 | ); |
| 6dd74de | | | 458 | }); |
| 6dd74de | | | 459 | |
| 6dd74de | | | 460 | it('FHD18: Chaining of nodes', () => { |
| 6dd74de | | | 461 | imgSnapshotTest( |
| 6dd74de | | | 462 | `graph LR |
| 6dd74de | | | 463 | a --> b --> c |
| 6dd74de | | | 464 | `, |
| 6dd74de | | | 465 | { |
| 6dd74de | | | 466 | look: 'handDrawn', |
| 6dd74de | | | 467 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 468 | fontFamily: 'courier', |
| 6dd74de | | | 469 | } |
| 6dd74de | | | 470 | ); |
| 6dd74de | | | 471 | }); |
| 6dd74de | | | 472 | |
| 6dd74de | | | 473 | it('FHD19: Multiple nodes and chaining in one statement', () => { |
| 6dd74de | | | 474 | imgSnapshotTest( |
| 6dd74de | | | 475 | `graph LR |
| 6dd74de | | | 476 | a --> b & c--> d |
| 6dd74de | | | 477 | `, |
| 6dd74de | | | 478 | { |
| 6dd74de | | | 479 | look: 'handDrawn', |
| 6dd74de | | | 480 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 481 | fontFamily: 'courier', |
| 6dd74de | | | 482 | } |
| 6dd74de | | | 483 | ); |
| 6dd74de | | | 484 | }); |
| 6dd74de | | | 485 | |
| 6dd74de | | | 486 | it('FHD20: Multiple nodes and chaining in one statement', () => { |
| 6dd74de | | | 487 | imgSnapshotTest( |
| 6dd74de | | | 488 | `graph TD |
| 6dd74de | | | 489 | A[ h ] -- hello --> B[" test "]:::exClass & C --> D; |
| 6dd74de | | | 490 | classDef exClass background:#bbb,border:1px solid red; |
| 6dd74de | | | 491 | `, |
| 6dd74de | | | 492 | { |
| 6dd74de | | | 493 | look: 'handDrawn', |
| 6dd74de | | | 494 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 495 | fontFamily: 'courier', |
| 6dd74de | | | 496 | } |
| 6dd74de | | | 497 | ); |
| 6dd74de | | | 498 | }); |
| 6dd74de | | | 499 | |
| 6dd74de | | | 500 | it('FDH21: Render cylindrical shape', () => { |
| 6dd74de | | | 501 | imgSnapshotTest( |
| 6dd74de | | | 502 | `graph LR |
| 6dd74de | | | 503 | A[(cylindrical<br />shape<br />test)] |
| 6dd74de | | | 504 | A -->|Get money| B1[(Go shopping 1)] |
| 6dd74de | | | 505 | A -->|Get money| B2[(Go shopping 2)] |
| 6dd74de | | | 506 | A -->|Get money| B3[(Go shopping 3)] |
| 6dd74de | | | 507 | C[(Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?)] |
| 6dd74de | | | 508 | B1 --> C |
| 6dd74de | | | 509 | B2 --> C |
| 6dd74de | | | 510 | B3 --> C |
| 6dd74de | | | 511 | C -->|One| D[(Laptop)] |
| 6dd74de | | | 512 | C -->|Two| E[(iPhone)] |
| 6dd74de | | | 513 | C -->|Three| F[(Car)] |
| 6dd74de | | | 514 | click A "index.html#link-clicked" "link test" |
| 6dd74de | | | 515 | click B testClick "click test" |
| 6dd74de | | | 516 | classDef someclass fill:#f96; |
| 6dd74de | | | 517 | class A someclass;`, |
| 6dd74de | | | 518 | { |
| 6dd74de | | | 519 | look: 'handDrawn', |
| 6dd74de | | | 520 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 521 | fontFamily: 'courier', |
| 6dd74de | | | 522 | } |
| 6dd74de | | | 523 | ); |
| 6dd74de | | | 524 | }); |
| 6dd74de | | | 525 | |
| 6dd74de | | | 526 | it('FDH22: Render a simple flowchart with nodeSpacing set to 100', () => { |
| 6dd74de | | | 527 | imgSnapshotTest( |
| 6dd74de | | | 528 | `graph TD |
| 6dd74de | | | 529 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 530 | B --> C{Let me think} |
| 6dd74de | | | 531 | %% this is a comment |
| 6dd74de | | | 532 | C -->|One| D[Laptop] |
| 6dd74de | | | 533 | C -->|Two| E[iPhone] |
| 6dd74de | | | 534 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 535 | `, |
| 6dd74de | | | 536 | { look: 'handDrawn', flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' } |
| 6dd74de | | | 537 | ); |
| 6dd74de | | | 538 | }); |
| 6dd74de | | | 539 | |
| 6dd74de | | | 540 | it('FDH23: Render a simple flowchart with rankSpacing set to 100', () => { |
| 6dd74de | | | 541 | imgSnapshotTest( |
| 6dd74de | | | 542 | `graph TD |
| 6dd74de | | | 543 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 544 | B --> C{Let me think} |
| 6dd74de | | | 545 | %% this is a comment |
| 6dd74de | | | 546 | C -->|One| D[Laptop] |
| 6dd74de | | | 547 | C -->|Two| E[iPhone] |
| 6dd74de | | | 548 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 549 | `, |
| 6dd74de | | | 550 | { |
| 6dd74de | | | 551 | look: 'handDrawn', |
| 6dd74de | | | 552 | flowchart: { rankSpacing: '100' }, |
| 6dd74de | | | 553 | fontFamily: 'courier', |
| 6dd74de | | | 554 | } |
| 6dd74de | | | 555 | ); |
| 6dd74de | | | 556 | }); |
| 6dd74de | | | 557 | |
| 6dd74de | | | 558 | it('FDH24: Keep node label text (if already defined) when a style is applied', () => { |
| 6dd74de | | | 559 | imgSnapshotTest( |
| 6dd74de | | | 560 | `graph LR |
| 6dd74de | | | 561 | A(( )) -->|step 1| B(( )) |
| 6dd74de | | | 562 | B(( )) -->|step 2| C(( )) |
| 6dd74de | | | 563 | C(( )) -->|step 3| D(( )) |
| 6dd74de | | | 564 | linkStyle 1 stroke:greenyellow,stroke-width:2px |
| 6dd74de | | | 565 | style C fill:greenyellow,stroke:green,stroke-width:4px |
| 6dd74de | | | 566 | `, |
| 6dd74de | | | 567 | { |
| 6dd74de | | | 568 | look: 'handDrawn', |
| 6dd74de | | | 569 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 570 | fontFamily: 'courier', |
| 6dd74de | | | 571 | } |
| 6dd74de | | | 572 | ); |
| 6dd74de | | | 573 | }); |
| 6dd74de | | | 574 | |
| 6dd74de | | | 575 | it('FDH25: Handle link click events (link, anchor, mailto, other protocol, script)', () => { |
| 6dd74de | | | 576 | imgSnapshotTest( |
| 6dd74de | | | 577 | `graph TB |
| 6dd74de | | | 578 | TITLE["Link Click Events<br>(click the nodes below)"] |
| 6dd74de | | | 579 | A["link test (open in same tab)"] |
| 6dd74de | | | 580 | B["link test (open in new tab)"] |
| 6dd74de | | | 581 | C[anchor test] |
| 6dd74de | | | 582 | D[mailto test] |
| 6dd74de | | | 583 | E[other protocol test] |
| 6dd74de | | | 584 | F[script test] |
| 6dd74de | | | 585 | TITLE --> A & B & C & D & E & F |
| 6dd74de | | | 586 | click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)" |
| 6dd74de | | | 587 | click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank |
| 6dd74de | | | 588 | click C "#link-clicked" |
| 6dd74de | | | 589 | click D "mailto:user@user.user" "mailto test" |
| 6dd74de | | | 590 | click E "notes://do-your-thing/id" "other protocol test" |
| 6dd74de | | | 591 | click F "javascript:alert('test')" "script test" |
| 6dd74de | | | 592 | `, |
| 6dd74de | | | 593 | { look: 'handDrawn', securityLevel: 'loose', fontFamily: 'courier' } |
| 6dd74de | | | 594 | ); |
| 6dd74de | | | 595 | }); |
| 6dd74de | | | 596 | |
| 6dd74de | | | 597 | it('FDH26: Set text color of nodes and links according to styles when html labels are enabled', () => { |
| 6dd74de | | | 598 | imgSnapshotTest( |
| 6dd74de | | | 599 | `graph LR |
| 6dd74de | | | 600 | A[red<br>text] -->|red<br>text| B(blue<br>text) |
| 6dd74de | | | 601 | C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text} |
| 6dd74de | | | 602 | E{{default<br />style}} -->|default<br />style| F([default<br />style]) |
| 6dd74de | | | 603 | linkStyle default color:Sienna; |
| 6dd74de | | | 604 | linkStyle 0 color:red; |
| 6dd74de | | | 605 | linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff |
| 6dd74de | | | 606 | style A color:red; |
| 6dd74de | | | 607 | style B color:blue; |
| 6dd74de | | | 608 | style C stroke:#ff0000,fill:#ffcccc,color:#ff0000 |
| 6dd74de | | | 609 | style D stroke:#0000ff,fill:#ccccff,color:#0000ff |
| 6dd74de | | | 610 | click B "index.html#link-clicked" "link test" |
| 6dd74de | | | 611 | click D testClick "click test" |
| 6dd74de | | | 612 | `, |
| 6dd74de | | | 613 | { look: 'handDrawn', flowchart: { htmlLabels: true } } |
| 6dd74de | | | 614 | ); |
| 6dd74de | | | 615 | }); |
| 6dd74de | | | 616 | |
| 6dd74de | | | 617 | it('FDH27: Set text color of nodes and links according to styles when html labels are disabled', () => { |
| 6dd74de | | | 618 | imgSnapshotTest( |
| 6dd74de | | | 619 | `graph LR |
| 6dd74de | | | 620 | A[red<br>text] -->|red<br>text| B(blue<br>text) |
| 6dd74de | | | 621 | C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text} |
| 6dd74de | | | 622 | E{{default<br />style}} -->|default<br />style| F([default<br />style]) |
| 6dd74de | | | 623 | linkStyle default color:Sienna; |
| 6dd74de | | | 624 | linkStyle 0 color:red; |
| 6dd74de | | | 625 | linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff |
| 6dd74de | | | 626 | style A color:red; |
| 6dd74de | | | 627 | style B color:blue; |
| 6dd74de | | | 628 | style C stroke:#ff0000,fill:#ffcccc,color:#ff0000 |
| 6dd74de | | | 629 | style D stroke:#0000ff,fill:#ccccff,color:#0000ff |
| 6dd74de | | | 630 | click B "index.html#link-clicked" "link test" |
| 6dd74de | | | 631 | click D testClick "click test" |
| 6dd74de | | | 632 | `, |
| 6dd74de | | | 633 | { |
| 6dd74de | | | 634 | look: 'handDrawn', |
| 6dd74de | | | 635 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 636 | fontFamily: 'courier', |
| 6dd74de | | | 637 | } |
| 6dd74de | | | 638 | ); |
| 6dd74de | | | 639 | }); |
| 6dd74de | | | 640 | |
| 6dd74de | | | 641 | it('FDH28: Apply default class to all nodes which do not have another class assigned (htmlLabels enabled)', () => { |
| 6dd74de | | | 642 | imgSnapshotTest( |
| 6dd74de | | | 643 | `graph TD |
| 6dd74de | | | 644 | A[myClass1] --> B[default] & C[default] |
| 6dd74de | | | 645 | B[default] & C[default] --> D[myClass2] |
| 6dd74de | | | 646 | classDef default stroke-width:2px,fill:none,stroke:silver |
| 6dd74de | | | 647 | classDef node color:red |
| 6dd74de | | | 648 | classDef myClass1 color:#0000ff |
| 6dd74de | | | 649 | classDef myClass2 stroke:#0000ff,fill:#ccccff |
| 6dd74de | | | 650 | class A myClass1 |
| 6dd74de | | | 651 | class D myClass2 |
| 6dd74de | | | 652 | `, |
| 6dd74de | | | 653 | { look: 'handDrawn', flowchart: { htmlLabels: true } } |
| 6dd74de | | | 654 | ); |
| 6dd74de | | | 655 | }); |
| 6dd74de | | | 656 | |
| 6dd74de | | | 657 | it('FDH29: Apply default class to all nodes which do not have another class assigned (htmlLabels disabled)', () => { |
| 6dd74de | | | 658 | imgSnapshotTest( |
| 6dd74de | | | 659 | `graph TD |
| 6dd74de | | | 660 | A[myClass1] --> B[default] & C[default] |
| 6dd74de | | | 661 | B[default] & C[default] --> D[myClass2] |
| 6dd74de | | | 662 | classDef default stroke-width:2px,fill:none,stroke:silver |
| 6dd74de | | | 663 | classDef node color:red |
| 6dd74de | | | 664 | classDef myClass1 color:#0000ff |
| 6dd74de | | | 665 | classDef myClass2 stroke:#0000ff,fill:#ccccff |
| 6dd74de | | | 666 | class A myClass1 |
| 6dd74de | | | 667 | class D myClass2 |
| 6dd74de | | | 668 | `, |
| 6dd74de | | | 669 | { |
| 6dd74de | | | 670 | look: 'handDrawn', |
| 6dd74de | | | 671 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 672 | fontFamily: 'courier', |
| 6dd74de | | | 673 | } |
| 6dd74de | | | 674 | ); |
| 6dd74de | | | 675 | }); |
| 6dd74de | | | 676 | |
| 6dd74de | | | 677 | it('FDH30: Possibility to style text color of nodes and subgraphs as well as apply classes to subgraphs', () => { |
| 6dd74de | | | 678 | imgSnapshotTest( |
| 6dd74de | | | 679 | `graph LR |
| 6dd74de | | | 680 | subgraph id1 [title is set] |
| 6dd74de | | | 681 | A-->B |
| 6dd74de | | | 682 | end |
| 6dd74de | | | 683 | subgraph id2 [title] |
| 6dd74de | | | 684 | E |
| 6dd74de | | | 685 | end |
| 6dd74de | | | 686 | |
| 6dd74de | | | 687 | B-->C |
| 6dd74de | | | 688 | |
| 6dd74de | | | 689 | subgraph id3 |
| 6dd74de | | | 690 | C-->D |
| 6dd74de | | | 691 | end |
| 6dd74de | | | 692 | class id3,id2,A redBg; |
| 6dd74de | | | 693 | class id3,A whiteTxt; |
| 6dd74de | | | 694 | classDef redBg fill:#622; |
| 6dd74de | | | 695 | classDef whiteTxt color: white; |
| 6dd74de | | | 696 | `, |
| 6dd74de | | | 697 | { |
| 6dd74de | | | 698 | look: 'handDrawn', |
| 6dd74de | | | 699 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 700 | fontFamily: 'courier', |
| 6dd74de | | | 701 | } |
| 6dd74de | | | 702 | ); |
| 6dd74de | | | 703 | }); |
| 6dd74de | | | 704 | |
| 6dd74de | | | 705 | it('FDH31: should not slice off edges that are to the left of the left-most vertex', () => { |
| 6dd74de | | | 706 | imgSnapshotTest( |
| 6dd74de | | | 707 | `graph TD |
| 6dd74de | | | 708 | work --> sleep |
| 6dd74de | | | 709 | sleep --> work |
| 6dd74de | | | 710 | eat --> sleep |
| 6dd74de | | | 711 | work --> eat |
| 6dd74de | | | 712 | `, |
| 6dd74de | | | 713 | { |
| 6dd74de | | | 714 | look: 'handDrawn', |
| 6dd74de | | | 715 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 716 | fontFamily: 'courier', |
| 6dd74de | | | 717 | } |
| 6dd74de | | | 718 | ); |
| 6dd74de | | | 719 | }); |
| 6dd74de | | | 720 | |
| 6dd74de | | | 721 | it('FDH32: Render Subroutine shape', () => { |
| 6dd74de | | | 722 | imgSnapshotTest( |
| 6dd74de | | | 723 | `graph LR |
| 6dd74de | | | 724 | A[[subroutine shape test]] |
| 6dd74de | | | 725 | A -->|Get money| B[[Go shopping]] |
| 6dd74de | | | 726 | B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]] |
| 6dd74de | | | 727 | C -->|One| D[[Laptop]] |
| 6dd74de | | | 728 | C -->|Two| E[[iPhone]] |
| 6dd74de | | | 729 | C -->|Three| F[[Car<br/>wroom wroom]] |
| 6dd74de | | | 730 | click A "index.html#link-clicked" "link test" |
| 6dd74de | | | 731 | click B testClick "click test" |
| 6dd74de | | | 732 | classDef someclass fill:#f96; |
| 6dd74de | | | 733 | class A someclass; |
| 6dd74de | | | 734 | class C someclass; |
| 6dd74de | | | 735 | `, |
| 6dd74de | | | 736 | { |
| 6dd74de | | | 737 | look: 'handDrawn', |
| 6dd74de | | | 738 | flowchart: { htmlLabels: false }, |
| 6dd74de | | | 739 | fontFamily: 'courier', |
| 6dd74de | | | 740 | } |
| 6dd74de | | | 741 | ); |
| 6dd74de | | | 742 | }); |
| 6dd74de | | | 743 | |
| 6dd74de | | | 744 | it('FDH33: should render a simple flowchart with diagramPadding set to 0', () => { |
| 6dd74de | | | 745 | imgSnapshotTest( |
| 6dd74de | | | 746 | `graph TD |
| 6dd74de | | | 747 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 748 | B --> C{Let me think} |
| 6dd74de | | | 749 | %% this is a comment |
| 6dd74de | | | 750 | C -->|One| D[Laptop] |
| 6dd74de | | | 751 | C -->|Two| E[iPhone] |
| 6dd74de | | | 752 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 753 | `, |
| 6dd74de | | | 754 | { look: 'handDrawn', flowchart: { diagramPadding: 0 } } |
| 6dd74de | | | 755 | ); |
| 6dd74de | | | 756 | }); |
| 6dd74de | | | 757 | |
| 6dd74de | | | 758 | it('FDH34: testing the label width in percy', () => { |
| 6dd74de | | | 759 | imgSnapshotTest( |
| 6dd74de | | | 760 | `graph TD |
| 6dd74de | | | 761 | A[Christmas] |
| 6dd74de | | | 762 | `, |
| 6dd74de | | | 763 | { look: 'handDrawn', handDrawnSeed: 1 } |
| 6dd74de | | | 764 | ); |
| 6dd74de | | | 765 | }); |
| 6dd74de | | | 766 | |
| 6dd74de | | | 767 | it('FDH35: should honor minimum edge length as specified by the user', () => { |
| 6dd74de | | | 768 | imgSnapshotTest( |
| 6dd74de | | | 769 | `graph TD |
| 6dd74de | | | 770 | L1 --- L2 |
| 6dd74de | | | 771 | L2 --- C |
| 6dd74de | | | 772 | M1 ---> C |
| 6dd74de | | | 773 | R1 .-> R2 |
| 6dd74de | | | 774 | R2 <.-> C |
| 6dd74de | | | 775 | C -->|Label 1| E1 |
| 6dd74de | | | 776 | C -- Label 2 ---> E2 |
| 6dd74de | | | 777 | C ----> E3 |
| 6dd74de | | | 778 | C -----> E4 |
| 6dd74de | | | 779 | C ======> E5 |
| 6dd74de | | | 780 | `, |
| 6dd74de | | | 781 | { look: 'handDrawn', handDrawnSeed: 1 } |
| 6dd74de | | | 782 | ); |
| 6dd74de | | | 783 | }); |
| 6dd74de | | | 784 | it('FDH36: should render escaped without html labels', () => { |
| 6dd74de | | | 785 | imgSnapshotTest( |
| 6dd74de | | | 786 | `graph TD |
| 6dd74de | | | 787 | a["<strong>Haiya</strong>"]-->b |
| 6dd74de | | | 788 | `, |
| 6dd74de | | | 789 | { look: 'handDrawn', htmlLabels: false, flowchart: { htmlLabels: false } } |
| 6dd74de | | | 790 | ); |
| 6dd74de | | | 791 | }); |
| 6dd74de | | | 792 | it('FDH37: should render non-escaped with html labels', () => { |
| 6dd74de | | | 793 | imgSnapshotTest( |
| 6dd74de | | | 794 | `graph TD |
| 6dd74de | | | 795 | a["<strong>Haiya</strong>"]-->b |
| 6dd74de | | | 796 | `, |
| 6dd74de | | | 797 | { |
| 6dd74de | | | 798 | look: 'handDrawn', |
| 6dd74de | | | 799 | htmlLabels: true, |
| 6dd74de | | | 800 | flowchart: { htmlLabels: true }, |
| 6dd74de | | | 801 | securityLevel: 'loose', |
| 6dd74de | | | 802 | } |
| 6dd74de | | | 803 | ); |
| 6dd74de | | | 804 | }); |
| 6dd74de | | | 805 | it('FDH38: should render a flowchart when useMaxWidth is true (default)', () => { |
| 6dd74de | | | 806 | renderGraph( |
| 6dd74de | | | 807 | `flowchart TD |
| 6dd74de | | | 808 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 809 | B --> C{Let me think} |
| 6dd74de | | | 810 | C -->|One| D[Laptop] |
| 6dd74de | | | 811 | C -->|Two| E[iPhone] |
| 6dd74de | | | 812 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 813 | `, |
| 6dd74de | | | 814 | { look: 'handDrawn', flowchart: { useMaxWidth: true } } |
| 6dd74de | | | 815 | ); |
| 6dd74de | | | 816 | cy.get('svg').should((svg) => { |
| 6dd74de | | | 817 | expect(svg).to.have.attr('width', '100%'); |
| 6dd74de | | | 818 | // expect(svg).to.have.attr('height'); |
| 6dd74de | | | 819 | // use within because the absolute value can be slightly different depending on the environment ±10% |
| 6dd74de | | | 820 | // const height = parseFloat(svg.attr('height')); |
| 6dd74de | | | 821 | // expect(height).to.be.within(446 * 0.95, 446 * 1.05); |
| 6dd74de | | | 822 | const style = svg.attr('style'); |
| 6dd74de | | | 823 | expect(style).to.match(/^max-width: [\d.]+px;$/); |
| 6dd74de | | | 824 | const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); |
| 6dd74de | | | 825 | expect(maxWidthValue).to.be.within(446 * 0.9, 446 * 1.1); |
| 6dd74de | | | 826 | }); |
| 6dd74de | | | 827 | }); |
| 6dd74de | | | 828 | it('FDH39: should render a flowchart when useMaxWidth is false', () => { |
| 6dd74de | | | 829 | renderGraph( |
| 6dd74de | | | 830 | `graph TD |
| 6dd74de | | | 831 | A[Christmas] -->|Get money| B(Go shopping) |
| 6dd74de | | | 832 | B --> C{Let me think} |
| 6dd74de | | | 833 | C -->|One| D[Laptop] |
| 6dd74de | | | 834 | C -->|Two| E[iPhone] |
| 6dd74de | | | 835 | C -->|Three| F[fa:fa-car Car] |
| 6dd74de | | | 836 | `, |
| 6dd74de | | | 837 | { look: 'handDrawn', flowchart: { useMaxWidth: false } } |
| 6dd74de | | | 838 | ); |
| 6dd74de | | | 839 | cy.get('svg').should((svg) => { |
| 6dd74de | | | 840 | // const height = parseFloat(svg.attr('height')); |
| 6dd74de | | | 841 | const width = parseFloat(svg.attr('width')); |
| 6dd74de | | | 842 | // use within because the absolute value can be slightly different depending on the environment ±10% |
| 6dd74de | | | 843 | // expect(height).to.be.within(446 * 0.95, 446 * 1.05); |
| 6dd74de | | | 844 | expect(width).to.be.within(446 * 0.9, 446 * 1.1); |
| 6dd74de | | | 845 | expect(svg).to.not.have.attr('style'); |
| 6dd74de | | | 846 | }); |
| 6dd74de | | | 847 | }); |
| 6dd74de | | | 848 | it('FDH40: handle styling with style expressions', () => { |
| 6dd74de | | | 849 | imgSnapshotTest( |
| 6dd74de | | | 850 | ` |
| 6dd74de | | | 851 | graph LR |
| 6dd74de | | | 852 | id1(Start)-->id2(Stop) |
| 6dd74de | | | 853 | style id1 fill:#f9f,stroke:#333,stroke-width:4px |
| 6dd74de | | | 854 | style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 |
| 6dd74de | | | 855 | `, |
| 6dd74de | | | 856 | { |
| 6dd74de | | | 857 | look: 'handDrawn', |
| 6dd74de | | | 858 | htmlLabels: true, |
| 6dd74de | | | 859 | flowchart: { htmlLabels: true }, |
| 6dd74de | | | 860 | securityLevel: 'loose', |
| 6dd74de | | | 861 | } |
| 6dd74de | | | 862 | ); |
| 6dd74de | | | 863 | }); |
| 6dd74de | | | 864 | it('FDH41: handle styling for all node shapes', () => { |
| 6dd74de | | | 865 | imgSnapshotTest( |
| 6dd74de | | | 866 | ` |
| 6dd74de | | | 867 | graph LR |
| 6dd74de | | | 868 | A[red text] -->|default style| B(blue text) |
| 6dd74de | | | 869 | C([red text]) -->|default style| D[[blue text]] |
| 6dd74de | | | 870 | E[(red text)] -->|default style| F((blue text)) |
| 6dd74de | | | 871 | G>red text] -->|default style| H{blue text} |
| 6dd74de | | | 872 | I{{red text}} -->|default style| J[/blue text/] |
| 6dd74de | | | 873 | linkStyle default color:Sienna; |
| 6dd74de | | | 874 | style A stroke:#ff0000,fill:#ffcccc,color:#ff0000 |
| 6dd74de | | | 875 | style B stroke:#0000ff,fill:#ccccff,color:#0000ff |
| 6dd74de | | | 876 | style C stroke:#ff0000,fill:#ffcccc,color:#ff0000 |
| 6dd74de | | | 877 | style D stroke:#0000ff,fill:#ccccff,color:#0000ff |
| 6dd74de | | | 878 | style E stroke:#ff0000,fill:#ffcccc,color:#ff0000 |
| 6dd74de | | | 879 | style F stroke:#0000ff,fill:#ccccff,color:#0000ff |
| 6dd74de | | | 880 | style G stroke:#ff0000,fill:#ffcccc,color:#ff0000 |
| 6dd74de | | | 881 | style H stroke:#0000ff,fill:#ccccff,color:#0000ff |
| 6dd74de | | | 882 | style I stroke:#ff0000,fill:#ffcccc,color:#ff0000 |
| 6dd74de | | | 883 | style J stroke:#0000ff,fill:#ccccff,color:#0000ff |
| 6dd74de | | | 884 | `, |
| 6dd74de | | | 885 | { |
| 6dd74de | | | 886 | look: 'handDrawn', |
| 6dd74de | | | 887 | htmlLabels: true, |
| 6dd74de | | | 888 | flowchart: { htmlLabels: true }, |
| 6dd74de | | | 889 | securityLevel: 'loose', |
| 6dd74de | | | 890 | } |
| 6dd74de | | | 891 | ); |
| 6dd74de | | | 892 | }); |
| 6dd74de | | | 893 | it('FDH42: fontawesome icons in edge labels', () => { |
| 6dd74de | | | 894 | imgSnapshotTest( |
| 6dd74de | | | 895 | ` |
| 6dd74de | | | 896 | graph TD |
| 6dd74de | | | 897 | C -->|fa:fa-car Car| F[fa:fa-car Car] |
| 6dd74de | | | 898 | `, |
| 6dd74de | | | 899 | { |
| 6dd74de | | | 900 | look: 'handDrawn', |
| 6dd74de | | | 901 | htmlLabels: true, |
| 6dd74de | | | 902 | flowchart: { htmlLabels: true }, |
| 6dd74de | | | 903 | securityLevel: 'loose', |
| 6dd74de | | | 904 | } |
| 6dd74de | | | 905 | ); |
| 6dd74de | | | 906 | }); |
| 6dd74de | | | 907 | it('FDH43: fontawesome icons in edge labels', () => { |
| 6dd74de | | | 908 | imgSnapshotTest( |
| 6dd74de | | | 909 | ` |
| 6dd74de | | | 910 | graph TB |
| 6dd74de | | | 911 | subgraph bar[Bar] |
| 6dd74de | | | 912 | F |
| 6dd74de | | | 913 | end |
| 6dd74de | | | 914 | style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue |
| 6dd74de | | | 915 | `, |
| 6dd74de | | | 916 | { |
| 6dd74de | | | 917 | look: 'handDrawn', |
| 6dd74de | | | 918 | htmlLabels: true, |
| 6dd74de | | | 919 | flowchart: { htmlLabels: true }, |
| 6dd74de | | | 920 | securityLevel: 'loose', |
| 6dd74de | | | 921 | } |
| 6dd74de | | | 922 | ); |
| 6dd74de | | | 923 | }); |
| 6dd74de | | | 924 | it('FDH44: fontawesome icons in edge labels', () => { |
| 6dd74de | | | 925 | imgSnapshotTest( |
| 6dd74de | | | 926 | ` |
| 6dd74de | | | 927 | graph TB |
| 6dd74de | | | 928 | A |
| 6dd74de | | | 929 | B |
| 6dd74de | | | 930 | subgraph foo[Foo SubGraph] |
| 6dd74de | | | 931 | C |
| 6dd74de | | | 932 | D |
| 6dd74de | | | 933 | end |
| 6dd74de | | | 934 | subgraph bar[Bar SubGraph] |
| 6dd74de | | | 935 | E |
| 6dd74de | | | 936 | F |
| 6dd74de | | | 937 | end |
| 6dd74de | | | 938 | G |
| 6dd74de | | | 939 | |
| 6dd74de | | | 940 | A-->B |
| 6dd74de | | | 941 | B-->C |
| 6dd74de | | | 942 | C-->D |
| 6dd74de | | | 943 | B-->D |
| 6dd74de | | | 944 | D-->E |
| 6dd74de | | | 945 | E-->A |
| 6dd74de | | | 946 | E-->F |
| 6dd74de | | | 947 | F-->D |
| 6dd74de | | | 948 | F-->G |
| 6dd74de | | | 949 | B-->G |
| 6dd74de | | | 950 | G-->D |
| 6dd74de | | | 951 | |
| 6dd74de | | | 952 | style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred |
| 6dd74de | | | 953 | style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue |
| 6dd74de | | | 954 | `, |
| 6dd74de | | | 955 | { |
| 6dd74de | | | 956 | look: 'handDrawn', |
| 6dd74de | | | 957 | htmlLabels: true, |
| 6dd74de | | | 958 | flowchart: { htmlLabels: true }, |
| 6dd74de | | | 959 | securityLevel: 'loose', |
| 6dd74de | | | 960 | } |
| 6dd74de | | | 961 | ); |
| 6dd74de | | | 962 | }); |
| 6dd74de | | | 963 | it('FDH45: fontawesome icons in edge labels', () => { |
| 6dd74de | | | 964 | imgSnapshotTest( |
| 6dd74de | | | 965 | ` |
| 6dd74de | | | 966 | %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%% |
| 6dd74de | | | 967 | flowchart LR |
| 6dd74de | | | 968 | subgraph A |
| 6dd74de | | | 969 | a --> b |
| 6dd74de | | | 970 | end |
| 6dd74de | | | 971 | subgraph B |
| 6dd74de | | | 972 | i -->f |
| 6dd74de | | | 973 | end |
| 6dd74de | | | 974 | A --> B |
| 6dd74de | | | 975 | `, |
| 6dd74de | | | 976 | { |
| 6dd74de | | | 977 | look: 'handDrawn', |
| 6dd74de | | | 978 | htmlLabels: true, |
| 6dd74de | | | 979 | flowchart: { htmlLabels: true }, |
| 6dd74de | | | 980 | securityLevel: 'loose', |
| 6dd74de | | | 981 | } |
| 6dd74de | | | 982 | ); |
| 6dd74de | | | 983 | }); |
| 6dd74de | | | 984 | it('FDH46: text-color from classes', () => { |
| 6dd74de | | | 985 | imgSnapshotTest( |
| 6dd74de | | | 986 | ` |
| 6dd74de | | | 987 | flowchart LR |
| 6dd74de | | | 988 | classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff |
| 6dd74de | | | 989 | Lorem --> Ipsum --> Dolor |
| 6dd74de | | | 990 | class Lorem,Dolor dark |
| 6dd74de | | | 991 | `, |
| 6dd74de | | | 992 | { |
| 6dd74de | | | 993 | look: 'handDrawn', |
| 6dd74de | | | 994 | htmlLabels: true, |
| 6dd74de | | | 995 | flowchart: { htmlLabels: true }, |
| 6dd74de | | | 996 | securityLevel: 'loose', |
| 6dd74de | | | 997 | } |
| 6dd74de | | | 998 | ); |
| 6dd74de | | | 999 | }); |
| 6dd74de | | | 1000 | it('FDH47: apply class called default on node called default', () => { |
| 6dd74de | | | 1001 | imgSnapshotTest( |
| 6dd74de | | | 1002 | ` |
| 6dd74de | | | 1003 | graph TD |
| 6dd74de | | | 1004 | classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff |
| 6dd74de | | | 1005 | hello --> default |
| 6dd74de | | | 1006 | `, |
| 6dd74de | | | 1007 | { |
| 6dd74de | | | 1008 | look: 'handDrawn', |
| 6dd74de | | | 1009 | htmlLabels: true, |
| 6dd74de | | | 1010 | flowchart: { htmlLabels: true }, |
| 6dd74de | | | 1011 | securityLevel: 'loose', |
| 6dd74de | | | 1012 | } |
| 6dd74de | | | 1013 | ); |
| 6dd74de | | | 1014 | }); |
| 6dd74de | | | 1015 | |
| 6dd74de | | | 1016 | it('FDH48: should be able to style default node independently', () => { |
| 6dd74de | | | 1017 | imgSnapshotTest( |
| 6dd74de | | | 1018 | ` |
| 6dd74de | | | 1019 | flowchart TD |
| 6dd74de | | | 1020 | classDef default fill:#a34 |
| 6dd74de | | | 1021 | hello --> default |
| 6dd74de | | | 1022 | |
| 6dd74de | | | 1023 | style default stroke:#000,stroke-width:4px |
| 6dd74de | | | 1024 | `, |
| 6dd74de | | | 1025 | { |
| 6dd74de | | | 1026 | look: 'handDrawn', |
| 6dd74de | | | 1027 | flowchart: { htmlLabels: true }, |
| 6dd74de | | | 1028 | securityLevel: 'loose', |
| 6dd74de | | | 1029 | } |
| 6dd74de | | | 1030 | ); |
| 6dd74de | | | 1031 | }); |
| 6dd74de | | | 1032 | |
| 6dd74de | | | 1033 | it('FDH49: should add edge animation', () => { |
| 6dd74de | | | 1034 | renderGraph( |
| 6dd74de | | | 1035 | ` |
| 6dd74de | | | 1036 | flowchart TD |
| 6dd74de | | | 1037 | A(["Start"]) L_A_B_0@--> B{"Decision"} |
| 6dd74de | | | 1038 | B --> C["Option A"] & D["Option B"] |
| 6dd74de | | | 1039 | style C stroke-width:4px,stroke-dasharray: 5 |
| 6dd74de | | | 1040 | L_A_B_0@{ animation: slow } |
| 6dd74de | | | 1041 | L_B_D_0@{ animation: fast }`, |
| 6dd74de | | | 1042 | { look: 'handDrawn', screenshot: false } |
| 6dd74de | | | 1043 | ); |
| 6dd74de | | | 1044 | cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow'); |
| 6dd74de | | | 1045 | cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast'); |
| 6dd74de | | | 1046 | }); |
| 6dd74de | | | 1047 | }); |