| 6dd74de | | | 1 | import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; |
| 6dd74de | | | 2 | |
| 6dd74de | | | 3 | describe('State diagram', () => { |
| 6dd74de | | | 4 | it('should render a simple state diagrams', () => { |
| 6dd74de | | | 5 | imgSnapshotTest( |
| 6dd74de | | | 6 | ` |
| 6dd74de | | | 7 | stateDiagram |
| 6dd74de | | | 8 | [*] --> State1 |
| 6dd74de | | | 9 | State1 --> [*] |
| 6dd74de | | | 10 | `, |
| 6dd74de | | | 11 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 12 | ); |
| 6dd74de | | | 13 | }); |
| 6dd74de | | | 14 | it('should render a long descriptions instead of id when available', () => { |
| 6dd74de | | | 15 | imgSnapshotTest( |
| 6dd74de | | | 16 | ` |
| 6dd74de | | | 17 | stateDiagram |
| 6dd74de | | | 18 | |
| 6dd74de | | | 19 | [*] --> S1 |
| 6dd74de | | | 20 | state "Some long name" as S1 |
| 6dd74de | | | 21 | `, |
| 6dd74de | | | 22 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 23 | ); |
| 6dd74de | | | 24 | }); |
| 6dd74de | | | 25 | it('should render a long descriptions with additional descriptions', () => { |
| 6dd74de | | | 26 | imgSnapshotTest( |
| 6dd74de | | | 27 | ` |
| 6dd74de | | | 28 | stateDiagram |
| 6dd74de | | | 29 | |
| 6dd74de | | | 30 | [*] --> S1 |
| 6dd74de | | | 31 | state "Some long name" as S1: The description |
| 6dd74de | | | 32 | `, |
| 6dd74de | | | 33 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 34 | ); |
| 6dd74de | | | 35 | }); |
| 6dd74de | | | 36 | it('should render a single state with short descriptions', () => { |
| 6dd74de | | | 37 | imgSnapshotTest( |
| 6dd74de | | | 38 | ` |
| 6dd74de | | | 39 | stateDiagram |
| 6dd74de | | | 40 | state "A long long name" as long1 |
| 6dd74de | | | 41 | state "A" as longlonglongid |
| 6dd74de | | | 42 | `, |
| 6dd74de | | | 43 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 44 | ); |
| 6dd74de | | | 45 | }); |
| 6dd74de | | | 46 | it('should render a transition descriptions with new lines', () => { |
| 6dd74de | | | 47 | imgSnapshotTest( |
| 6dd74de | | | 48 | ` |
| 6dd74de | | | 49 | stateDiagram |
| 6dd74de | | | 50 | |
| 6dd74de | | | 51 | [*] --> S1 |
| 6dd74de | | | 52 | S1 --> S2: long line using<br/>should work |
| 6dd74de | | | 53 | S1 --> S3: long line using <br>should work |
| 6dd74de | | | 54 | S1 --> S4: long line using \\nshould work |
| 6dd74de | | | 55 | `, |
| 6dd74de | | | 56 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 57 | ); |
| 6dd74de | | | 58 | }); |
| 6dd74de | | | 59 | it('should render a state with a note', () => { |
| 6dd74de | | | 60 | imgSnapshotTest( |
| 6dd74de | | | 61 | ` |
| 6dd74de | | | 62 | stateDiagram |
| 6dd74de | | | 63 | State1: The state with a note |
| 6dd74de | | | 64 | note right of State1 |
| 6dd74de | | | 65 | Important information! You can write |
| 6dd74de | | | 66 | notes. |
| 6dd74de | | | 67 | end note |
| 6dd74de | | | 68 | `, |
| 6dd74de | | | 69 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 70 | ); |
| 6dd74de | | | 71 | }); |
| 6dd74de | | | 72 | it('should render a state with on the left side when so specified', () => { |
| 6dd74de | | | 73 | imgSnapshotTest( |
| 6dd74de | | | 74 | ` |
| 6dd74de | | | 75 | stateDiagram |
| 6dd74de | | | 76 | State1: The state with a note with minus - and plus + in it |
| 6dd74de | | | 77 | note left of State1 |
| 6dd74de | | | 78 | Important information! You can write |
| 6dd74de | | | 79 | notes with . and in them. |
| 6dd74de | | | 80 | end note |
| 6dd74de | | | 81 | `, |
| 6dd74de | | | 82 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 83 | ); |
| 6dd74de | | | 84 | }); |
| 6dd74de | | | 85 | it('should render a state with a note together with another state', () => { |
| 6dd74de | | | 86 | imgSnapshotTest( |
| 6dd74de | | | 87 | ` |
| 6dd74de | | | 88 | stateDiagram |
| 6dd74de | | | 89 | State1: The state with a note +,- |
| 6dd74de | | | 90 | note right of State1 |
| 6dd74de | | | 91 | Important information! You can write +,- |
| 6dd74de | | | 92 | notes. |
| 6dd74de | | | 93 | end note |
| 6dd74de | | | 94 | State1 --> State2 : With +,- |
| 6dd74de | | | 95 | note left of State2 : This is the note +,-<br/> |
| 6dd74de | | | 96 | `, |
| 6dd74de | | | 97 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 98 | ); |
| 6dd74de | | | 99 | }); |
| 6dd74de | | | 100 | it('should render a note with multiple lines in it', () => { |
| 6dd74de | | | 101 | imgSnapshotTest( |
| 6dd74de | | | 102 | ` |
| 6dd74de | | | 103 | stateDiagram |
| 6dd74de | | | 104 | State1: The state with a note |
| 6dd74de | | | 105 | note right of State1 |
| 6dd74de | | | 106 | Important information! You\ncan write |
| 6dd74de | | | 107 | notes with multiple lines... |
| 6dd74de | | | 108 | Here is another line... |
| 6dd74de | | | 109 | And another line... |
| 6dd74de | | | 110 | end note |
| 6dd74de | | | 111 | `, |
| 6dd74de | | | 112 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 113 | ); |
| 6dd74de | | | 114 | }); |
| 6dd74de | | | 115 | it('should handle multiline notes with different line breaks', () => { |
| 6dd74de | | | 116 | imgSnapshotTest( |
| 6dd74de | | | 117 | ` |
| 6dd74de | | | 118 | stateDiagram |
| 6dd74de | | | 119 | State1 |
| 6dd74de | | | 120 | note right of State1 |
| 6dd74de | | | 121 | Line1<br>Line2<br/>Line3<br />Line4<br />Line5 |
| 6dd74de | | | 122 | end note |
| 6dd74de | | | 123 | `, |
| 6dd74de | | | 124 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 125 | ); |
| 6dd74de | | | 126 | }); |
| 6dd74de | | | 127 | |
| 6dd74de | | | 128 | it('should render a states with descriptions including multi-line descriptions', () => { |
| 6dd74de | | | 129 | imgSnapshotTest( |
| 6dd74de | | | 130 | ` |
| 6dd74de | | | 131 | stateDiagram |
| 6dd74de | | | 132 | State1: This a single line description |
| 6dd74de | | | 133 | State2: This a multi line description |
| 6dd74de | | | 134 | State2: here comes the multi part |
| 6dd74de | | | 135 | [*] --> State1 |
| 6dd74de | | | 136 | State1 --> State2 |
| 6dd74de | | | 137 | State2 --> [*] |
| 6dd74de | | | 138 | `, |
| 6dd74de | | | 139 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 140 | ); |
| 6dd74de | | | 141 | }); |
| 6dd74de | | | 142 | it('should render a simple state diagrams 2', () => { |
| 6dd74de | | | 143 | imgSnapshotTest( |
| 6dd74de | | | 144 | ` |
| 6dd74de | | | 145 | stateDiagram |
| 6dd74de | | | 146 | [*] --> State1 |
| 6dd74de | | | 147 | State1 --> State2 |
| 6dd74de | | | 148 | State1 --> State3 |
| 6dd74de | | | 149 | State1 --> [*] |
| 6dd74de | | | 150 | `, |
| 6dd74de | | | 151 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 152 | ); |
| 6dd74de | | | 153 | }); |
| 6dd74de | | | 154 | it('should render a simple state diagrams with labels', () => { |
| 6dd74de | | | 155 | imgSnapshotTest( |
| 6dd74de | | | 156 | ` |
| 6dd74de | | | 157 | stateDiagram |
| 6dd74de | | | 158 | [*] --> State1 |
| 6dd74de | | | 159 | State1 --> State2 : Transition 1 |
| 6dd74de | | | 160 | State1 --> State3 : Transition 2 |
| 6dd74de | | | 161 | State1 --> State4 : Transition 3 |
| 6dd74de | | | 162 | State1 --> State5 : Transition 4 |
| 6dd74de | | | 163 | State2 --> State3 : Transition 5 |
| 6dd74de | | | 164 | State1 --> [*] |
| 6dd74de | | | 165 | `, |
| 6dd74de | | | 166 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 167 | ); |
| 6dd74de | | | 168 | }); |
| 6dd74de | | | 169 | it('should render state descriptions', () => { |
| 6dd74de | | | 170 | imgSnapshotTest( |
| 6dd74de | | | 171 | ` |
| 6dd74de | | | 172 | stateDiagram |
| 6dd74de | | | 173 | state "Long state description" as XState1 |
| 6dd74de | | | 174 | state "Another Long state description" as XState2 |
| 6dd74de | | | 175 | XState2 : New line |
| 6dd74de | | | 176 | XState1 --> XState2 |
| 6dd74de | | | 177 | `, |
| 6dd74de | | | 178 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 179 | ); |
| 6dd74de | | | 180 | }); |
| 6dd74de | | | 181 | it('should render composite states', () => { |
| 6dd74de | | | 182 | imgSnapshotTest( |
| 6dd74de | | | 183 | ` |
| 6dd74de | | | 184 | stateDiagram |
| 6dd74de | | | 185 | [*] --> NotShooting: Pacifist |
| 6dd74de | | | 186 | NotShooting --> A |
| 6dd74de | | | 187 | NotShooting --> B |
| 6dd74de | | | 188 | NotShooting --> C |
| 6dd74de | | | 189 | |
| 6dd74de | | | 190 | state NotShooting { |
| 6dd74de | | | 191 | [*] --> Idle: Yet another long long öong öong öong label |
| 6dd74de | | | 192 | Idle --> Configuring : EvConfig |
| 6dd74de | | | 193 | Configuring --> Idle : EvConfig EvConfig EvConfig EvConfig EvConfig |
| 6dd74de | | | 194 | } |
| 6dd74de | | | 195 | `, |
| 6dd74de | | | 196 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 197 | ); |
| 6dd74de | | | 198 | }); |
| 6dd74de | | | 199 | it('should render multiple composit states', () => { |
| 6dd74de | | | 200 | imgSnapshotTest( |
| 6dd74de | | | 201 | ` |
| 6dd74de | | | 202 | stateDiagram |
| 6dd74de | | | 203 | [*]-->TV |
| 6dd74de | | | 204 | |
| 6dd74de | | | 205 | state TV { |
| 6dd74de | | | 206 | [*] --> Off: Off to start with |
| 6dd74de | | | 207 | On --> Off : Turn off |
| 6dd74de | | | 208 | Off --> On : Turn on |
| 6dd74de | | | 209 | } |
| 6dd74de | | | 210 | |
| 6dd74de | | | 211 | TV--> Console |
| 6dd74de | | | 212 | |
| 6dd74de | | | 213 | state Console { |
| 6dd74de | | | 214 | [*] --> Off2: Off to start with |
| 6dd74de | | | 215 | On2--> Off2 : Turn off |
| 6dd74de | | | 216 | Off2 --> On2 : Turn on |
| 6dd74de | | | 217 | On2-->Playing |
| 6dd74de | | | 218 | |
| 6dd74de | | | 219 | state Playing { |
| 6dd74de | | | 220 | Alive --> Dead |
| 6dd74de | | | 221 | Dead-->Alive |
| 6dd74de | | | 222 | } |
| 6dd74de | | | 223 | } |
| 6dd74de | | | 224 | `, |
| 6dd74de | | | 225 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 226 | ); |
| 6dd74de | | | 227 | }); |
| 6dd74de | | | 228 | it('should render forks in composit states', () => { |
| 6dd74de | | | 229 | imgSnapshotTest( |
| 6dd74de | | | 230 | ` |
| 6dd74de | | | 231 | stateDiagram |
| 6dd74de | | | 232 | [*]-->TV |
| 6dd74de | | | 233 | |
| 6dd74de | | | 234 | state TV { |
| 6dd74de | | | 235 | state fork_state <<fork>> |
| 6dd74de | | | 236 | [*] --> fork_state |
| 6dd74de | | | 237 | fork_state --> State2 |
| 6dd74de | | | 238 | fork_state --> State3 |
| 6dd74de | | | 239 | |
| 6dd74de | | | 240 | state join_state <<join>> |
| 6dd74de | | | 241 | State2 --> join_state |
| 6dd74de | | | 242 | State3 --> join_state |
| 6dd74de | | | 243 | join_state --> State4 |
| 6dd74de | | | 244 | State4 --> [*] |
| 6dd74de | | | 245 | } |
| 6dd74de | | | 246 | `, |
| 6dd74de | | | 247 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 248 | ); |
| 6dd74de | | | 249 | }); |
| 6dd74de | | | 250 | it('should render forks and joins', () => { |
| 6dd74de | | | 251 | imgSnapshotTest( |
| 6dd74de | | | 252 | ` |
| 6dd74de | | | 253 | stateDiagram |
| 6dd74de | | | 254 | state fork_state <<fork>> |
| 6dd74de | | | 255 | [*] --> fork_state |
| 6dd74de | | | 256 | fork_state --> State2 |
| 6dd74de | | | 257 | fork_state --> State3 |
| 6dd74de | | | 258 | |
| 6dd74de | | | 259 | state join_state <<join>> |
| 6dd74de | | | 260 | State2 --> join_state |
| 6dd74de | | | 261 | State3 --> join_state |
| 6dd74de | | | 262 | join_state --> State4 |
| 6dd74de | | | 263 | State4 --> [*] |
| 6dd74de | | | 264 | `, |
| 6dd74de | | | 265 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 266 | ); |
| 6dd74de | | | 267 | }); |
| 6dd74de | | | 268 | it('should render concurrency states', () => { |
| 6dd74de | | | 269 | imgSnapshotTest( |
| 6dd74de | | | 270 | ` |
| 6dd74de | | | 271 | stateDiagram |
| 6dd74de | | | 272 | [*] --> Active |
| 6dd74de | | | 273 | |
| 6dd74de | | | 274 | state Active { |
| 6dd74de | | | 275 | [*] --> NumLockOff |
| 6dd74de | | | 276 | NumLockOff --> NumLockOn : EvNumLockPressed |
| 6dd74de | | | 277 | NumLockOn --> NumLockOff : EvNumLockPressed |
| 6dd74de | | | 278 | -- |
| 6dd74de | | | 279 | [*] --> CapsLockOff |
| 6dd74de | | | 280 | CapsLockOff --> CapsLockOn : EvCapsLockPressed |
| 6dd74de | | | 281 | CapsLockOn --> CapsLockOff : EvCapsLockPressed |
| 6dd74de | | | 282 | -- |
| 6dd74de | | | 283 | [*] --> ScrollLockOff |
| 6dd74de | | | 284 | ScrollLockOff --> ScrollLockOn : EvCapsLockPressed |
| 6dd74de | | | 285 | ScrollLockOn --> ScrollLockOff : EvCapsLockPressed |
| 6dd74de | | | 286 | } |
| 6dd74de | | | 287 | `, |
| 6dd74de | | | 288 | { logLevel: 0, fontFamily: 'courier' } |
| 6dd74de | | | 289 | ); |
| 6dd74de | | | 290 | }); |
| 6dd74de | | | 291 | it('should render a state with states in it', () => { |
| 6dd74de | | | 292 | imgSnapshotTest( |
| 6dd74de | | | 293 | ` |
| 6dd74de | | | 294 | stateDiagram |
| 6dd74de | | | 295 | state PilotCockpit { |
| 6dd74de | | | 296 | state Parent { |
| 6dd74de | | | 297 | C |
| 6dd74de | | | 298 | } |
| 6dd74de | | | 299 | } |
| 6dd74de | | | 300 | `, |
| 6dd74de | | | 301 | { |
| 6dd74de | | | 302 | logLevel: 0, |
| 6dd74de | | | 303 | fontFamily: 'courier', |
| 6dd74de | | | 304 | } |
| 6dd74de | | | 305 | ); |
| 6dd74de | | | 306 | }); |
| 6dd74de | | | 307 | it('Simplest composite state', () => { |
| 6dd74de | | | 308 | imgSnapshotTest( |
| 6dd74de | | | 309 | ` |
| 6dd74de | | | 310 | stateDiagram |
| 6dd74de | | | 311 | state Parent { |
| 6dd74de | | | 312 | C |
| 6dd74de | | | 313 | } |
| 6dd74de | | | 314 | `, |
| 6dd74de | | | 315 | { |
| 6dd74de | | | 316 | logLevel: 0, |
| 6dd74de | | | 317 | fontFamily: 'courier', |
| 6dd74de | | | 318 | } |
| 6dd74de | | | 319 | ); |
| 6dd74de | | | 320 | }); |
| 6dd74de | | | 321 | it('should handle multiple arrows from one node to another', () => { |
| 6dd74de | | | 322 | imgSnapshotTest( |
| 6dd74de | | | 323 | ` |
| 6dd74de | | | 324 | stateDiagram |
| 6dd74de | | | 325 | a --> b: Start |
| 6dd74de | | | 326 | a --> b: Stop |
| 6dd74de | | | 327 | `, |
| 6dd74de | | | 328 | { |
| 6dd74de | | | 329 | logLevel: 0, |
| 6dd74de | | | 330 | fontFamily: 'courier', |
| 6dd74de | | | 331 | } |
| 6dd74de | | | 332 | ); |
| 6dd74de | | | 333 | }); |
| 6dd74de | | | 334 | it('should render a state diagram when useMaxWidth is true (default)', () => { |
| 6dd74de | | | 335 | renderGraph( |
| 6dd74de | | | 336 | ` |
| 6dd74de | | | 337 | stateDiagram |
| 6dd74de | | | 338 | [*] --> State1 |
| 6dd74de | | | 339 | State1 --> [*] |
| 6dd74de | | | 340 | `, |
| 6dd74de | | | 341 | { state: { useMaxWidth: true } } |
| 6dd74de | | | 342 | ); |
| 6dd74de | | | 343 | cy.get('svg').should((svg) => { |
| 6dd74de | | | 344 | expect(svg).to.have.attr('width', '100%'); |
| 6dd74de | | | 345 | // expect(svg).to.have.attr('height'); |
| 6dd74de | | | 346 | // const height = parseFloat(svg.attr('height')); |
| 6dd74de | | | 347 | // expect(height).to.be.within(176, 178); |
| 6dd74de | | | 348 | const style = svg.attr('style'); |
| 6dd74de | | | 349 | expect(style).to.match(/^max-width: [\d.]+px;$/); |
| 6dd74de | | | 350 | const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); |
| 6dd74de | | | 351 | // use within because the absolute value can be slightly different depending on the environment ±5% |
| 6dd74de | | | 352 | // Todo investigate difference |
| 6dd74de | | | 353 | // expect(maxWidthValue).to.be.within(112 * .95, 112 * 1.05); |
| 6dd74de | | | 354 | expect(maxWidthValue).to.be.within(65, 85); |
| 6dd74de | | | 355 | }); |
| 6dd74de | | | 356 | }); |
| 6dd74de | | | 357 | it('should render a state diagram when useMaxWidth is false', () => { |
| 6dd74de | | | 358 | renderGraph( |
| 6dd74de | | | 359 | ` |
| 6dd74de | | | 360 | stateDiagram |
| 6dd74de | | | 361 | [*] --> State1 |
| 6dd74de | | | 362 | State1 --> [*] |
| 6dd74de | | | 363 | `, |
| 6dd74de | | | 364 | { state: { useMaxWidth: false } } |
| 6dd74de | | | 365 | ); |
| 6dd74de | | | 366 | cy.get('svg').should((svg) => { |
| 6dd74de | | | 367 | // const height = parseFloat(svg.attr('height')); |
| 6dd74de | | | 368 | const width = parseFloat(svg.attr('width')); |
| 6dd74de | | | 369 | // expect(height).to.be.within(176, 178); |
| 6dd74de | | | 370 | // use within because the absolute value can be slightly different depending on the environment ±5% |
| 6dd74de | | | 371 | // Todo investigate difference |
| 6dd74de | | | 372 | // expect(width).to.be.within(112 * .95, 112 * 1.05); |
| 6dd74de | | | 373 | expect(width).to.be.within(65, 85); |
| 6dd74de | | | 374 | |
| 6dd74de | | | 375 | expect(svg).to.not.have.attr('style'); |
| 6dd74de | | | 376 | }); |
| 6dd74de | | | 377 | }); |
| 6dd74de | | | 378 | }); |