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