| 6dd74de | | | 1 | import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; |
| 6dd74de | | | 2 | |
| 6dd74de | | | 3 | describe('State diagram', () => { |
| 6dd74de | | | 4 | it('v2 should render a simple info', () => { |
| 6dd74de | | | 5 | imgSnapshotTest( |
| 6dd74de | | | 6 | ` |
| 6dd74de | | | 7 | info |
| 6dd74de | | | 8 | `, |
| 6dd74de | | | 9 | { logLevel: 1, fontFamily: 'courier' } |
| 6dd74de | | | 10 | ); |
| 6dd74de | | | 11 | }); |
| 6dd74de | | | 12 | it('v2 should render a simple state diagrams', () => { |
| 6dd74de | | | 13 | imgSnapshotTest( |
| 6dd74de | | | 14 | ` |
| 6dd74de | | | 15 | stateDiagram-v2 |
| 6dd74de | | | 16 | |
| 6dd74de | | | 17 | [*] --> State1 |
| 6dd74de | | | 18 | State1 --> [*] |
| 6dd74de | | | 19 | `, |
| 6dd74de | | | 20 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 21 | ); |
| 6dd74de | | | 22 | }); |
| 6dd74de | | | 23 | it('v2 should render a long descriptions instead of id when available', () => { |
| 6dd74de | | | 24 | imgSnapshotTest( |
| 6dd74de | | | 25 | ` |
| 6dd74de | | | 26 | stateDiagram-v2 |
| 6dd74de | | | 27 | |
| 6dd74de | | | 28 | [*] --> S1 |
| 6dd74de | | | 29 | state "Some long name" as S1 |
| 6dd74de | | | 30 | `, |
| 6dd74de | | | 31 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 32 | ); |
| 6dd74de | | | 33 | }); |
| 6dd74de | | | 34 | it('v2 should render a long descriptions with additional descriptions', () => { |
| 6dd74de | | | 35 | imgSnapshotTest( |
| 6dd74de | | | 36 | ` |
| 6dd74de | | | 37 | stateDiagram-v2 |
| 6dd74de | | | 38 | |
| 6dd74de | | | 39 | [*] --> S1 |
| 6dd74de | | | 40 | state "Some long name" as S1: The description |
| 6dd74de | | | 41 | `, |
| 6dd74de | | | 42 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 43 | ); |
| 6dd74de | | | 44 | }); |
| 6dd74de | | | 45 | it('v2 should render a single state with short descriptions', () => { |
| 6dd74de | | | 46 | imgSnapshotTest( |
| 6dd74de | | | 47 | ` |
| 6dd74de | | | 48 | stateDiagram-v2 |
| 6dd74de | | | 49 | state "A long long name" as long1 |
| 6dd74de | | | 50 | state "A" as longlonglongid |
| 6dd74de | | | 51 | `, |
| 6dd74de | | | 52 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 53 | ); |
| 6dd74de | | | 54 | }); |
| 6dd74de | | | 55 | it('v2 should render a transition descriptions with new lines', () => { |
| 6dd74de | | | 56 | imgSnapshotTest( |
| 6dd74de | | | 57 | ` |
| 6dd74de | | | 58 | stateDiagram-v2 |
| 6dd74de | | | 59 | |
| 6dd74de | | | 60 | [*] --> S1 |
| 6dd74de | | | 61 | S1 --> S2: long line using<br/>should work |
| 6dd74de | | | 62 | S1 --> S3: long line using <br>should work |
| 6dd74de | | | 63 | S1 --> S4: long line using \\nshould work |
| 6dd74de | | | 64 | `, |
| 6dd74de | | | 65 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 66 | ); |
| 6dd74de | | | 67 | }); |
| 6dd74de | | | 68 | it('v2 should render a state with a note', () => { |
| 6dd74de | | | 69 | imgSnapshotTest( |
| 6dd74de | | | 70 | ` |
| 6dd74de | | | 71 | stateDiagram-v2 |
| 6dd74de | | | 72 | State1: The state with a note |
| 6dd74de | | | 73 | note right of State1 |
| 6dd74de | | | 74 | Important information! You can write |
| 6dd74de | | | 75 | notes. |
| 6dd74de | | | 76 | end note |
| 6dd74de | | | 77 | `, |
| 6dd74de | | | 78 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 79 | ); |
| 6dd74de | | | 80 | }); |
| 6dd74de | | | 81 | it('v2 should render a state with on the left side when so specified', () => { |
| 6dd74de | | | 82 | imgSnapshotTest( |
| 6dd74de | | | 83 | ` |
| 6dd74de | | | 84 | stateDiagram-v2 |
| 6dd74de | | | 85 | State1: The state with a note with minus - and plus + in it |
| 6dd74de | | | 86 | note left of State1 |
| 6dd74de | | | 87 | Important information! You can write |
| 6dd74de | | | 88 | notes with . and in them. |
| 6dd74de | | | 89 | end note |
| 6dd74de | | | 90 | `, |
| 6dd74de | | | 91 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 92 | ); |
| 6dd74de | | | 93 | }); |
| 6dd74de | | | 94 | it('v2 should render a state with a note together with another state', () => { |
| 6dd74de | | | 95 | imgSnapshotTest( |
| 6dd74de | | | 96 | ` |
| 6dd74de | | | 97 | stateDiagram-v2 |
| 6dd74de | | | 98 | State1: The state with a note +,- |
| 6dd74de | | | 99 | note right of State1 |
| 6dd74de | | | 100 | Important information! You can write +,- |
| 6dd74de | | | 101 | notes. |
| 6dd74de | | | 102 | end note |
| 6dd74de | | | 103 | State1 --> State2 : With +,- |
| 6dd74de | | | 104 | note left of State2 : This is the note +,-<br/> |
| 6dd74de | | | 105 | `, |
| 6dd74de | | | 106 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 107 | ); |
| 6dd74de | | | 108 | }); |
| 6dd74de | | | 109 | it('v2 should render a note with multiple lines in it', () => { |
| 6dd74de | | | 110 | imgSnapshotTest( |
| 6dd74de | | | 111 | ` |
| 6dd74de | | | 112 | stateDiagram-v2 |
| 6dd74de | | | 113 | State1: The state with a note |
| 6dd74de | | | 114 | note right of State1 |
| 6dd74de | | | 115 | Important information! You\ncan write |
| 6dd74de | | | 116 | notes with multiple lines... |
| 6dd74de | | | 117 | Here is another line... |
| 6dd74de | | | 118 | And another line... |
| 6dd74de | | | 119 | end note |
| 6dd74de | | | 120 | `, |
| 6dd74de | | | 121 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 122 | ); |
| 6dd74de | | | 123 | }); |
| 6dd74de | | | 124 | it('v2 should handle multiline notes with different line breaks', () => { |
| 6dd74de | | | 125 | imgSnapshotTest( |
| 6dd74de | | | 126 | ` |
| 6dd74de | | | 127 | stateDiagram-v2 |
| 6dd74de | | | 128 | State1 |
| 6dd74de | | | 129 | note right of State1 |
| 6dd74de | | | 130 | Line1<br>Line2<br/>Line3<br />Line4<br />Line5 |
| 6dd74de | | | 131 | end note |
| 6dd74de | | | 132 | `, |
| 6dd74de | | | 133 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 134 | ); |
| 6dd74de | | | 135 | }); |
| 6dd74de | | | 136 | |
| 6dd74de | | | 137 | it('v2 should render a states with descriptions including multi-line descriptions', () => { |
| 6dd74de | | | 138 | imgSnapshotTest( |
| 6dd74de | | | 139 | ` |
| 6dd74de | | | 140 | stateDiagram-v2 |
| 6dd74de | | | 141 | State1: This a single line description |
| 6dd74de | | | 142 | State2: This a multi line description |
| 6dd74de | | | 143 | State2: here comes the multi part |
| 6dd74de | | | 144 | [*] --> State1 |
| 6dd74de | | | 145 | State1 --> State2 |
| 6dd74de | | | 146 | State2 --> [*] |
| 6dd74de | | | 147 | `, |
| 6dd74de | | | 148 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 149 | ); |
| 6dd74de | | | 150 | }); |
| 6dd74de | | | 151 | it('v2 should render a simple state diagrams 2', () => { |
| 6dd74de | | | 152 | imgSnapshotTest( |
| 6dd74de | | | 153 | ` |
| 6dd74de | | | 154 | stateDiagram-v2 |
| 6dd74de | | | 155 | [*] --> State1 |
| 6dd74de | | | 156 | State1 --> State2 |
| 6dd74de | | | 157 | State1 --> State3 |
| 6dd74de | | | 158 | State1 --> [*] |
| 6dd74de | | | 159 | `, |
| 6dd74de | | | 160 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 161 | ); |
| 6dd74de | | | 162 | }); |
| 6dd74de | | | 163 | it('v2 should render a simple state diagrams with labels', () => { |
| 6dd74de | | | 164 | imgSnapshotTest( |
| 6dd74de | | | 165 | ` |
| 6dd74de | | | 166 | stateDiagram-v2 |
| 6dd74de | | | 167 | [*] --> State1 |
| 6dd74de | | | 168 | State1 --> State2 : Transition 1 |
| 6dd74de | | | 169 | State1 --> State3 : Transition 2 |
| 6dd74de | | | 170 | State1 --> State4 : Transition 3 |
| 6dd74de | | | 171 | State1 --> State5 : Transition 4 |
| 6dd74de | | | 172 | State2 --> State3 : Transition 5 |
| 6dd74de | | | 173 | State1 --> [*] |
| 6dd74de | | | 174 | `, |
| 6dd74de | | | 175 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 176 | ); |
| 6dd74de | | | 177 | }); |
| 6dd74de | | | 178 | it('v2 should render state descriptions', () => { |
| 6dd74de | | | 179 | imgSnapshotTest( |
| 6dd74de | | | 180 | ` |
| 6dd74de | | | 181 | stateDiagram-v2 |
| 6dd74de | | | 182 | state "Long state description" as XState1 |
| 6dd74de | | | 183 | state "Another Long state description" as XState2 |
| 6dd74de | | | 184 | XState2 : New line |
| 6dd74de | | | 185 | XState1 --> XState2 |
| 6dd74de | | | 186 | `, |
| 6dd74de | | | 187 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 188 | ); |
| 6dd74de | | | 189 | }); |
| 6dd74de | | | 190 | it('v2 should render composite states', () => { |
| 6dd74de | | | 191 | imgSnapshotTest( |
| 6dd74de | | | 192 | ` |
| 6dd74de | | | 193 | stateDiagram-v2 |
| 6dd74de | | | 194 | [*] --> NotShooting: Pacifist |
| 6dd74de | | | 195 | NotShooting --> A |
| 6dd74de | | | 196 | NotShooting --> B |
| 6dd74de | | | 197 | NotShooting --> C |
| 6dd74de | | | 198 | |
| 6dd74de | | | 199 | state NotShooting { |
| 6dd74de | | | 200 | [*] --> Idle: Yet another long long öong öong öong label |
| 6dd74de | | | 201 | Idle --> Configuring : EvConfig |
| 6dd74de | | | 202 | Configuring --> Idle : EvConfig EvConfig EvConfig EvConfig EvConfig |
| 6dd74de | | | 203 | } |
| 6dd74de | | | 204 | `, |
| 6dd74de | | | 205 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 206 | ); |
| 6dd74de | | | 207 | }); |
| 6dd74de | | | 208 | it('v2 should render multiple composite states', () => { |
| 6dd74de | | | 209 | imgSnapshotTest( |
| 6dd74de | | | 210 | ` |
| 6dd74de | | | 211 | stateDiagram-v2 |
| 6dd74de | | | 212 | [*]-->TV |
| 6dd74de | | | 213 | |
| 6dd74de | | | 214 | state TV { |
| 6dd74de | | | 215 | [*] --> Off: Off to start with |
| 6dd74de | | | 216 | On --> Off : Turn off |
| 6dd74de | | | 217 | Off --> On : Turn on |
| 6dd74de | | | 218 | } |
| 6dd74de | | | 219 | |
| 6dd74de | | | 220 | TV--> Console |
| 6dd74de | | | 221 | |
| 6dd74de | | | 222 | state Console { |
| 6dd74de | | | 223 | [*] --> Off2: Off to start with |
| 6dd74de | | | 224 | On2--> Off2 : Turn off |
| 6dd74de | | | 225 | Off2 --> On2 : Turn on |
| 6dd74de | | | 226 | On2-->Playing |
| 6dd74de | | | 227 | |
| 6dd74de | | | 228 | state Playing { |
| 6dd74de | | | 229 | Alive --> Dead |
| 6dd74de | | | 230 | Dead-->Alive |
| 6dd74de | | | 231 | } |
| 6dd74de | | | 232 | } |
| 6dd74de | | | 233 | `, |
| 6dd74de | | | 234 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 235 | ); |
| 6dd74de | | | 236 | }); |
| 6dd74de | | | 237 | it('v2 should render forks in composite states', () => { |
| 6dd74de | | | 238 | imgSnapshotTest( |
| 6dd74de | | | 239 | ` |
| 6dd74de | | | 240 | stateDiagram-v2 |
| 6dd74de | | | 241 | [*]-->TV |
| 6dd74de | | | 242 | |
| 6dd74de | | | 243 | state TV { |
| 6dd74de | | | 244 | state fork_state <<fork>> |
| 6dd74de | | | 245 | [*] --> fork_state |
| 6dd74de | | | 246 | fork_state --> State2 |
| 6dd74de | | | 247 | fork_state --> State3 |
| 6dd74de | | | 248 | |
| 6dd74de | | | 249 | state join_state <<join>> |
| 6dd74de | | | 250 | State2 --> join_state |
| 6dd74de | | | 251 | State3 --> join_state |
| 6dd74de | | | 252 | join_state --> State4 |
| 6dd74de | | | 253 | State4 --> [*] |
| 6dd74de | | | 254 | } |
| 6dd74de | | | 255 | `, |
| 6dd74de | | | 256 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 257 | ); |
| 6dd74de | | | 258 | }); |
| 6dd74de | | | 259 | it('v2 should render forks and joins', () => { |
| 6dd74de | | | 260 | imgSnapshotTest( |
| 6dd74de | | | 261 | ` |
| 6dd74de | | | 262 | stateDiagram-v2 |
| 6dd74de | | | 263 | state fork_state <<fork>> |
| 6dd74de | | | 264 | [*] --> fork_state |
| 6dd74de | | | 265 | fork_state --> State2 |
| 6dd74de | | | 266 | fork_state --> State3 |
| 6dd74de | | | 267 | |
| 6dd74de | | | 268 | state join_state <<join>> |
| 6dd74de | | | 269 | State2 --> join_state |
| 6dd74de | | | 270 | State3 --> join_state |
| 6dd74de | | | 271 | join_state --> State4 |
| 6dd74de | | | 272 | State4 --> [*] |
| 6dd74de | | | 273 | `, |
| 6dd74de | | | 274 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 275 | ); |
| 6dd74de | | | 276 | }); |
| 6dd74de | | | 277 | it('v2 should render concurrency states', () => { |
| 6dd74de | | | 278 | imgSnapshotTest( |
| 6dd74de | | | 279 | ` |
| 6dd74de | | | 280 | stateDiagram-v2 |
| 6dd74de | | | 281 | [*] --> Active |
| 6dd74de | | | 282 | |
| 6dd74de | | | 283 | state Active { |
| 6dd74de | | | 284 | [*] --> NumLockOff |
| 6dd74de | | | 285 | NumLockOff --> NumLockOn : EvNumLockPressed |
| 6dd74de | | | 286 | NumLockOn --> NumLockOff : EvNumLockPressed |
| 6dd74de | | | 287 | -- |
| 6dd74de | | | 288 | [*] --> CapsLockOff |
| 6dd74de | | | 289 | CapsLockOff --> CapsLockOn : EvCapsLockPressed |
| 6dd74de | | | 290 | CapsLockOn --> CapsLockOff : EvCapsLockPressed |
| 6dd74de | | | 291 | -- |
| 6dd74de | | | 292 | [*] --> ScrollLockOff |
| 6dd74de | | | 293 | ScrollLockOff --> ScrollLockOn : EvCapsLockPressed |
| 6dd74de | | | 294 | ScrollLockOn --> ScrollLockOff : EvCapsLockPressed |
| 6dd74de | | | 295 | } |
| 6dd74de | | | 296 | `, |
| 6dd74de | | | 297 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 298 | ); |
| 6dd74de | | | 299 | }); |
| 6dd74de | | | 300 | it('v2 should render a state with states in it', () => { |
| 6dd74de | | | 301 | imgSnapshotTest( |
| 6dd74de | | | 302 | ` |
| 6dd74de | | | 303 | stateDiagram-v2 |
| 6dd74de | | | 304 | state PilotCockpit { |
| 6dd74de | | | 305 | state Parent { |
| 6dd74de | | | 306 | C |
| 6dd74de | | | 307 | } |
| 6dd74de | | | 308 | } |
| 6dd74de | | | 309 | `, |
| 6dd74de | | | 310 | { |
| 6dd74de | | | 311 | logLevel: 0, |
| 6dd74de | | | 312 | } |
| 6dd74de | | | 313 | ); |
| 6dd74de | | | 314 | }); |
| 6dd74de | | | 315 | it('v2 it should be possible to use a choice', () => { |
| 6dd74de | | | 316 | imgSnapshotTest( |
| 6dd74de | | | 317 | ` |
| 6dd74de | | | 318 | stateDiagram-v2 |
| 6dd74de | | | 319 | [*] --> Off |
| 6dd74de | | | 320 | Off --> On |
| 6dd74de | | | 321 | state MyChoice [[choice]] |
| 6dd74de | | | 322 | On --> MyChoice |
| 6dd74de | | | 323 | MyChoice --> Washing |
| 6dd74de | | | 324 | MyChoice --> Drying |
| 6dd74de | | | 325 | Washing --> Finished |
| 6dd74de | | | 326 | Finished --> [*] |
| 6dd74de | | | 327 | `, |
| 6dd74de | | | 328 | { |
| 6dd74de | | | 329 | logLevel: 0, |
| 6dd74de | | | 330 | } |
| 6dd74de | | | 331 | ); |
| 6dd74de | | | 332 | }); |
| 6dd74de | | | 333 | it('v2 A compound state should be able to link to itself', () => { |
| 6dd74de | | | 334 | imgSnapshotTest( |
| 6dd74de | | | 335 | ` |
| 6dd74de | | | 336 | stateDiagram |
| 6dd74de | | | 337 | state Active { |
| 6dd74de | | | 338 | Idle |
| 6dd74de | | | 339 | } |
| 6dd74de | | | 340 | Inactive --> Idle: ACT |
| 6dd74de | | | 341 | Active --> Active: LOG |
| 6dd74de | | | 342 | `, |
| 6dd74de | | | 343 | { |
| 6dd74de | | | 344 | logLevel: 0, |
| 6dd74de | | | 345 | } |
| 6dd74de | | | 346 | ); |
| 6dd74de | | | 347 | }); |
| 6dd74de | | | 348 | it('v2 width of compound state should grow with title if title is wider', () => { |
| 6dd74de | | | 349 | imgSnapshotTest( |
| 6dd74de | | | 350 | ` |
| 6dd74de | | | 351 | stateDiagram-v2 |
| 6dd74de | | | 352 | state "Long state name 2" as NotShooting { |
| 6dd74de | | | 353 | a-->b |
| 6dd74de | | | 354 | } |
| 6dd74de | | | 355 | `, |
| 6dd74de | | | 356 | { |
| 6dd74de | | | 357 | logLevel: 0, |
| 6dd74de | | | 358 | } |
| 6dd74de | | | 359 | ); |
| 6dd74de | | | 360 | }); |
| 6dd74de | | | 361 | it('v2 state label with names in it', () => { |
| 6dd74de | | | 362 | imgSnapshotTest( |
| 6dd74de | | | 363 | ` |
| 6dd74de | | | 364 | stateDiagram-v2 |
| 6dd74de | | | 365 | Yswsii: Your state with spaces in it |
| 6dd74de | | | 366 | [*] --> Yswsii |
| 6dd74de | | | 367 | `, |
| 6dd74de | | | 368 | { |
| 6dd74de | | | 369 | logLevel: 0, |
| 6dd74de | | | 370 | } |
| 6dd74de | | | 371 | ); |
| 6dd74de | | | 372 | }); |
| 6dd74de | | | 373 | it('v2 Simplest composite state', () => { |
| 6dd74de | | | 374 | imgSnapshotTest( |
| 6dd74de | | | 375 | ` |
| 6dd74de | | | 376 | stateDiagram-v2 |
| 6dd74de | | | 377 | state Parent { |
| 6dd74de | | | 378 | C |
| 6dd74de | | | 379 | } |
| 6dd74de | | | 380 | `, |
| 6dd74de | | | 381 | { |
| 6dd74de | | | 382 | logLevel: 0, |
| 6dd74de | | | 383 | fontFamily: 'courier', |
| 6dd74de | | | 384 | } |
| 6dd74de | | | 385 | ); |
| 6dd74de | | | 386 | }); |
| 6dd74de | | | 387 | it('v2 should handle multiple arrows from one node to another', () => { |
| 6dd74de | | | 388 | imgSnapshotTest( |
| 6dd74de | | | 389 | ` |
| 6dd74de | | | 390 | stateDiagram-v2 |
| 6dd74de | | | 391 | a --> b: Start |
| 6dd74de | | | 392 | a --> b: Stop |
| 6dd74de | | | 393 | `, |
| 6dd74de | | | 394 | { |
| 6dd74de | | | 395 | logLevel: 0, |
| 6dd74de | | | 396 | fontFamily: 'courier', |
| 6dd74de | | | 397 | } |
| 6dd74de | | | 398 | ); |
| 6dd74de | | | 399 | }); |
| 6dd74de | | | 400 | it('v2 should handle multiple notes added to one state', () => { |
| 6dd74de | | | 401 | imgSnapshotTest( |
| 6dd74de | | | 402 | ` |
| 6dd74de | | | 403 | stateDiagram-v2 |
| 6dd74de | | | 404 | MyState |
| 6dd74de | | | 405 | note left of MyState : I am a lefty |
| 6dd74de | | | 406 | note right of MyState : I am a righty |
| 6dd74de | | | 407 | `, |
| 6dd74de | | | 408 | { |
| 6dd74de | | | 409 | logLevel: 0, |
| 6dd74de | | | 410 | fontFamily: 'courier', |
| 6dd74de | | | 411 | } |
| 6dd74de | | | 412 | ); |
| 6dd74de | | | 413 | }); |
| 6dd74de | | | 414 | it('v2 should handle different rendering directions in composite states', () => { |
| 6dd74de | | | 415 | imgSnapshotTest( |
| 6dd74de | | | 416 | ` |
| 6dd74de | | | 417 | stateDiagram-v2 |
| 6dd74de | | | 418 | direction LR |
| 6dd74de | | | 419 | state A { |
| 6dd74de | | | 420 | direction BT |
| 6dd74de | | | 421 | a --> b |
| 6dd74de | | | 422 | } |
| 6dd74de | | | 423 | state C { |
| 6dd74de | | | 424 | direction RL |
| 6dd74de | | | 425 | c --> d |
| 6dd74de | | | 426 | } |
| 6dd74de | | | 427 | A --> C |
| 6dd74de | | | 428 | `, |
| 6dd74de | | | 429 | { |
| 6dd74de | | | 430 | logLevel: 0, |
| 6dd74de | | | 431 | fontFamily: 'courier', |
| 6dd74de | | | 432 | } |
| 6dd74de | | | 433 | ); |
| 6dd74de | | | 434 | }); |
| 6dd74de | | | 435 | it('v2 handle transition from one state in a composite state to a composite state', () => { |
| 6dd74de | | | 436 | imgSnapshotTest( |
| 6dd74de | | | 437 | ` |
| 6dd74de | | | 438 | stateDiagram-v2 |
| 6dd74de | | | 439 | state S1 { |
| 6dd74de | | | 440 | sub1 -->sub2 |
| 6dd74de | | | 441 | } |
| 6dd74de | | | 442 | |
| 6dd74de | | | 443 | state S2 { |
| 6dd74de | | | 444 | sub4 |
| 6dd74de | | | 445 | } |
| 6dd74de | | | 446 | S1 --> S2 |
| 6dd74de | | | 447 | sub1 --> sub4 |
| 6dd74de | | | 448 | `, |
| 6dd74de | | | 449 | { |
| 6dd74de | | | 450 | logLevel: 0, |
| 6dd74de | | | 451 | fontFamily: 'courier', |
| 6dd74de | | | 452 | } |
| 6dd74de | | | 453 | ); |
| 6dd74de | | | 454 | }); |
| 6dd74de | | | 455 | it('v2 should render a state diagram when useMaxWidth is true (default)', () => { |
| 6dd74de | | | 456 | renderGraph( |
| 6dd74de | | | 457 | ` |
| 6dd74de | | | 458 | stateDiagram-v2 |
| 6dd74de | | | 459 | |
| 6dd74de | | | 460 | [*] --> State1 |
| 6dd74de | | | 461 | State1 --> [*] |
| 6dd74de | | | 462 | `, |
| 6dd74de | | | 463 | { state: { useMaxWidth: true } } |
| 6dd74de | | | 464 | ); |
| 6dd74de | | | 465 | cy.get('svg').should((svg) => { |
| 6dd74de | | | 466 | expect(svg).to.have.attr('width', '100%'); |
| 6dd74de | | | 467 | // expect(svg).to.have.attr('height'); |
| 6dd74de | | | 468 | // const height = parseFloat(svg.attr('height')); |
| 6dd74de | | | 469 | // expect(height).to.be.within(177, 178); |
| 6dd74de | | | 470 | const style = svg.attr('style'); |
| 6dd74de | | | 471 | expect(style).to.match(/^max-width: [\d.]+px;$/); |
| 6dd74de | | | 472 | const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); |
| 6dd74de | | | 473 | // use within because the absolute value can be slightly different depending on the environment ±5% |
| 6dd74de | | | 474 | expect(maxWidthValue).to.be.within(65, 85); |
| 6dd74de | | | 475 | }); |
| 6dd74de | | | 476 | }); |
| 6dd74de | | | 477 | it('v2 should render a state diagram when useMaxWidth is false', () => { |
| 6dd74de | | | 478 | renderGraph( |
| 6dd74de | | | 479 | ` |
| 6dd74de | | | 480 | stateDiagram-v2 |
| 6dd74de | | | 481 | |
| 6dd74de | | | 482 | [*] --> State1 |
| 6dd74de | | | 483 | State1 --> [*] |
| 6dd74de | | | 484 | `, |
| 6dd74de | | | 485 | { state: { useMaxWidth: false } } |
| 6dd74de | | | 486 | ); |
| 6dd74de | | | 487 | cy.get('svg').should((svg) => { |
| 6dd74de | | | 488 | // const height = parseFloat(svg.attr('height')); |
| 6dd74de | | | 489 | const width = parseFloat(svg.attr('width')); |
| 6dd74de | | | 490 | // expect(height).to.be.within(177, 178); |
| 6dd74de | | | 491 | // use within because the absolute value can be slightly different depending on the environment ±5% |
| 6dd74de | | | 492 | expect(width).to.be.within(65, 85); |
| 6dd74de | | | 493 | expect(svg).to.not.have.attr('style'); |
| 6dd74de | | | 494 | }); |
| 6dd74de | | | 495 | }); |
| 6dd74de | | | 496 | |
| 6dd74de | | | 497 | it('v2 should render a state diagram and set the correct length of the labels', () => { |
| 6dd74de | | | 498 | imgSnapshotTest( |
| 6dd74de | | | 499 | ` |
| 6dd74de | | | 500 | stateDiagram-v2 |
| 6dd74de | | | 501 | [*] --> 1 |
| 6dd74de | | | 502 | 1 --> 2: test({ foo#colon; 'far' }) |
| 6dd74de | | | 503 | 2 --> [*] |
| 6dd74de | | | 504 | `, |
| 6dd74de | | | 505 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 506 | ); |
| 6dd74de | | | 507 | }); |
| 6dd74de | | | 508 | |
| 6dd74de | | | 509 | describe('classDefs and applying classes', () => { |
| 6dd74de | | | 510 | it('v2 states can have a class applied', () => { |
| 6dd74de | | | 511 | imgSnapshotTest( |
| 6dd74de | | | 512 | ` |
| 6dd74de | | | 513 | stateDiagram-v2 |
| 6dd74de | | | 514 | [*] --> A |
| 6dd74de | | | 515 | A --> B: test({ foo#colon; 'far' }) |
| 6dd74de | | | 516 | B --> [*] |
| 6dd74de | | | 517 | classDef badBadEvent fill:#f00,color:white,font-weight:bold |
| 6dd74de | | | 518 | class B badBadEvent |
| 6dd74de | | | 519 | `, |
| 6dd74de | | | 520 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 521 | ); |
| 6dd74de | | | 522 | }); |
| 6dd74de | | | 523 | it('v2 can have multiple classes applied to multiple states', () => { |
| 6dd74de | | | 524 | imgSnapshotTest( |
| 6dd74de | | | 525 | ` |
| 6dd74de | | | 526 | stateDiagram-v2 |
| 6dd74de | | | 527 | classDef notMoving fill:white |
| 6dd74de | | | 528 | classDef movement font-style:italic; |
| 6dd74de | | | 529 | classDef badBadEvent fill:#f00,color:white,font-weight:bold |
| 6dd74de | | | 530 | |
| 6dd74de | | | 531 | [*] --> Still |
| 6dd74de | | | 532 | Still --> [*] |
| 6dd74de | | | 533 | Still --> Moving |
| 6dd74de | | | 534 | Moving --> Still |
| 6dd74de | | | 535 | Moving --> Crash |
| 6dd74de | | | 536 | Crash --> [*] |
| 6dd74de | | | 537 | |
| 6dd74de | | | 538 | class Still notMoving |
| 6dd74de | | | 539 | class Moving, Crash movement |
| 6dd74de | | | 540 | class Crash badBadEvent |
| 6dd74de | | | 541 | `, |
| 6dd74de | | | 542 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 543 | ); |
| 6dd74de | | | 544 | }); |
| 6dd74de | | | 545 | it(' can have styles applied ', () => { |
| 6dd74de | | | 546 | imgSnapshotTest( |
| 6dd74de | | | 547 | ` |
| 6dd74de | | | 548 | stateDiagram-v2 |
| 6dd74de | | | 549 | AState |
| 6dd74de | | | 550 | style AState fill:#636,border:1px solid red,color:white; |
| 6dd74de | | | 551 | `, |
| 6dd74de | | | 552 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 553 | ); |
| 6dd74de | | | 554 | }); |
| 6dd74de | | | 555 | it(' should let styles take precedence over classes', () => { |
| 6dd74de | | | 556 | imgSnapshotTest( |
| 6dd74de | | | 557 | ` |
| 6dd74de | | | 558 | stateDiagram-v2 |
| 6dd74de | | | 559 | AState: Should NOT be white |
| 6dd74de | | | 560 | BState |
| 6dd74de | | | 561 | classDef exampleStyleClass fill:#fff,color: blue; |
| 6dd74de | | | 562 | class AState,BState exampleStyleClass |
| 6dd74de | | | 563 | style AState fill:#636,border:1px solid red,color:white; |
| 6dd74de | | | 564 | `, |
| 6dd74de | | | 565 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 566 | ); |
| 6dd74de | | | 567 | }); |
| 6dd74de | | | 568 | it(' should allow styles to take effect in subgraphs', () => { |
| 6dd74de | | | 569 | imgSnapshotTest( |
| 6dd74de | | | 570 | ` |
| 6dd74de | | | 571 | stateDiagram |
| 6dd74de | | | 572 | state roundWithTitle { |
| 6dd74de | | | 573 | C: Black with white text |
| 6dd74de | | | 574 | } |
| 6dd74de | | | 575 | D: Black with white text |
| 6dd74de | | | 576 | |
| 6dd74de | | | 577 | style C,D stroke:#00f, fill:black, color:white |
| 6dd74de | | | 578 | `, |
| 6dd74de | | | 579 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 580 | ); |
| 6dd74de | | | 581 | }); |
| 6dd74de | | | 582 | }); |
| 6dd74de | | | 583 | it('1433: should render a simple state diagram with a title', () => { |
| 6dd74de | | | 584 | imgSnapshotTest( |
| 6dd74de | | | 585 | `--- |
| 6dd74de | | | 586 | title: simple state diagram |
| 6dd74de | | | 587 | --- |
| 6dd74de | | | 588 | stateDiagram-v2 |
| 6dd74de | | | 589 | [*] --> State1 |
| 6dd74de | | | 590 | State1 --> [*] |
| 6dd74de | | | 591 | `, |
| 6dd74de | | | 592 | {} |
| 6dd74de | | | 593 | ); |
| 6dd74de | | | 594 | }); |
| 6dd74de | | | 595 | it('should align dividers correctly', () => { |
| 6dd74de | | | 596 | imgSnapshotTest( |
| 6dd74de | | | 597 | `stateDiagram-v2 |
| 6dd74de | | | 598 | state s2 { |
| 6dd74de | | | 599 | s3 |
| 6dd74de | | | 600 | -- |
| 6dd74de | | | 601 | s4 |
| 6dd74de | | | 602 | -- |
| 6dd74de | | | 603 | 55 |
| 6dd74de | | | 604 | } |
| 6dd74de | | | 605 | `, |
| 6dd74de | | | 606 | {} |
| 6dd74de | | | 607 | ); |
| 6dd74de | | | 608 | }); |
| 6dd74de | | | 609 | it('should render edge labels correctly', () => { |
| 6dd74de | | | 610 | imgSnapshotTest( |
| 6dd74de | | | 611 | `--- |
| 6dd74de | | | 612 | title: On The Way To Something Something DarkSide |
| 6dd74de | | | 613 | config: |
| 6dd74de | | | 614 | look: default |
| 6dd74de | | | 615 | theme: default |
| 6dd74de | | | 616 | --- |
| 6dd74de | | | 617 | |
| 6dd74de | | | 618 | stateDiagram-v2 |
| 6dd74de | | | 619 | |
| 6dd74de | | | 620 | state State1_____________ |
| 6dd74de | | | 621 | { |
| 6dd74de | | | 622 | c0 |
| 6dd74de | | | 623 | } |
| 6dd74de | | | 624 | |
| 6dd74de | | | 625 | state State2_____________ |
| 6dd74de | | | 626 | { |
| 6dd74de | | | 627 | c1 |
| 6dd74de | | | 628 | } |
| 6dd74de | | | 629 | |
| 6dd74de | | | 630 | state State3_____________ |
| 6dd74de | | | 631 | { |
| 6dd74de | | | 632 | c7 |
| 6dd74de | | | 633 | } |
| 6dd74de | | | 634 | |
| 6dd74de | | | 635 | state State4_____________ |
| 6dd74de | | | 636 | { |
| 6dd74de | | | 637 | c2 |
| 6dd74de | | | 638 | } |
| 6dd74de | | | 639 | |
| 6dd74de | | | 640 | state State5_____________ |
| 6dd74de | | | 641 | { |
| 6dd74de | | | 642 | c3 |
| 6dd74de | | | 643 | } |
| 6dd74de | | | 644 | |
| 6dd74de | | | 645 | state State6_____________ |
| 6dd74de | | | 646 | { |
| 6dd74de | | | 647 | c4 |
| 6dd74de | | | 648 | } |
| 6dd74de | | | 649 | |
| 6dd74de | | | 650 | state State7_____________ |
| 6dd74de | | | 651 | { |
| 6dd74de | | | 652 | c5 |
| 6dd74de | | | 653 | } |
| 6dd74de | | | 654 | |
| 6dd74de | | | 655 | state State8_____________ |
| 6dd74de | | | 656 | { |
| 6dd74de | | | 657 | c6 |
| 6dd74de | | | 658 | } |
| 6dd74de | | | 659 | |
| 6dd74de | | | 660 | |
| 6dd74de | | | 661 | [*] --> State1_____________ |
| 6dd74de | | | 662 | State1_____________ --> State2_____________ : Transition1_____ |
| 6dd74de | | | 663 | State2_____________ --> State4_____________ : Transition2_____ |
| 6dd74de | | | 664 | State2_____________ --> State3_____________ : Transition3_____ |
| 6dd74de | | | 665 | State3_____________ --> State2_____________ |
| 6dd74de | | | 666 | State4_____________ --> State2_____________ : Transition5_____ |
| 6dd74de | | | 667 | State4_____________ --> State5_____________ : Transition6_____ |
| 6dd74de | | | 668 | State5_____________ --> State6_____________ : Transition7_____ |
| 6dd74de | | | 669 | State6_____________ --> State4_____________ : Transition8_____ |
| 6dd74de | | | 670 | State2_____________ --> State7_____________ : Transition4_____ |
| 6dd74de | | | 671 | State4_____________ --> State7_____________ : Transition4_____ |
| 6dd74de | | | 672 | State5_____________ --> State7_____________ : Transition4_____ |
| 6dd74de | | | 673 | State6_____________ --> State7_____________ : Transition4_____ |
| 6dd74de | | | 674 | State7_____________ --> State1_____________ : Transition9_____ |
| 6dd74de | | | 675 | State5_____________ --> State8_____________ : Transition10____ |
| 6dd74de | | | 676 | State8_____________ --> State5_____________ : Transition11____ |
| 6dd74de | | | 677 | `, |
| 6dd74de | | | 678 | {} |
| 6dd74de | | | 679 | ); |
| 6dd74de | | | 680 | }); |
| 6dd74de | | | 681 | it('should render edge labels correctly with multiple transitions', () => { |
| 6dd74de | | | 682 | imgSnapshotTest( |
| 6dd74de | | | 683 | `--- |
| 6dd74de | | | 684 | title: Multiple Transitions |
| 6dd74de | | | 685 | config: |
| 6dd74de | | | 686 | look: default |
| 6dd74de | | | 687 | theme: default |
| 6dd74de | | | 688 | --- |
| 6dd74de | | | 689 | |
| 6dd74de | | | 690 | stateDiagram-v2 |
| 6dd74de | | | 691 | |
| 6dd74de | | | 692 | state State1_____________ |
| 6dd74de | | | 693 | { |
| 6dd74de | | | 694 | c0 |
| 6dd74de | | | 695 | } |
| 6dd74de | | | 696 | |
| 6dd74de | | | 697 | state State2_____________ |
| 6dd74de | | | 698 | { |
| 6dd74de | | | 699 | c1 |
| 6dd74de | | | 700 | } |
| 6dd74de | | | 701 | |
| 6dd74de | | | 702 | state State3_____________ |
| 6dd74de | | | 703 | { |
| 6dd74de | | | 704 | c7 |
| 6dd74de | | | 705 | } |
| 6dd74de | | | 706 | |
| 6dd74de | | | 707 | state State4_____________ |
| 6dd74de | | | 708 | { |
| 6dd74de | | | 709 | c2 |
| 6dd74de | | | 710 | } |
| 6dd74de | | | 711 | |
| 6dd74de | | | 712 | state State5_____________ |
| 6dd74de | | | 713 | { |
| 6dd74de | | | 714 | c3 |
| 6dd74de | | | 715 | } |
| 6dd74de | | | 716 | |
| 6dd74de | | | 717 | state State6_____________ |
| 6dd74de | | | 718 | { |
| 6dd74de | | | 719 | c4 |
| 6dd74de | | | 720 | } |
| 6dd74de | | | 721 | |
| 6dd74de | | | 722 | state State7_____________ |
| 6dd74de | | | 723 | { |
| 6dd74de | | | 724 | c5 |
| 6dd74de | | | 725 | } |
| 6dd74de | | | 726 | |
| 6dd74de | | | 727 | state State8_____________ |
| 6dd74de | | | 728 | { |
| 6dd74de | | | 729 | c6 |
| 6dd74de | | | 730 | } |
| 6dd74de | | | 731 | |
| 6dd74de | | | 732 | state State9_____________ |
| 6dd74de | | | 733 | { |
| 6dd74de | | | 734 | c9 |
| 6dd74de | | | 735 | } |
| 6dd74de | | | 736 | |
| 6dd74de | | | 737 | [*] --> State1_____________ |
| 6dd74de | | | 738 | State1_____________ --> State2_____________ : Transition1_____ |
| 6dd74de | | | 739 | State2_____________ --> State4_____________ : Transition2_____ |
| 6dd74de | | | 740 | State2_____________ --> State3_____________ : Transition3_____ |
| 6dd74de | | | 741 | State3_____________ --> State2_____________ |
| 6dd74de | | | 742 | State4_____________ --> State2_____________ : Transition5_____ |
| 6dd74de | | | 743 | State4_____________ --> State5_____________ : Transition6_____ |
| 6dd74de | | | 744 | State5_____________ --> State6_____________ : Transition7_____ |
| 6dd74de | | | 745 | State6_____________ --> State4_____________ : Transition8_____ |
| 6dd74de | | | 746 | State2_____________ --> State7_____________ : Transition4_____ |
| 6dd74de | | | 747 | State4_____________ --> State7_____________ : Transition4_____ |
| 6dd74de | | | 748 | State5_____________ --> State7_____________ : Transition4_____ |
| 6dd74de | | | 749 | State6_____________ --> State7_____________ : Transition4_____ |
| 6dd74de | | | 750 | State7_____________ --> State1_____________ : Transition9_____ |
| 6dd74de | | | 751 | State5_____________ --> State8_____________ : Transition10____ |
| 6dd74de | | | 752 | State8_____________ --> State5_____________ : Transition11____ |
| 6dd74de | | | 753 | State9_____________ --> State8_____________ : Transition12____ |
| 6dd74de | | | 754 | `, |
| 6dd74de | | | 755 | {} |
| 6dd74de | | | 756 | ); |
| 6dd74de | | | 757 | }); |
| 6dd74de | | | 758 | |
| 6dd74de | | | 759 | it('should render edge labels correctly with multiple states', () => { |
| 6dd74de | | | 760 | imgSnapshotTest( |
| 6dd74de | | | 761 | `--- |
| 6dd74de | | | 762 | title: Multiple States |
| 6dd74de | | | 763 | config: |
| 6dd74de | | | 764 | look: default |
| 6dd74de | | | 765 | theme: default |
| 6dd74de | | | 766 | --- |
| 6dd74de | | | 767 | |
| 6dd74de | | | 768 | stateDiagram-v2 |
| 6dd74de | | | 769 | |
| 6dd74de | | | 770 | state State1_____________ |
| 6dd74de | | | 771 | { |
| 6dd74de | | | 772 | c0 |
| 6dd74de | | | 773 | } |
| 6dd74de | | | 774 | |
| 6dd74de | | | 775 | state State2_____________ |
| 6dd74de | | | 776 | { |
| 6dd74de | | | 777 | c1 |
| 6dd74de | | | 778 | } |
| 6dd74de | | | 779 | |
| 6dd74de | | | 780 | state State3_____________ |
| 6dd74de | | | 781 | { |
| 6dd74de | | | 782 | c7 |
| 6dd74de | | | 783 | } |
| 6dd74de | | | 784 | |
| 6dd74de | | | 785 | state State4_____________ |
| 6dd74de | | | 786 | { |
| 6dd74de | | | 787 | c2 |
| 6dd74de | | | 788 | } |
| 6dd74de | | | 789 | |
| 6dd74de | | | 790 | state State5_____________ |
| 6dd74de | | | 791 | { |
| 6dd74de | | | 792 | c3 |
| 6dd74de | | | 793 | } |
| 6dd74de | | | 794 | |
| 6dd74de | | | 795 | state State6_____________ |
| 6dd74de | | | 796 | { |
| 6dd74de | | | 797 | c4 |
| 6dd74de | | | 798 | } |
| 6dd74de | | | 799 | |
| 6dd74de | | | 800 | state State7_____________ |
| 6dd74de | | | 801 | { |
| 6dd74de | | | 802 | c5 |
| 6dd74de | | | 803 | } |
| 6dd74de | | | 804 | |
| 6dd74de | | | 805 | state State8_____________ |
| 6dd74de | | | 806 | { |
| 6dd74de | | | 807 | c6 |
| 6dd74de | | | 808 | } |
| 6dd74de | | | 809 | |
| 6dd74de | | | 810 | state State9_____________ |
| 6dd74de | | | 811 | { |
| 6dd74de | | | 812 | c9 |
| 6dd74de | | | 813 | } |
| 6dd74de | | | 814 | |
| 6dd74de | | | 815 | state State10_____________ |
| 6dd74de | | | 816 | { |
| 6dd74de | | | 817 | c10 |
| 6dd74de | | | 818 | } |
| 6dd74de | | | 819 | |
| 6dd74de | | | 820 | [*] --> State1_____________ |
| 6dd74de | | | 821 | State1_____________ --> State2_____________ : Transition1_____ |
| 6dd74de | | | 822 | State2_____________ --> State3_____________ : Transition2_____ |
| 6dd74de | | | 823 | State3_____________ --> State4_____________ : Transition3_____ |
| 6dd74de | | | 824 | State4_____________ --> State5_____________ : Transition4_____ |
| 6dd74de | | | 825 | State5_____________ --> State6_____________ : Transition5_____ |
| 6dd74de | | | 826 | State6_____________ --> State7_____________ : Transition6_____ |
| 6dd74de | | | 827 | State7_____________ --> State8_____________ : Transition7_____ |
| 6dd74de | | | 828 | State8_____________ --> State9_____________ : Transition8_____ |
| 6dd74de | | | 829 | State9_____________ --> State10_____________ : Transition9_____ |
| 6dd74de | | | 830 | `, |
| 6dd74de | | | 831 | {} |
| 6dd74de | | | 832 | ); |
| 6dd74de | | | 833 | }); |
| 6dd74de | | | 834 | }); |