collab/mermaid/cypress/integration/rendering/sequencediagram.spec.jsblame
View source
6dd74de1import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
6dd74de2
6dd74de3describe('Sequence diagram', () => {
6dd74de4 it('should render a sequence diagram with boxes', () => {
6dd74de5 renderGraph(
6dd74de6 `
6dd74de7 sequenceDiagram
6dd74de8 box LightGrey Alice and Bob
6dd74de9 participant Alice
6dd74de10 participant Bob
6dd74de11 end
6dd74de12 participant John as John<br/>Second Line
6dd74de13 Alice ->> Bob: Hello Bob, how are you?
6dd74de14 Bob-->>John: How about you John?
6dd74de15 Bob--x Alice: I am good thanks!
6dd74de16 Bob-x John: I am good thanks!
6dd74de17 Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
6dd74de18 Bob-->Alice: Checking with John...
6dd74de19 alt either this
6dd74de20 Alice->>John: Yes
6dd74de21 else or this
6dd74de22 Alice->>John: No
6dd74de23 else or this will happen
6dd74de24 Alice->John: Maybe
6dd74de25 end
6dd74de26 par this happens in parallel
6dd74de27 Alice -->> Bob: Parallel message 1
6dd74de28 and
6dd74de29 Alice -->> John: Parallel message 2
6dd74de30 end
6dd74de31 `,
6dd74de32 { sequence: { useMaxWidth: false } }
6dd74de33 );
6dd74de34 cy.get('svg').should((svg) => {
6dd74de35 const width = parseFloat(svg.attr('width'));
6dd74de36 expect(width).to.be.within(830 * 0.95, 830 * 1.05);
6dd74de37 expect(svg).to.not.have.attr('style');
6dd74de38 });
6dd74de39 });
6dd74de40 it('should render a simple sequence diagram', () => {
6dd74de41 imgSnapshotTest(
6dd74de42 `
6dd74de43 sequenceDiagram
6dd74de44 participant Alice
6dd74de45 participant Bob
6dd74de46 participant John as John<br/>Second Line
6dd74de47 Alice ->> Bob: Hello Bob, how are you?
6dd74de48 Bob-->>John: How about you John?
6dd74de49 Bob--x Alice: I am good thanks!
6dd74de50 Bob-x John: I am good thanks!
6dd74de51 Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
6dd74de52 Bob-->Alice: Checking with John...
6dd74de53 alt either this
6dd74de54 Alice->>John: Yes
6dd74de55 else or this
6dd74de56 Alice->>John: No
6dd74de57 else or this will happen
6dd74de58 Alice->John: Maybe
6dd74de59 end
6dd74de60 par this happens in parallel
6dd74de61 Alice -->> Bob: Parallel message 1
6dd74de62 and
6dd74de63 Alice -->> John: Parallel message 2
6dd74de64 end
6dd74de65 `,
6dd74de66 { sequence: { actorFontFamily: 'courier' } }
6dd74de67 );
6dd74de68 });
6dd74de69 it('should render bidirectional arrows', () => {
6dd74de70 imgSnapshotTest(
6dd74de71 `
6dd74de72 sequenceDiagram
6dd74de73 Alice<<->>John: Hello John, how are you?
6dd74de74 Alice<<-->>John: Hi Alice, I can hear you!
6dd74de75 John<<->>Alice: This also works the other way
6dd74de76 John<<-->>Alice: Yes
6dd74de77 Alice->John: Test
6dd74de78 John->>Alice: Still works
6dd74de79 `
6dd74de80 );
6dd74de81 });
6dd74de82 it('should handle different line breaks', () => {
6dd74de83 imgSnapshotTest(
6dd74de84 `
6dd74de85 sequenceDiagram
6dd74de86 participant 1 as multiline<br>using #lt;br#gt;
6dd74de87 participant 2 as multiline<br/>using #lt;br/#gt;
6dd74de88 participant 3 as multiline<br />using #lt;br /#gt;
6dd74de89 participant 4 as multiline<br \t/>using #lt;br \t/#gt;
6dd74de90 1->>2: multiline<br>using #lt;br#gt;
6dd74de91 note right of 2: multiline<br>using #lt;br#gt;
6dd74de92 2->>3: multiline<br/>using #lt;br/#gt;
6dd74de93 note right of 3: multiline<br/>using #lt;br/#gt;
6dd74de94 3->>4: multiline<br />using #lt;br /#gt;
6dd74de95 note right of 4: multiline<br />using #lt;br /#gt;
6dd74de96 4->>1: multiline<br />using #lt;br /#gt;
6dd74de97 note right of 1: multiline<br \t/>using #lt;br \t/#gt;
6dd74de98 `,
6dd74de99 {}
6dd74de100 );
6dd74de101 });
6dd74de102 it('should handle empty lines', () => {
6dd74de103 imgSnapshotTest(
6dd74de104 `
6dd74de105 sequenceDiagram
6dd74de106 Alice->>John: Hello John<br/>
6dd74de107 John-->>Alice: Great<br/><br/>day!
6dd74de108 `,
6dd74de109 {}
6dd74de110 );
6dd74de111 });
6dd74de112 it('should handle line breaks and wrap annotations', () => {
6dd74de113 imgSnapshotTest(
6dd74de114 `
6dd74de115 sequenceDiagram
6dd74de116 participant Alice
6dd74de117 participant Bob
6dd74de118 participant John as John<br/>Second Line
6dd74de119 Alice ->> Bob: Hello Bob, how are you?
6dd74de120 Bob-->>John: How about you John?
6dd74de121 Note right of John: John thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
6dd74de122 Bob-->Alice: Checking with John...
6dd74de123 Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
6dd74de124 Bob-x John: Hey John -<br/>we're still waiting to know<br/>how you're doing
6dd74de125 Note over John:nowrap: John's trying hard not to break his train of thought.
6dd74de126 Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
6dd74de127 Note over John: After a few more moments, John<br/>finally snaps out of it.
6dd74de128 `,
6dd74de129 {}
6dd74de130 );
6dd74de131 });
6dd74de132 it('should render loops with a slight margin', () => {
6dd74de133 imgSnapshotTest(
6dd74de134 `
6dd74de135 sequenceDiagram
6dd74de136 Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de137 loop Loopy
6dd74de138 Bob->>Alice: Pasten
6dd74de139 end `,
6dd74de140 {
6dd74de141 sequence: {
6dd74de142 wrap: true,
6dd74de143 },
6dd74de144 }
6dd74de145 );
6dd74de146 });
6dd74de147 it('should render a sequence diagram with par_over', () => {
6dd74de148 imgSnapshotTest(
6dd74de149 `
6dd74de150 sequenceDiagram
6dd74de151 participant Alice
6dd74de152 participant Bob
6dd74de153 participant John
6dd74de154 par_over Section title
6dd74de155 Alice ->> Bob: Message 1<br>Second line
6dd74de156 Bob ->> John: Message 2
6dd74de157 end
6dd74de158 par_over Two line<br>section title
6dd74de159 Note over Alice: Alice note
6dd74de160 Note over Bob: Bob note<br>Second line
6dd74de161 Note over John: John note
6dd74de162 end
6dd74de163 par_over Mixed section
6dd74de164 Alice ->> Bob: Message 1
6dd74de165 Note left of Bob: Alice/Bob Note
6dd74de166 end
6dd74de167 `
6dd74de168 );
6dd74de169 });
6dd74de170 it('should render a sequence diagram with basic actor creation and destruction', () => {
6dd74de171 imgSnapshotTest(
6dd74de172 `
6dd74de173 sequenceDiagram
6dd74de174 Alice ->> Bob: Hello Bob, how are you ?
6dd74de175 Bob ->> Alice: Fine, thank you. And you?
6dd74de176 create participant Polo
6dd74de177 Alice ->> Polo: Hi Polo!
6dd74de178 create actor Ola1 as Ola
6dd74de179 Polo ->> Ola1: Hiii
6dd74de180 Ola1 ->> Alice: Hi too
6dd74de181 destroy Ola1
6dd74de182 Alice --x Ola1: Bye!
6dd74de183 Alice ->> Bob: And now?
6dd74de184 create participant Ola2 as Ola
6dd74de185 Alice ->> Ola2: Hello again
6dd74de186 destroy Alice
6dd74de187 Alice --x Ola2: Bye for me!
6dd74de188 destroy Bob
6dd74de189 Ola2 --> Bob: The end
6dd74de190 `
6dd74de191 );
6dd74de192 });
6dd74de193 it('should render a sequence diagram with actor creation and destruction coupled with backgrounds, loops and notes', () => {
6dd74de194 imgSnapshotTest(
6dd74de195 `
6dd74de196 sequenceDiagram
6dd74de197 accTitle: test the accTitle
6dd74de198 accDescr: Test a description
6dd74de199
6dd74de200 participant Alice
6dd74de201 participant Bob
6dd74de202 autonumber 10 10
6dd74de203 rect rgb(200, 220, 100)
6dd74de204 rect rgb(200, 255, 200)
6dd74de205
6dd74de206 Alice ->> Bob: Hello Bob, how are you?
6dd74de207 create participant John as John<br />Second Line
6dd74de208 Bob-->>John: How about you John?
6dd74de209 end
6dd74de210
6dd74de211 Bob--x Alice: I am good thanks!
6dd74de212 Bob-x John: I am good thanks!
6dd74de213 Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
6dd74de214
6dd74de215 Bob-->Alice: Checking with John...
6dd74de216 Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
6dd74de217 Bob-x John: Hey John - we're still waiting to know<br />how you're doing
6dd74de218 Note over John:nowrap: John's trying hard not to break his train of thought.
6dd74de219 destroy John
6dd74de220 Bob-x John: John! Cmon!
6dd74de221 Note over John: After a few more moments, John<br />finally snaps out of it.
6dd74de222 end
6dd74de223
6dd74de224 autonumber off
6dd74de225 alt either this
6dd74de226 create actor Lola
6dd74de227 Alice->>+Lola: Yes
6dd74de228 Lola-->>-Alice: OK
6dd74de229 else or this
6dd74de230 autonumber
6dd74de231 Alice->>Lola: No
6dd74de232 else or this will happen
6dd74de233 Alice->Lola: Maybe
6dd74de234 end
6dd74de235 autonumber 200
6dd74de236 par this happens in parallel
6dd74de237 destroy Bob
6dd74de238 Alice -->> Bob: Parallel message 1
6dd74de239 and
6dd74de240 Alice -->> Lola: Parallel message 2
6dd74de241 end
6dd74de242 `
6dd74de243 );
6dd74de244 });
6dd74de245 describe('font settings', () => {
6dd74de246 it('should render different note fonts when configured', () => {
6dd74de247 imgSnapshotTest(
6dd74de248 `
6dd74de249 sequenceDiagram
6dd74de250 Alice->>Bob: I'm short
6dd74de251 note left of Alice: I should have bigger fonts
6dd74de252 Bob->>Alice: Short as well
6dd74de253 `,
6dd74de254 { sequence: { noteFontSize: 18, noteFontFamily: 'Arial' } }
6dd74de255 );
6dd74de256 });
6dd74de257 it('should render different message fonts when configured', () => {
6dd74de258 imgSnapshotTest(
6dd74de259 `
6dd74de260 sequenceDiagram
6dd74de261 Alice->>Bob: I'm short
6dd74de262 Bob->>Alice: Short as well
6dd74de263 `,
6dd74de264 { sequence: { messageFontSize: 18, messageFontFamily: 'Arial' } }
6dd74de265 );
6dd74de266 });
6dd74de267 it('should render different actor fonts when configured', () => {
6dd74de268 imgSnapshotTest(
6dd74de269 `
6dd74de270 sequenceDiagram
6dd74de271 Alice->>Bob: I'm short
6dd74de272 Bob->>Alice: Short as well
6dd74de273 `,
6dd74de274 { sequence: { actorFontSize: 18, actorFontFamily: 'times' } }
6dd74de275 );
6dd74de276 });
6dd74de277 it('should render notes aligned to the left when configured', () => {
6dd74de278 imgSnapshotTest(
6dd74de279 `
6dd74de280 sequenceDiagram
6dd74de281 Alice->>Bob: I'm short
6dd74de282 note left of Alice: I am left aligned
6dd74de283 Bob->>Alice: Short as well
6dd74de284 `,
6dd74de285 { sequence: { noteAlign: 'left' } }
6dd74de286 );
6dd74de287 });
6dd74de288 it('should render multi-line notes aligned to the left when configured', () => {
6dd74de289 imgSnapshotTest(
6dd74de290 `
6dd74de291 sequenceDiagram
6dd74de292 Alice->>Bob: I'm short
6dd74de293 note left of Alice: I am left aligned<br>but also<br>multiline
6dd74de294 Bob->>Alice: Short as well
6dd74de295 `,
6dd74de296 { sequence: { noteAlign: 'left' } }
6dd74de297 );
6dd74de298 });
6dd74de299 it('should render notes aligned to the right when configured', () => {
6dd74de300 imgSnapshotTest(
6dd74de301 `
6dd74de302 sequenceDiagram
6dd74de303 Alice->>Bob: I'm short
6dd74de304 note left of Alice: I am right aligned
6dd74de305 Bob->>Alice: Short as well
6dd74de306 `,
6dd74de307 { sequence: { noteAlign: 'right' } }
6dd74de308 );
6dd74de309 });
6dd74de310 it('should render multi-line notes aligned to the right when configured', () => {
6dd74de311 imgSnapshotTest(
6dd74de312 `
6dd74de313 sequenceDiagram
6dd74de314 Alice->>Bob: I'm short
6dd74de315 note left of Alice: I am right aligned<br>but also<br>multiline
6dd74de316 Bob->>Alice: Short as well
6dd74de317 `,
6dd74de318 { sequence: { noteAlign: 'right' } }
6dd74de319 );
6dd74de320 });
6dd74de321 it('should render multi-line messages aligned to the left when configured', () => {
6dd74de322 imgSnapshotTest(
6dd74de323 `
6dd74de324 sequenceDiagram
6dd74de325 Alice->>Bob: I'm short<br>but also<br>multiline
6dd74de326 Bob->>Alice: Short as well<br>and also<br>multiline
6dd74de327 `,
6dd74de328 { sequence: { messageAlign: 'left' } }
6dd74de329 );
6dd74de330 });
6dd74de331 it('should render multi-line messages aligned to the right when configured', () => {
6dd74de332 imgSnapshotTest(
6dd74de333 `
6dd74de334 sequenceDiagram
6dd74de335 Alice->>Bob: I'm short<br>but also<br>multiline
6dd74de336 Bob->>Alice: Short as well<br>and also<br>multiline
6dd74de337 `,
6dd74de338 { sequence: { messageAlign: 'right' } }
6dd74de339 );
6dd74de340 });
6dd74de341 });
6dd74de342 describe('auth width scaling', () => {
6dd74de343 it('should render long actor descriptions', () => {
6dd74de344 imgSnapshotTest(
6dd74de345 `
6dd74de346 sequenceDiagram
6dd74de347 participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de348 A->>Bob: Hola
6dd74de349 Bob-->A: Pasten !
6dd74de350 `,
6dd74de351 { logLevel: 0 }
6dd74de352 );
6dd74de353 });
6dd74de354 it('should wrap (inline) long actor descriptions', () => {
6dd74de355 imgSnapshotTest(
6dd74de356 `
6dd74de357 sequenceDiagram
6dd74de358 participant A as wrap:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de359 A->>Bob: Hola
6dd74de360 Bob-->A: Pasten !
6dd74de361 `,
6dd74de362 { logLevel: 0 }
6dd74de363 );
6dd74de364 });
6dd74de365 it('should wrap (directive) long actor descriptions', () => {
6dd74de366 imgSnapshotTest(
6dd74de367 `
6dd74de368 %%{init: {'config': {'wrap': true }}}%%
6dd74de369 sequenceDiagram
6dd74de370 participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de371 A->>Bob: Hola
6dd74de372 Bob-->A: Pasten !
6dd74de373 `,
6dd74de374 {}
6dd74de375 );
6dd74de376 });
6dd74de377 it('should be possible to use actor symbols instead of boxes', () => {
6dd74de378 imgSnapshotTest(
6dd74de379 `
6dd74de380 sequenceDiagram
6dd74de381 actor Alice
6dd74de382 actor Bob
6dd74de383 Alice->>Bob: Hi Bob
6dd74de384 Bob->>Alice: Hi Alice
6dd74de385 `,
6dd74de386 {}
6dd74de387 );
6dd74de388 });
6dd74de389 it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol and actor-box and actor-man classes for text tags', () => {
6dd74de390 imgSnapshotTest(
6dd74de391 `
6dd74de392 sequenceDiagram
6dd74de393 actor Bob
6dd74de394 Alice->>Bob: Hi Bob
6dd74de395 Bob->>Alice: Hi Alice
6dd74de396 `,
6dd74de397 {}
6dd74de398 );
6dd74de399 cy.get('.actor').should('have.class', 'actor-top');
6dd74de400 cy.get('.actor-man').should('have.class', 'actor-top');
6dd74de401 cy.get('.actor.actor-top').should('not.have.class', 'actor-bottom');
6dd74de402 cy.get('.actor-man.actor-top').should('not.have.class', 'actor-bottom');
6dd74de403
6dd74de404 cy.get('.actor').should('have.class', 'actor-bottom');
6dd74de405 cy.get('.actor-man').should('have.class', 'actor-bottom');
6dd74de406 cy.get('.actor.actor-bottom').should('not.have.class', 'actor-top');
6dd74de407 cy.get('.actor-man.actor-bottom').should('not.have.class', 'actor-top');
6dd74de408
6dd74de409 cy.get('text.actor-box').should('include.text', 'Alice');
6dd74de410 cy.get('text.actor-man').should('include.text', 'Bob');
6dd74de411 });
6dd74de412 it('should render long notes left of actor', () => {
6dd74de413 imgSnapshotTest(
6dd74de414 `
6dd74de415 sequenceDiagram
6dd74de416 Alice->>Bob: Hola
6dd74de417 Note left of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de418 Bob->>Alice: I'm short though
6dd74de419 `,
6dd74de420 {}
6dd74de421 );
6dd74de422 });
6dd74de423 it('should render long notes wrapped (inline) left of actor', () => {
6dd74de424 imgSnapshotTest(
6dd74de425 `
6dd74de426 sequenceDiagram
6dd74de427 Alice->>Bob: Hola
6dd74de428 Note left of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de429 Bob->>Alice: I'm short though
6dd74de430 `,
6dd74de431 {}
6dd74de432 );
6dd74de433 });
6dd74de434 it('should render long notes right of actor', () => {
6dd74de435 imgSnapshotTest(
6dd74de436 `
6dd74de437 sequenceDiagram
6dd74de438 Alice->>Bob: Hola
6dd74de439 Note right of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de440 Bob->>Alice: I'm short though
6dd74de441 `,
6dd74de442 {}
6dd74de443 );
6dd74de444 });
6dd74de445 it('should render long notes wrapped (inline) right of actor', () => {
6dd74de446 imgSnapshotTest(
6dd74de447 `
6dd74de448 sequenceDiagram
6dd74de449 Alice->>Bob: Hola
6dd74de450 Note right of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de451 Bob->>Alice: I'm short though
6dd74de452 `,
6dd74de453 {}
6dd74de454 );
6dd74de455 });
6dd74de456 it('should render long notes over actor', () => {
6dd74de457 imgSnapshotTest(
6dd74de458 `
6dd74de459 sequenceDiagram
6dd74de460 Alice->>Bob: Hola
6dd74de461 Note over Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de462 Bob->>Alice: I'm short though
6dd74de463 `,
6dd74de464 {}
6dd74de465 );
6dd74de466 });
6dd74de467 it('should render long notes wrapped (inline) over actor', () => {
6dd74de468 imgSnapshotTest(
6dd74de469 `
6dd74de470 sequenceDiagram
6dd74de471 Alice->>Bob: Hola
6dd74de472 Note over Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de473 Bob->>Alice: I'm short though
6dd74de474 `,
6dd74de475 {}
6dd74de476 );
6dd74de477 });
6dd74de478 it('should render notes over actors and participant', () => {
6dd74de479 imgSnapshotTest(
6dd74de480 `
6dd74de481 sequenceDiagram
6dd74de482 actor Alice
6dd74de483 participant Charlie
6dd74de484 note over Alice: some note
6dd74de485 note over Charlie: other note
6dd74de486 `,
6dd74de487 {}
6dd74de488 );
6dd74de489 });
6dd74de490 it('should render long messages from an actor to the left to one to the right', () => {
6dd74de491 imgSnapshotTest(
6dd74de492 `
6dd74de493 sequenceDiagram
6dd74de494 Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de495 Bob->>Alice: I'm short though
6dd74de496 `,
6dd74de497 {}
6dd74de498 );
6dd74de499 });
6dd74de500 it('should render long messages wrapped (inline) from an actor to the left to one to the right', () => {
6dd74de501 imgSnapshotTest(
6dd74de502 `
6dd74de503 sequenceDiagram
6dd74de504 Alice->>Bob:wrap:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de505 Bob->>Alice: I'm short though
6dd74de506 `,
6dd74de507 {}
6dd74de508 );
6dd74de509 });
6dd74de510 it('should render long messages from an actor to the right to one to the left', () => {
6dd74de511 imgSnapshotTest(
6dd74de512 `
6dd74de513 sequenceDiagram
6dd74de514 Alice->>Bob: I'm short
6dd74de515 Bob->>Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de516 `,
6dd74de517 {}
6dd74de518 );
6dd74de519 });
6dd74de520 it('should render long messages wrapped (inline) from an actor to the right to one to the left', () => {
6dd74de521 imgSnapshotTest(
6dd74de522 `
6dd74de523 sequenceDiagram
6dd74de524 Alice->>Bob: I'm short
6dd74de525 Bob->>Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
6dd74de526 `,
6dd74de527 {}
6dd74de528 );
6dd74de529 });
6dd74de530 });
6dd74de531 describe('background rects', () => {
6dd74de532 it('should render a single and nested rects', () => {
6dd74de533 imgSnapshotTest(
6dd74de534 `
6dd74de535 sequenceDiagram
6dd74de536 participant A
6dd74de537 participant B
6dd74de538 participant C
6dd74de539 participant D
6dd74de540 participant E
6dd74de541 participant G
6dd74de542
6dd74de543 A ->>+ B: Task 1
6dd74de544 rect rgb(178, 102, 255)
6dd74de545 B ->>+ C: Task 2
6dd74de546 C -->>- B: Return
6dd74de547 end
6dd74de548
6dd74de549 A ->> D: Task 3
6dd74de550 rect rgb(0, 128, 255)
6dd74de551 D ->>+ E: Task 4
6dd74de552 rect rgb(0, 204, 0)
6dd74de553 E ->>+ G: Task 5
6dd74de554 G -->>- E: Return
6dd74de555 end
6dd74de556 E ->> E: Task 6
6dd74de557 end
6dd74de558 D -->> A: Complete
6dd74de559 `,
6dd74de560 {}
6dd74de561 );
6dd74de562 });
6dd74de563 it('should render a single and nested opt with long test overflowing', () => {
6dd74de564 imgSnapshotTest(
6dd74de565 `
6dd74de566 sequenceDiagram
6dd74de567 participant A
6dd74de568 participant B
6dd74de569 participant C
6dd74de570 participant D
6dd74de571 participant E
6dd74de572 participant G
6dd74de573
6dd74de574 A ->>+ B: Task 1
6dd74de575 opt this is an opt with a long title that will overflow
6dd74de576 B ->>+ C: Task 2
6dd74de577 C -->>- B: Return
6dd74de578 end
6dd74de579
6dd74de580 A ->> D: Task 3
6dd74de581 opt this is another opt with a long title that will overflow
6dd74de582 D ->>+ E: Task 4
6dd74de583 opt this is a nested opt with a long title that will overflow
6dd74de584 E ->>+ G: Task 5
6dd74de585 G -->>- E: Return
6dd74de586 end
6dd74de587 E ->> E: Task 6
6dd74de588 end
6dd74de589 D -->> A: Complete
6dd74de590 `,
6dd74de591 {}
6dd74de592 );
6dd74de593 });
6dd74de594 it('should render a single and nested opt with long test wrapping', () => {
6dd74de595 imgSnapshotTest(
6dd74de596 `
6dd74de597 %%{init: { 'config': { 'wrap': true } } }%%
6dd74de598 sequenceDiagram
6dd74de599 participant A
6dd74de600 participant B
6dd74de601 participant C
6dd74de602 participant D
6dd74de603 participant E
6dd74de604 participant G
6dd74de605
6dd74de606 A ->>+ B: Task 1
6dd74de607 opt this is an opt with a long title that will overflow
6dd74de608 B ->>+ C: Task 2
6dd74de609 C -->>- B: Return
6dd74de610 end
6dd74de611
6dd74de612 A ->> D: Task 3
6dd74de613 opt this is another opt with a long title that will overflow
6dd74de614 D ->>+ E: Task 4
6dd74de615 opt this is a nested opt with a long title that will overflow
6dd74de616 E ->>+ G: Task 5
6dd74de617 G -->>- E: Return
6dd74de618 end
6dd74de619 E ->> E: Task 6
6dd74de620 end
6dd74de621 D -->> A: Complete
6dd74de622 `,
6dd74de623 {}
6dd74de624 );
6dd74de625 });
6dd74de626 it('should render rect around and inside loops', () => {
6dd74de627 imgSnapshotTest(
6dd74de628 `
6dd74de629 sequenceDiagram
6dd74de630 A ->> B: 1
6dd74de631 rect rgb(204, 0, 102)
6dd74de632 loop check C
6dd74de633 C ->> C: Every 10 seconds
6dd74de634 end
6dd74de635 end
6dd74de636 A ->> B: 2
6dd74de637 loop check D
6dd74de638 C ->> D: 3
6dd74de639 rect rgb(153, 153, 255)
6dd74de640 D -->> D: 5
6dd74de641 D --> C: 4
6dd74de642 end
6dd74de643 end
6dd74de644 `,
6dd74de645 {}
6dd74de646 );
6dd74de647 });
6dd74de648 it('should render rect around and inside alts', () => {
6dd74de649 imgSnapshotTest(
6dd74de650 `
6dd74de651 sequenceDiagram
6dd74de652 A ->> B: 1
6dd74de653 rect rgb(204, 0, 102)
6dd74de654 alt yes
6dd74de655 C ->> C: 1
6dd74de656 else no
6dd74de657 rect rgb(0, 204, 204)
6dd74de658 C ->> C: 0
6dd74de659 end
6dd74de660 end
6dd74de661 end
6dd74de662 B ->> A: Return
6dd74de663 `,
6dd74de664 {}
6dd74de665 );
6dd74de666 });
6dd74de667 it('should render rect around and inside opts', () => {
6dd74de668 imgSnapshotTest(
6dd74de669 `
6dd74de670 sequenceDiagram
6dd74de671 A ->> B: 1
6dd74de672 rect rgb(204, 0, 102)
6dd74de673 opt maybe
6dd74de674 C -->> D: Do something
6dd74de675 rect rgb(0, 204, 204)
6dd74de676 C ->> C: 0
6dd74de677 end
6dd74de678 end
6dd74de679 end
6dd74de680
6dd74de681 opt possibly
6dd74de682 rect rgb(0, 204, 204)
6dd74de683 C ->> C: 0
6dd74de684 end
6dd74de685 end
6dd74de686 B ->> A: Return
6dd74de687 `,
6dd74de688 {}
6dd74de689 );
6dd74de690 });
6dd74de691 it('should render rect around and inside criticals', () => {
6dd74de692 imgSnapshotTest(
6dd74de693 `
6dd74de694 sequenceDiagram
6dd74de695 A ->> B: 1
6dd74de696 rect rgb(204, 0, 102)
6dd74de697 critical yes
6dd74de698 C ->> C: 1
6dd74de699 option no
6dd74de700 rect rgb(0, 204, 204)
6dd74de701 C ->> C: 0
6dd74de702 end
6dd74de703 end
6dd74de704 end
6dd74de705 B ->> A: Return
6dd74de706 `,
6dd74de707 {}
6dd74de708 );
6dd74de709 });
6dd74de710 it('should render rect around and inside breaks', () => {
6dd74de711 imgSnapshotTest(
6dd74de712 `
6dd74de713 sequenceDiagram
6dd74de714 A ->> B: 1
6dd74de715 rect rgb(204, 0, 102)
6dd74de716 break yes
6dd74de717 rect rgb(0, 204, 204)
6dd74de718 C ->> C: 0
6dd74de719 end
6dd74de720 end
6dd74de721 end
6dd74de722 B ->> A: Return
6dd74de723 `,
6dd74de724 {}
6dd74de725 );
6dd74de726 });
6dd74de727 it('should render autonumber when configured with such', () => {
6dd74de728 imgSnapshotTest(
6dd74de729 `
6dd74de730 sequenceDiagram
6dd74de731 Alice->>John: Hello John, how are you?
6dd74de732 loop Healthcheck
6dd74de733 John->>John: Fight against hypochondria
6dd74de734 end
6dd74de735 Note right of John: Rational thoughts!
6dd74de736 John-->>Alice: Great!
6dd74de737 John->>Bob: How about you?
6dd74de738 Bob-->>John: Jolly good!
6dd74de739 `,
6dd74de740 { sequence: { actorMargin: 50, showSequenceNumbers: true } }
6dd74de741 );
6dd74de742 });
6dd74de743 it('should render autonumber when autonumber keyword is used', () => {
6dd74de744 imgSnapshotTest(
6dd74de745 `
6dd74de746 sequenceDiagram
6dd74de747 autonumber
6dd74de748 Alice->>John: Hello John, how are you?
6dd74de749 loop Healthcheck
6dd74de750 John->>John: Fight against hypochondria
6dd74de751 end
6dd74de752 Note right of John: Rational thoughts!
6dd74de753 John-->>Alice: Great!
6dd74de754 John->>Bob: How about you?
6dd74de755 Bob-->>John: Jolly good!
6dd74de756 `,
6dd74de757 {}
6dd74de758 );
6dd74de759 });
6dd74de760 it('should render autonumber with different line breaks', () => {
6dd74de761 imgSnapshotTest(
6dd74de762 `
6dd74de763 sequenceDiagram
6dd74de764 autonumber
6dd74de765 Alice->>John: Hello John,<br>how are you?
6dd74de766 Alice->>John: John,<br/>can you hear me?
6dd74de767 John-->>Alice: Hi Alice,<br />I can hear you!
6dd74de768 John-->>Alice: I feel great!
6dd74de769 `,
6dd74de770 {}
6dd74de771 );
6dd74de772 });
6dd74de773 it('should render dark theme from init directive and configure font size 24 font', () => {
6dd74de774 imgSnapshotTest(
6dd74de775 `
6dd74de776 %%{init: {'theme': 'dark', 'config': {'fontSize': 24}}}%%
6dd74de777 sequenceDiagram
6dd74de778 Alice->>John: Hello John, how are you?
6dd74de779 Alice->>John: John, can you hear me?
6dd74de780 John-->>Alice: Hi Alice, I can hear you!
6dd74de781 John-->>Alice: I feel great!
6dd74de782 `,
6dd74de783 {}
6dd74de784 );
6dd74de785 });
6dd74de786 it('should render with wrapping enabled', () => {
6dd74de787 imgSnapshotTest(
6dd74de788 `
6dd74de789 %%{init: { 'config': { 'wrap': true }}}%%
6dd74de790 sequenceDiagram
6dd74de791 participant A as Alice, the talkative one
6dd74de792 A->>John: Hello John, how are you today? I'm feeling quite verbose today.
6dd74de793 A->>John: John, can you hear me? If you are not available, we can talk later.
6dd74de794 John-->>A: Hi Alice, I can hear you! I was finishing up an important meeting.
6dd74de795 John-->>A: I feel great! I was not ignoring you. I am sorry you had to wait for a response.
6dd74de796 `,
6dd74de797 {}
6dd74de798 );
6dd74de799 });
6dd74de800 it('should render with an init directive', () => {
6dd74de801 imgSnapshotTest(
6dd74de802 `%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrap": true }}}%%
6dd74de803 sequenceDiagram
6dd74de804 Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
6dd74de805 Note left of Alice: Bob thinks
6dd74de806 Bob->>Alice: Fine!`,
6dd74de807 {}
6dd74de808 );
6dd74de809 });
6dd74de810 });
6dd74de811 describe('directives', () => {
6dd74de812 it('should override config with directive settings', () => {
6dd74de813 imgSnapshotTest(
6dd74de814 `
6dd74de815 %%{init: { "config": { "mirrorActors": true }}}%%
6dd74de816 sequenceDiagram
6dd74de817 Alice->>Bob: I'm short
6dd74de818 note left of Alice: config set to mirrorActors: false<br/>directive set to mirrorActors: true
6dd74de819 Bob->>Alice: Short as well
6dd74de820 `,
6dd74de821 {
6dd74de822 logLevel: 0,
6dd74de823 sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
6dd74de824 }
6dd74de825 );
6dd74de826 });
6dd74de827 it('should override config with directive settings 2', () => {
6dd74de828 imgSnapshotTest(
6dd74de829 `
6dd74de830 %%{init: { "config": { "mirrorActors": false, "wrap": true }}}%%
6dd74de831 sequenceDiagram
6dd74de832 Alice->>Bob: I'm short
6dd74de833 note left of Alice: config: mirrorActors=true<br/>directive: mirrorActors=false
6dd74de834 Bob->>Alice: Short as well
6dd74de835 `,
6dd74de836 {
6dd74de837 logLevel: 0,
6dd74de838 sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
6dd74de839 }
6dd74de840 );
6dd74de841 });
6dd74de842 });
6dd74de843 describe('links', () => {
6dd74de844 it('should support actor links', () => {
6dd74de845 renderGraph(
6dd74de846 `
6dd74de847 sequenceDiagram
6dd74de848 link Alice: Dashboard @ https://dashboard.contoso.com/alice
6dd74de849 link Alice: Wiki @ https://wiki.contoso.com/alice
6dd74de850 link John: Dashboard @ https://dashboard.contoso.com/john
6dd74de851 link John: Wiki @ https://wiki.contoso.com/john
6dd74de852 Alice->>John: Hello John<br/>
6dd74de853 John-->>Alice: Great<br/><br/>day!
6dd74de854 `,
6dd74de855 { securityLevel: 'loose' }
6dd74de856 );
6dd74de857 cy.get('#actor0_popup').should((popupMenu) => {
6dd74de858 const style = popupMenu.attr('style');
6dd74de859 // expect(style).to.undefined;
6dd74de860 });
6dd74de861 cy.get('#root-0').click();
6dd74de862 cy.get('#actor0_popup').should((popupMenu) => {
6dd74de863 const style = popupMenu.attr('style');
6dd74de864 expect(style).to.match(/^display: block;$/);
6dd74de865 });
6dd74de866 cy.get('#root-0').click();
6dd74de867 cy.get('#actor0_popup').should((popupMenu) => {
6dd74de868 const style = popupMenu.attr('style');
6dd74de869 expect(style).to.match(/^display: none;$/);
6dd74de870 });
6dd74de871 });
6dd74de872 it('should support actor links and properties EXPERIMENTAL: USE WITH CAUTION', () => {
6dd74de873 //Be aware that the syntax for "properties" is likely to be changed.
6dd74de874 imgSnapshotTest(
6dd74de875 `
6dd74de876 %%{init: { "config": { "mirrorActors": true, "forceMenus": true }}}%%
6dd74de877 sequenceDiagram
6dd74de878 participant a as Alice
6dd74de879 participant j as John
6dd74de880 note right of a: Hello world!
6dd74de881 properties a: {"class": "internal-service-actor", "type": "@clock"}
6dd74de882 properties j: {"class": "external-service-actor", "type": "@computer"}
6dd74de883 links a: {"Repo": "https://www.contoso.com/repo", "Swagger": "https://www.contoso.com/swagger"}
6dd74de884 links j: {"Repo": "https://www.contoso.com/repo"}
6dd74de885 links a: {"Dashboard": "https://www.contoso.com/dashboard", "On-Call": "https://www.contoso.com/oncall"}
6dd74de886 link a: Contacts @ https://contacts.contoso.com/?contact=alice@contoso.com
6dd74de887 a->>j: Hello John, how are you?
6dd74de888 j-->>a: Great!
6dd74de889 `,
6dd74de890 {
6dd74de891 logLevel: 0,
6dd74de892 sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
6dd74de893 }
6dd74de894 );
6dd74de895 });
6dd74de896
6dd74de897 it('should handle bidirectional arrows with autonumber', () => {
6dd74de898 imgSnapshotTest(`
6dd74de899 sequenceDiagram
6dd74de900 autonumber
6dd74de901 participant A
6dd74de902 participant B
6dd74de903 A<<->>B: This is a bidirectional message
6dd74de904 A->B: This is a normal message`);
6dd74de905 });
6dd74de906
6dd74de907 it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
6dd74de908 //Be aware that the syntax for "properties" is likely to be changed.
6dd74de909 imgSnapshotTest(
6dd74de910 `
6dd74de911 %%{init: { "config": { "mirrorActors": false, "forceMenus": true, "wrap": true }}}%%
6dd74de912 sequenceDiagram
6dd74de913 participant a as Alice
6dd74de914 participant j as John
6dd74de915 note right of a: Hello world!
6dd74de916 properties a: {"class": "internal-service-actor", "type": "@clock"}
6dd74de917 properties j: {"class": "external-service-actor", "type": "@computer"}
6dd74de918 links a: {"Repo": "https://www.contoso.com/repo", "Swagger": "https://www.contoso.com/swagger"}
6dd74de919 links j: {"Repo": "https://www.contoso.com/repo"}
6dd74de920 links a: {"Dashboard": "https://www.contoso.com/dashboard", "On-Call": "https://www.contoso.com/oncall"}
6dd74de921 a->>j: Hello John, how are you?
6dd74de922 j-->>a: Great!
6dd74de923 `,
6dd74de924 {
6dd74de925 logLevel: 0,
6dd74de926 sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
6dd74de927 }
6dd74de928 );
6dd74de929 });
6dd74de930 it("shouldn't display unused participants", () => {
6dd74de931 //Be aware that the syntax for "properties" is likely to be changed.
6dd74de932 imgSnapshotTest(
6dd74de933 `
6dd74de934 %%{init: { "config": { "sequence": {"hideUnusedParticipants": true }}}}%%
6dd74de935 sequenceDiagram
6dd74de936 participant a
6dd74de937 `,
6dd74de938 {
6dd74de939 logLevel: 0,
6dd74de940 sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
6dd74de941 }
6dd74de942 );
6dd74de943 });
6dd74de944 });
6dd74de945 describe('svg size', () => {
6dd74de946 it('should render a sequence diagram when useMaxWidth is true (default)', () => {
6dd74de947 renderGraph(
6dd74de948 `
6dd74de949 sequenceDiagram
6dd74de950 participant Alice
6dd74de951 participant Bob
6dd74de952 participant John as John<br/>Second Line
6dd74de953 Alice ->> Bob: Hello Bob, how are you?
6dd74de954 Bob-->>John: How about you John?
6dd74de955 Bob--x Alice: I am good thanks!
6dd74de956 Bob-x John: I am good thanks!
6dd74de957 Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
6dd74de958 Bob-->Alice: Checking with John...
6dd74de959 alt either this
6dd74de960 Alice->>John: Yes
6dd74de961 else or this
6dd74de962 Alice->>John: No
6dd74de963 else or this will happen
6dd74de964 Alice->John: Maybe
6dd74de965 end
6dd74de966 par this happens in parallel
6dd74de967 Alice -->> Bob: Parallel message 1
6dd74de968 and
6dd74de969 Alice -->> John: Parallel message 2
6dd74de970 end
6dd74de971 `,
6dd74de972 { sequence: { useMaxWidth: true } }
6dd74de973 );
6dd74de974 cy.get('svg').should((svg) => {
6dd74de975 expect(svg).to.have.attr('width', '100%');
6dd74de976 // expect(svg).to.have.attr('height');
6dd74de977 // const height = parseFloat(svg.attr('height'));
6dd74de978 // expect(height).to.be.within(920, 971);
6dd74de979 const style = svg.attr('style');
6dd74de980 expect(style).to.match(/^max-width: [\d.]+px;$/);
6dd74de981 const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
6dd74de982 // use within because the absolute value can be slightly different depending on the environment ±5%
6dd74de983 expect(maxWidthValue).to.be.within(820 * 0.95, 820 * 1.05);
6dd74de984 });
6dd74de985 });
6dd74de986 it('should render a sequence diagram when useMaxWidth is false', () => {
6dd74de987 renderGraph(
6dd74de988 `
6dd74de989 sequenceDiagram
6dd74de990 participant Alice
6dd74de991 participant Bob
6dd74de992 participant John as John<br/>Second Line
6dd74de993 Alice ->> Bob: Hello Bob, how are you?
6dd74de994 Bob-->>John: How about you John?
6dd74de995 Bob--x Alice: I am good thanks!
6dd74de996 Bob-x John: I am good thanks!
6dd74de997 Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
6dd74de998 Bob-->Alice: Checking with John...
6dd74de999 alt either this
6dd74de1000 Alice->>John: Yes
6dd74de1001 else or this
6dd74de1002 Alice->>John: No
6dd74de1003 else or this will happen
6dd74de1004 Alice->John: Maybe
6dd74de1005 end
6dd74de1006 par this happens in parallel
6dd74de1007 Alice -->> Bob: Parallel message 1
6dd74de1008 and
6dd74de1009 Alice -->> John: Parallel message 2
6dd74de1010 end
6dd74de1011 `,
6dd74de1012 { sequence: { useMaxWidth: false } }
6dd74de1013 );
6dd74de1014 cy.get('svg').should((svg) => {
6dd74de1015 // const height = parseFloat(svg.attr('height'));
6dd74de1016 const width = parseFloat(svg.attr('width'));
6dd74de1017 // expect(height).to.be.within(920, 971);
6dd74de1018 // use within because the absolute value can be slightly different depending on the environment ±5%
6dd74de1019 expect(width).to.be.within(820 * 0.95, 820 * 1.05);
6dd74de1020 expect(svg).to.not.have.attr('style');
6dd74de1021 });
6dd74de1022 });
6dd74de1023 });
6dd74de1024 describe('render after error', () => {
6dd74de1025 it('should render diagram after fixing destroy participant error', () => {
6dd74de1026 cy.on('uncaught:exception', (err) => {
6dd74de1027 return false;
6dd74de1028 });
6dd74de1029
6dd74de1030 renderGraph([
6dd74de1031 `sequenceDiagram
6dd74de1032 Alice->>Bob: Hello Bob, how are you ?
6dd74de1033 Bob->>Alice: Fine, thank you. And you?
6dd74de1034 create participant Carl
6dd74de1035 Alice->>Carl: Hi Carl!
6dd74de1036 create actor D as Donald
6dd74de1037 Carl->>D: Hi!
6dd74de1038 destroy Carl
6dd74de1039 Alice-xCarl: We are too many
6dd74de1040 destroy Bo
6dd74de1041 Bob->>Alice: I agree`,
6dd74de1042 `sequenceDiagram
6dd74de1043 Alice->>Bob: Hello Bob, how are you ?
6dd74de1044 Bob->>Alice: Fine, thank you. And you?
6dd74de1045 create participant Carl
6dd74de1046 Alice->>Carl: Hi Carl!
6dd74de1047 create actor D as Donald
6dd74de1048 Carl->>D: Hi!
6dd74de1049 destroy Carl
6dd74de1050 Alice-xCarl: We are too many
6dd74de1051 destroy Bob
6dd74de1052 Bob->>Alice: I agree`,
6dd74de1053 ]);
6dd74de1054 });
6dd74de1055 });
6dd74de1056 describe('render new arrow type', () => {
6dd74de1057 it('should render Solid half arrow top', () => {
6dd74de1058 imgSnapshotTest(
6dd74de1059 `
6dd74de1060 sequenceDiagram
6dd74de1061 Alice -|\\ John: Hello John, how are you?
6dd74de1062 Alice-|\\ John: Hi Alice, I can hear you!
6dd74de1063 Alice -|\\ John: Test
6dd74de1064 `
6dd74de1065 );
6dd74de1066 });
6dd74de1067 it('should render Solid half arrow bottom', () => {
6dd74de1068 imgSnapshotTest(
6dd74de1069 `
6dd74de1070 sequenceDiagram
6dd74de1071 Alice-|/John: Hello John, how are you?
6dd74de1072 Alice-|/John: Hi Alice, I can hear you!
6dd74de1073 Alice-|/John: Test
6dd74de1074 `
6dd74de1075 );
6dd74de1076 });
6dd74de1077
6dd74de1078 it('should render Stick half arrow top ', () => {
6dd74de1079 imgSnapshotTest(
6dd74de1080 `
6dd74de1081 sequenceDiagram
6dd74de1082 Alice-\\\\John: Hello John, how are you?
6dd74de1083 Alice-\\\\John: Hi Alice, I can hear you!
6dd74de1084 Alice-\\\\John: Test
6dd74de1085 `
6dd74de1086 );
6dd74de1087 });
6dd74de1088 it('should render Stick half arrow bottom ', () => {
6dd74de1089 imgSnapshotTest(
6dd74de1090 `
6dd74de1091 sequenceDiagram
6dd74de1092 Alice-//John: Hello John, how are you?
6dd74de1093 Alice-//John: Hi Alice, I can hear you!
6dd74de1094 Alice-//John: Test
6dd74de1095 `
6dd74de1096 );
6dd74de1097 });
6dd74de1098 it('should render Solid half arrow top reverse ', () => {
6dd74de1099 imgSnapshotTest(
6dd74de1100 `
6dd74de1101 sequenceDiagram
6dd74de1102 Alice/|-John: Hello Alice, how are you?
6dd74de1103 Alice/|-John: Hi Alice, I can hear you!
6dd74de1104 Alice/|-John: Test
6dd74de1105
6dd74de1106 `
6dd74de1107 );
6dd74de1108 });
6dd74de1109
6dd74de1110 it('should render Solid half arrow bottom reverse ', () => {
6dd74de1111 imgSnapshotTest(
6dd74de1112 `sequenceDiagram
6dd74de1113 Alice \\|- John: Hello Alice, how are you?
6dd74de1114 Alice \\|- John: Hi Alice, I can hear you!
6dd74de1115 Alice \\|- John: Test`
6dd74de1116 );
6dd74de1117 });
6dd74de1118
6dd74de1119 it('should render Stick half arrow top reverse ', () => {
6dd74de1120 imgSnapshotTest(
6dd74de1121 `
6dd74de1122 sequenceDiagram
6dd74de1123 Alice //-John: Hello Alice, how are you?
6dd74de1124 Alice //-John: Hi Alice, I can hear you!
6dd74de1125 Alice //-John: Test`
6dd74de1126 );
6dd74de1127 });
6dd74de1128
6dd74de1129 it('should render Stick half arrow bottom reverse ', () => {
6dd74de1130 imgSnapshotTest(
6dd74de1131 `
6dd74de1132 sequenceDiagram
6dd74de1133 Alice \\\\-John: Hello Alice, how are you?
6dd74de1134 Alice \\\\-John: Hi Alice, I can hear you!
6dd74de1135 Alice \\\\-John: Test`
6dd74de1136 );
6dd74de1137 });
6dd74de1138
6dd74de1139 it('should render Solid half arrow top dotted', () => {
6dd74de1140 imgSnapshotTest(
6dd74de1141 `
6dd74de1142 sequenceDiagram
6dd74de1143 Alice --|\\John: Hello John, how are you?
6dd74de1144 Alice --|\\John: Hi Alice, I can hear you!
6dd74de1145 Alice --|\\John: Test`
6dd74de1146 );
6dd74de1147 });
6dd74de1148
6dd74de1149 it('should render Solid half arrow bottom dotted', () => {
6dd74de1150 imgSnapshotTest(
6dd74de1151 `
6dd74de1152 sequenceDiagram
6dd74de1153 Alice --|/John: Hello John, how are you?
6dd74de1154 Alice --|/John: Hi Alice, I can hear you!
6dd74de1155 Alice --|/John: Test`
6dd74de1156 );
6dd74de1157 });
6dd74de1158
6dd74de1159 it('should render Stick half arrow top dotted', () => {
6dd74de1160 imgSnapshotTest(
6dd74de1161 `
6dd74de1162 sequenceDiagram
6dd74de1163 Alice--\\\\John: Hello John, how are you?
6dd74de1164 Alice--\\\\John: Hi Alice, I can hear you!
6dd74de1165 Alice--\\\\John: Test`
6dd74de1166 );
6dd74de1167 });
6dd74de1168
6dd74de1169 it('should render Stick half arrow bottom dotted', () => {
6dd74de1170 imgSnapshotTest(
6dd74de1171 `
6dd74de1172 sequenceDiagram
6dd74de1173 Alice--//John: Hello John, how are you?
6dd74de1174 Alice--//John: Hi Alice, I can hear you!
6dd74de1175 Alice--//John: Test`
6dd74de1176 );
6dd74de1177 });
6dd74de1178
6dd74de1179 it('should render Solid half arrow top reverse dotted', () => {
6dd74de1180 imgSnapshotTest(
6dd74de1181 `
6dd74de1182 sequenceDiagram
6dd74de1183 Alice/|--John: Hello Alice, how are you?
6dd74de1184 Alice/|--John: Hi Alice, I can hear you!
6dd74de1185 Alice/|--John: Test`
6dd74de1186 );
6dd74de1187 });
6dd74de1188
6dd74de1189 it('should render Solid half arrow bottom reverse dotted', () => {
6dd74de1190 imgSnapshotTest(
6dd74de1191 `
6dd74de1192 sequenceDiagram
6dd74de1193 Alice\\|--John: Hello Alice, how are you?
6dd74de1194 Alice\\|--John: Hi Alice, I can hear you!
6dd74de1195 Alice\\|--John: Test`
6dd74de1196 );
6dd74de1197 });
6dd74de1198
6dd74de1199 it('should render Stick half arrow top reverse dotted ', () => {
6dd74de1200 imgSnapshotTest(
6dd74de1201 `
6dd74de1202 sequenceDiagram
6dd74de1203 Alice//--John: Hello Alice, how are you?
6dd74de1204 Alice//--John: Hi Alice, I can hear you!
6dd74de1205 Alice//--John: Test`
6dd74de1206 );
6dd74de1207 });
6dd74de1208
6dd74de1209 it('should render Stick half arrow bottom reverse dotted ', () => {
6dd74de1210 imgSnapshotTest(
6dd74de1211 `
6dd74de1212 sequenceDiagram
6dd74de1213 Alice\\\\--John: Hello Alice, how are you?
6dd74de1214 Alice\\\\--John: Hi Alice, I can hear you!
6dd74de1215 Alice\\\\--John: Test`
6dd74de1216 );
6dd74de1217 });
6dd74de1218 });
6dd74de1219});