36.8 KB1220 lines
Blame
1import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
2
3describe('Sequence diagram', () => {
4 it('should render a sequence diagram with boxes', () => {
5 renderGraph(
6 `
7 sequenceDiagram
8 box LightGrey Alice and Bob
9 participant Alice
10 participant Bob
11 end
12 participant John as John<br/>Second Line
13 Alice ->> Bob: Hello Bob, how are you?
14 Bob-->>John: How about you John?
15 Bob--x Alice: I am good thanks!
16 Bob-x John: I am good thanks!
17 Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
18 Bob-->Alice: Checking with John...
19 alt either this
20 Alice->>John: Yes
21 else or this
22 Alice->>John: No
23 else or this will happen
24 Alice->John: Maybe
25 end
26 par this happens in parallel
27 Alice -->> Bob: Parallel message 1
28 and
29 Alice -->> John: Parallel message 2
30 end
31 `,
32 { sequence: { useMaxWidth: false } }
33 );
34 cy.get('svg').should((svg) => {
35 const width = parseFloat(svg.attr('width'));
36 expect(width).to.be.within(830 * 0.95, 830 * 1.05);
37 expect(svg).to.not.have.attr('style');
38 });
39 });
40 it('should render a simple sequence diagram', () => {
41 imgSnapshotTest(
42 `
43 sequenceDiagram
44 participant Alice
45 participant Bob
46 participant John as John<br/>Second Line
47 Alice ->> Bob: Hello Bob, how are you?
48 Bob-->>John: How about you John?
49 Bob--x Alice: I am good thanks!
50 Bob-x John: I am good thanks!
51 Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
52 Bob-->Alice: Checking with John...
53 alt either this
54 Alice->>John: Yes
55 else or this
56 Alice->>John: No
57 else or this will happen
58 Alice->John: Maybe
59 end
60 par this happens in parallel
61 Alice -->> Bob: Parallel message 1
62 and
63 Alice -->> John: Parallel message 2
64 end
65 `,
66 { sequence: { actorFontFamily: 'courier' } }
67 );
68 });
69 it('should render bidirectional arrows', () => {
70 imgSnapshotTest(
71 `
72 sequenceDiagram
73 Alice<<->>John: Hello John, how are you?
74 Alice<<-->>John: Hi Alice, I can hear you!
75 John<<->>Alice: This also works the other way
76 John<<-->>Alice: Yes
77 Alice->John: Test
78 John->>Alice: Still works
79 `
80 );
81 });
82 it('should handle different line breaks', () => {
83 imgSnapshotTest(
84 `
85 sequenceDiagram
86 participant 1 as multiline<br>using #lt;br#gt;
87 participant 2 as multiline<br/>using #lt;br/#gt;
88 participant 3 as multiline<br />using #lt;br /#gt;
89 participant 4 as multiline<br \t/>using #lt;br \t/#gt;
90 1->>2: multiline<br>using #lt;br#gt;
91 note right of 2: multiline<br>using #lt;br#gt;
92 2->>3: multiline<br/>using #lt;br/#gt;
93 note right of 3: multiline<br/>using #lt;br/#gt;
94 3->>4: multiline<br />using #lt;br /#gt;
95 note right of 4: multiline<br />using #lt;br /#gt;
96 4->>1: multiline<br />using #lt;br /#gt;
97 note right of 1: multiline<br \t/>using #lt;br \t/#gt;
98 `,
99 {}
100 );
101 });
102 it('should handle empty lines', () => {
103 imgSnapshotTest(
104 `
105 sequenceDiagram
106 Alice->>John: Hello John<br/>
107 John-->>Alice: Great<br/><br/>day!
108 `,
109 {}
110 );
111 });
112 it('should handle line breaks and wrap annotations', () => {
113 imgSnapshotTest(
114 `
115 sequenceDiagram
116 participant Alice
117 participant Bob
118 participant John as John<br/>Second Line
119 Alice ->> Bob: Hello Bob, how are you?
120 Bob-->>John: How about you John?
121 Note right of John: John thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
122 Bob-->Alice: Checking with John...
123 Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
124 Bob-x John: Hey John -<br/>we're still waiting to know<br/>how you're doing
125 Note over John:nowrap: John's trying hard not to break his train of thought.
126 Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
127 Note over John: After a few more moments, John<br/>finally snaps out of it.
128 `,
129 {}
130 );
131 });
132 it('should render loops with a slight margin', () => {
133 imgSnapshotTest(
134 `
135 sequenceDiagram
136 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
137 loop Loopy
138 Bob->>Alice: Pasten
139 end `,
140 {
141 sequence: {
142 wrap: true,
143 },
144 }
145 );
146 });
147 it('should render a sequence diagram with par_over', () => {
148 imgSnapshotTest(
149 `
150 sequenceDiagram
151 participant Alice
152 participant Bob
153 participant John
154 par_over Section title
155 Alice ->> Bob: Message 1<br>Second line
156 Bob ->> John: Message 2
157 end
158 par_over Two line<br>section title
159 Note over Alice: Alice note
160 Note over Bob: Bob note<br>Second line
161 Note over John: John note
162 end
163 par_over Mixed section
164 Alice ->> Bob: Message 1
165 Note left of Bob: Alice/Bob Note
166 end
167 `
168 );
169 });
170 it('should render a sequence diagram with basic actor creation and destruction', () => {
171 imgSnapshotTest(
172 `
173 sequenceDiagram
174 Alice ->> Bob: Hello Bob, how are you ?
175 Bob ->> Alice: Fine, thank you. And you?
176 create participant Polo
177 Alice ->> Polo: Hi Polo!
178 create actor Ola1 as Ola
179 Polo ->> Ola1: Hiii
180 Ola1 ->> Alice: Hi too
181 destroy Ola1
182 Alice --x Ola1: Bye!
183 Alice ->> Bob: And now?
184 create participant Ola2 as Ola
185 Alice ->> Ola2: Hello again
186 destroy Alice
187 Alice --x Ola2: Bye for me!
188 destroy Bob
189 Ola2 --> Bob: The end
190 `
191 );
192 });
193 it('should render a sequence diagram with actor creation and destruction coupled with backgrounds, loops and notes', () => {
194 imgSnapshotTest(
195 `
196 sequenceDiagram
197 accTitle: test the accTitle
198 accDescr: Test a description
199
200 participant Alice
201 participant Bob
202 autonumber 10 10
203 rect rgb(200, 220, 100)
204 rect rgb(200, 255, 200)
205
206 Alice ->> Bob: Hello Bob, how are you?
207 create participant John as John<br />Second Line
208 Bob-->>John: How about you John?
209 end
210
211 Bob--x Alice: I am good thanks!
212 Bob-x John: I am good thanks!
213 Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
214
215 Bob-->Alice: Checking with John...
216 Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
217 Bob-x John: Hey John - we're still waiting to know<br />how you're doing
218 Note over John:nowrap: John's trying hard not to break his train of thought.
219 destroy John
220 Bob-x John: John! Cmon!
221 Note over John: After a few more moments, John<br />finally snaps out of it.
222 end
223
224 autonumber off
225 alt either this
226 create actor Lola
227 Alice->>+Lola: Yes
228 Lola-->>-Alice: OK
229 else or this
230 autonumber
231 Alice->>Lola: No
232 else or this will happen
233 Alice->Lola: Maybe
234 end
235 autonumber 200
236 par this happens in parallel
237 destroy Bob
238 Alice -->> Bob: Parallel message 1
239 and
240 Alice -->> Lola: Parallel message 2
241 end
242 `
243 );
244 });
245 describe('font settings', () => {
246 it('should render different note fonts when configured', () => {
247 imgSnapshotTest(
248 `
249 sequenceDiagram
250 Alice->>Bob: I'm short
251 note left of Alice: I should have bigger fonts
252 Bob->>Alice: Short as well
253 `,
254 { sequence: { noteFontSize: 18, noteFontFamily: 'Arial' } }
255 );
256 });
257 it('should render different message fonts when configured', () => {
258 imgSnapshotTest(
259 `
260 sequenceDiagram
261 Alice->>Bob: I'm short
262 Bob->>Alice: Short as well
263 `,
264 { sequence: { messageFontSize: 18, messageFontFamily: 'Arial' } }
265 );
266 });
267 it('should render different actor fonts when configured', () => {
268 imgSnapshotTest(
269 `
270 sequenceDiagram
271 Alice->>Bob: I'm short
272 Bob->>Alice: Short as well
273 `,
274 { sequence: { actorFontSize: 18, actorFontFamily: 'times' } }
275 );
276 });
277 it('should render notes aligned to the left when configured', () => {
278 imgSnapshotTest(
279 `
280 sequenceDiagram
281 Alice->>Bob: I'm short
282 note left of Alice: I am left aligned
283 Bob->>Alice: Short as well
284 `,
285 { sequence: { noteAlign: 'left' } }
286 );
287 });
288 it('should render multi-line notes aligned to the left when configured', () => {
289 imgSnapshotTest(
290 `
291 sequenceDiagram
292 Alice->>Bob: I'm short
293 note left of Alice: I am left aligned<br>but also<br>multiline
294 Bob->>Alice: Short as well
295 `,
296 { sequence: { noteAlign: 'left' } }
297 );
298 });
299 it('should render notes aligned to the right when configured', () => {
300 imgSnapshotTest(
301 `
302 sequenceDiagram
303 Alice->>Bob: I'm short
304 note left of Alice: I am right aligned
305 Bob->>Alice: Short as well
306 `,
307 { sequence: { noteAlign: 'right' } }
308 );
309 });
310 it('should render multi-line notes aligned to the right when configured', () => {
311 imgSnapshotTest(
312 `
313 sequenceDiagram
314 Alice->>Bob: I'm short
315 note left of Alice: I am right aligned<br>but also<br>multiline
316 Bob->>Alice: Short as well
317 `,
318 { sequence: { noteAlign: 'right' } }
319 );
320 });
321 it('should render multi-line messages aligned to the left when configured', () => {
322 imgSnapshotTest(
323 `
324 sequenceDiagram
325 Alice->>Bob: I'm short<br>but also<br>multiline
326 Bob->>Alice: Short as well<br>and also<br>multiline
327 `,
328 { sequence: { messageAlign: 'left' } }
329 );
330 });
331 it('should render multi-line messages aligned to the right when configured', () => {
332 imgSnapshotTest(
333 `
334 sequenceDiagram
335 Alice->>Bob: I'm short<br>but also<br>multiline
336 Bob->>Alice: Short as well<br>and also<br>multiline
337 `,
338 { sequence: { messageAlign: 'right' } }
339 );
340 });
341 });
342 describe('auth width scaling', () => {
343 it('should render long actor descriptions', () => {
344 imgSnapshotTest(
345 `
346 sequenceDiagram
347 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
348 A->>Bob: Hola
349 Bob-->A: Pasten !
350 `,
351 { logLevel: 0 }
352 );
353 });
354 it('should wrap (inline) long actor descriptions', () => {
355 imgSnapshotTest(
356 `
357 sequenceDiagram
358 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
359 A->>Bob: Hola
360 Bob-->A: Pasten !
361 `,
362 { logLevel: 0 }
363 );
364 });
365 it('should wrap (directive) long actor descriptions', () => {
366 imgSnapshotTest(
367 `
368 %%{init: {'config': {'wrap': true }}}%%
369 sequenceDiagram
370 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
371 A->>Bob: Hola
372 Bob-->A: Pasten !
373 `,
374 {}
375 );
376 });
377 it('should be possible to use actor symbols instead of boxes', () => {
378 imgSnapshotTest(
379 `
380 sequenceDiagram
381 actor Alice
382 actor Bob
383 Alice->>Bob: Hi Bob
384 Bob->>Alice: Hi Alice
385 `,
386 {}
387 );
388 });
389 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', () => {
390 imgSnapshotTest(
391 `
392 sequenceDiagram
393 actor Bob
394 Alice->>Bob: Hi Bob
395 Bob->>Alice: Hi Alice
396 `,
397 {}
398 );
399 cy.get('.actor').should('have.class', 'actor-top');
400 cy.get('.actor-man').should('have.class', 'actor-top');
401 cy.get('.actor.actor-top').should('not.have.class', 'actor-bottom');
402 cy.get('.actor-man.actor-top').should('not.have.class', 'actor-bottom');
403
404 cy.get('.actor').should('have.class', 'actor-bottom');
405 cy.get('.actor-man').should('have.class', 'actor-bottom');
406 cy.get('.actor.actor-bottom').should('not.have.class', 'actor-top');
407 cy.get('.actor-man.actor-bottom').should('not.have.class', 'actor-top');
408
409 cy.get('text.actor-box').should('include.text', 'Alice');
410 cy.get('text.actor-man').should('include.text', 'Bob');
411 });
412 it('should render long notes left of actor', () => {
413 imgSnapshotTest(
414 `
415 sequenceDiagram
416 Alice->>Bob: Hola
417 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
418 Bob->>Alice: I'm short though
419 `,
420 {}
421 );
422 });
423 it('should render long notes wrapped (inline) left of actor', () => {
424 imgSnapshotTest(
425 `
426 sequenceDiagram
427 Alice->>Bob: Hola
428 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
429 Bob->>Alice: I'm short though
430 `,
431 {}
432 );
433 });
434 it('should render long notes right of actor', () => {
435 imgSnapshotTest(
436 `
437 sequenceDiagram
438 Alice->>Bob: Hola
439 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
440 Bob->>Alice: I'm short though
441 `,
442 {}
443 );
444 });
445 it('should render long notes wrapped (inline) right of actor', () => {
446 imgSnapshotTest(
447 `
448 sequenceDiagram
449 Alice->>Bob: Hola
450 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
451 Bob->>Alice: I'm short though
452 `,
453 {}
454 );
455 });
456 it('should render long notes over actor', () => {
457 imgSnapshotTest(
458 `
459 sequenceDiagram
460 Alice->>Bob: Hola
461 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
462 Bob->>Alice: I'm short though
463 `,
464 {}
465 );
466 });
467 it('should render long notes wrapped (inline) over actor', () => {
468 imgSnapshotTest(
469 `
470 sequenceDiagram
471 Alice->>Bob: Hola
472 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
473 Bob->>Alice: I'm short though
474 `,
475 {}
476 );
477 });
478 it('should render notes over actors and participant', () => {
479 imgSnapshotTest(
480 `
481 sequenceDiagram
482 actor Alice
483 participant Charlie
484 note over Alice: some note
485 note over Charlie: other note
486 `,
487 {}
488 );
489 });
490 it('should render long messages from an actor to the left to one to the right', () => {
491 imgSnapshotTest(
492 `
493 sequenceDiagram
494 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
495 Bob->>Alice: I'm short though
496 `,
497 {}
498 );
499 });
500 it('should render long messages wrapped (inline) from an actor to the left to one to the right', () => {
501 imgSnapshotTest(
502 `
503 sequenceDiagram
504 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
505 Bob->>Alice: I'm short though
506 `,
507 {}
508 );
509 });
510 it('should render long messages from an actor to the right to one to the left', () => {
511 imgSnapshotTest(
512 `
513 sequenceDiagram
514 Alice->>Bob: I'm short
515 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
516 `,
517 {}
518 );
519 });
520 it('should render long messages wrapped (inline) from an actor to the right to one to the left', () => {
521 imgSnapshotTest(
522 `
523 sequenceDiagram
524 Alice->>Bob: I'm short
525 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
526 `,
527 {}
528 );
529 });
530 });
531 describe('background rects', () => {
532 it('should render a single and nested rects', () => {
533 imgSnapshotTest(
534 `
535 sequenceDiagram
536 participant A
537 participant B
538 participant C
539 participant D
540 participant E
541 participant G
542
543 A ->>+ B: Task 1
544 rect rgb(178, 102, 255)
545 B ->>+ C: Task 2
546 C -->>- B: Return
547 end
548
549 A ->> D: Task 3
550 rect rgb(0, 128, 255)
551 D ->>+ E: Task 4
552 rect rgb(0, 204, 0)
553 E ->>+ G: Task 5
554 G -->>- E: Return
555 end
556 E ->> E: Task 6
557 end
558 D -->> A: Complete
559 `,
560 {}
561 );
562 });
563 it('should render a single and nested opt with long test overflowing', () => {
564 imgSnapshotTest(
565 `
566 sequenceDiagram
567 participant A
568 participant B
569 participant C
570 participant D
571 participant E
572 participant G
573
574 A ->>+ B: Task 1
575 opt this is an opt with a long title that will overflow
576 B ->>+ C: Task 2
577 C -->>- B: Return
578 end
579
580 A ->> D: Task 3
581 opt this is another opt with a long title that will overflow
582 D ->>+ E: Task 4
583 opt this is a nested opt with a long title that will overflow
584 E ->>+ G: Task 5
585 G -->>- E: Return
586 end
587 E ->> E: Task 6
588 end
589 D -->> A: Complete
590 `,
591 {}
592 );
593 });
594 it('should render a single and nested opt with long test wrapping', () => {
595 imgSnapshotTest(
596 `
597 %%{init: { 'config': { 'wrap': true } } }%%
598 sequenceDiagram
599 participant A
600 participant B
601 participant C
602 participant D
603 participant E
604 participant G
605
606 A ->>+ B: Task 1
607 opt this is an opt with a long title that will overflow
608 B ->>+ C: Task 2
609 C -->>- B: Return
610 end
611
612 A ->> D: Task 3
613 opt this is another opt with a long title that will overflow
614 D ->>+ E: Task 4
615 opt this is a nested opt with a long title that will overflow
616 E ->>+ G: Task 5
617 G -->>- E: Return
618 end
619 E ->> E: Task 6
620 end
621 D -->> A: Complete
622 `,
623 {}
624 );
625 });
626 it('should render rect around and inside loops', () => {
627 imgSnapshotTest(
628 `
629 sequenceDiagram
630 A ->> B: 1
631 rect rgb(204, 0, 102)
632 loop check C
633 C ->> C: Every 10 seconds
634 end
635 end
636 A ->> B: 2
637 loop check D
638 C ->> D: 3
639 rect rgb(153, 153, 255)
640 D -->> D: 5
641 D --> C: 4
642 end
643 end
644 `,
645 {}
646 );
647 });
648 it('should render rect around and inside alts', () => {
649 imgSnapshotTest(
650 `
651 sequenceDiagram
652 A ->> B: 1
653 rect rgb(204, 0, 102)
654 alt yes
655 C ->> C: 1
656 else no
657 rect rgb(0, 204, 204)
658 C ->> C: 0
659 end
660 end
661 end
662 B ->> A: Return
663 `,
664 {}
665 );
666 });
667 it('should render rect around and inside opts', () => {
668 imgSnapshotTest(
669 `
670 sequenceDiagram
671 A ->> B: 1
672 rect rgb(204, 0, 102)
673 opt maybe
674 C -->> D: Do something
675 rect rgb(0, 204, 204)
676 C ->> C: 0
677 end
678 end
679 end
680
681 opt possibly
682 rect rgb(0, 204, 204)
683 C ->> C: 0
684 end
685 end
686 B ->> A: Return
687 `,
688 {}
689 );
690 });
691 it('should render rect around and inside criticals', () => {
692 imgSnapshotTest(
693 `
694 sequenceDiagram
695 A ->> B: 1
696 rect rgb(204, 0, 102)
697 critical yes
698 C ->> C: 1
699 option no
700 rect rgb(0, 204, 204)
701 C ->> C: 0
702 end
703 end
704 end
705 B ->> A: Return
706 `,
707 {}
708 );
709 });
710 it('should render rect around and inside breaks', () => {
711 imgSnapshotTest(
712 `
713 sequenceDiagram
714 A ->> B: 1
715 rect rgb(204, 0, 102)
716 break yes
717 rect rgb(0, 204, 204)
718 C ->> C: 0
719 end
720 end
721 end
722 B ->> A: Return
723 `,
724 {}
725 );
726 });
727 it('should render autonumber when configured with such', () => {
728 imgSnapshotTest(
729 `
730 sequenceDiagram
731 Alice->>John: Hello John, how are you?
732 loop Healthcheck
733 John->>John: Fight against hypochondria
734 end
735 Note right of John: Rational thoughts!
736 John-->>Alice: Great!
737 John->>Bob: How about you?
738 Bob-->>John: Jolly good!
739 `,
740 { sequence: { actorMargin: 50, showSequenceNumbers: true } }
741 );
742 });
743 it('should render autonumber when autonumber keyword is used', () => {
744 imgSnapshotTest(
745 `
746 sequenceDiagram
747 autonumber
748 Alice->>John: Hello John, how are you?
749 loop Healthcheck
750 John->>John: Fight against hypochondria
751 end
752 Note right of John: Rational thoughts!
753 John-->>Alice: Great!
754 John->>Bob: How about you?
755 Bob-->>John: Jolly good!
756 `,
757 {}
758 );
759 });
760 it('should render autonumber with different line breaks', () => {
761 imgSnapshotTest(
762 `
763 sequenceDiagram
764 autonumber
765 Alice->>John: Hello John,<br>how are you?
766 Alice->>John: John,<br/>can you hear me?
767 John-->>Alice: Hi Alice,<br />I can hear you!
768 John-->>Alice: I feel great!
769 `,
770 {}
771 );
772 });
773 it('should render dark theme from init directive and configure font size 24 font', () => {
774 imgSnapshotTest(
775 `
776 %%{init: {'theme': 'dark', 'config': {'fontSize': 24}}}%%
777 sequenceDiagram
778 Alice->>John: Hello John, how are you?
779 Alice->>John: John, can you hear me?
780 John-->>Alice: Hi Alice, I can hear you!
781 John-->>Alice: I feel great!
782 `,
783 {}
784 );
785 });
786 it('should render with wrapping enabled', () => {
787 imgSnapshotTest(
788 `
789 %%{init: { 'config': { 'wrap': true }}}%%
790 sequenceDiagram
791 participant A as Alice, the talkative one
792 A->>John: Hello John, how are you today? I'm feeling quite verbose today.
793 A->>John: John, can you hear me? If you are not available, we can talk later.
794 John-->>A: Hi Alice, I can hear you! I was finishing up an important meeting.
795 John-->>A: I feel great! I was not ignoring you. I am sorry you had to wait for a response.
796 `,
797 {}
798 );
799 });
800 it('should render with an init directive', () => {
801 imgSnapshotTest(
802 `%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrap": true }}}%%
803 sequenceDiagram
804 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!
805 Note left of Alice: Bob thinks
806 Bob->>Alice: Fine!`,
807 {}
808 );
809 });
810 });
811 describe('directives', () => {
812 it('should override config with directive settings', () => {
813 imgSnapshotTest(
814 `
815 %%{init: { "config": { "mirrorActors": true }}}%%
816 sequenceDiagram
817 Alice->>Bob: I'm short
818 note left of Alice: config set to mirrorActors: false<br/>directive set to mirrorActors: true
819 Bob->>Alice: Short as well
820 `,
821 {
822 logLevel: 0,
823 sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
824 }
825 );
826 });
827 it('should override config with directive settings 2', () => {
828 imgSnapshotTest(
829 `
830 %%{init: { "config": { "mirrorActors": false, "wrap": true }}}%%
831 sequenceDiagram
832 Alice->>Bob: I'm short
833 note left of Alice: config: mirrorActors=true<br/>directive: mirrorActors=false
834 Bob->>Alice: Short as well
835 `,
836 {
837 logLevel: 0,
838 sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
839 }
840 );
841 });
842 });
843 describe('links', () => {
844 it('should support actor links', () => {
845 renderGraph(
846 `
847 sequenceDiagram
848 link Alice: Dashboard @ https://dashboard.contoso.com/alice
849 link Alice: Wiki @ https://wiki.contoso.com/alice
850 link John: Dashboard @ https://dashboard.contoso.com/john
851 link John: Wiki @ https://wiki.contoso.com/john
852 Alice->>John: Hello John<br/>
853 John-->>Alice: Great<br/><br/>day!
854 `,
855 { securityLevel: 'loose' }
856 );
857 cy.get('#actor0_popup').should((popupMenu) => {
858 const style = popupMenu.attr('style');
859 // expect(style).to.undefined;
860 });
861 cy.get('#root-0').click();
862 cy.get('#actor0_popup').should((popupMenu) => {
863 const style = popupMenu.attr('style');
864 expect(style).to.match(/^display: block;$/);
865 });
866 cy.get('#root-0').click();
867 cy.get('#actor0_popup').should((popupMenu) => {
868 const style = popupMenu.attr('style');
869 expect(style).to.match(/^display: none;$/);
870 });
871 });
872 it('should support actor links and properties EXPERIMENTAL: USE WITH CAUTION', () => {
873 //Be aware that the syntax for "properties" is likely to be changed.
874 imgSnapshotTest(
875 `
876 %%{init: { "config": { "mirrorActors": true, "forceMenus": true }}}%%
877 sequenceDiagram
878 participant a as Alice
879 participant j as John
880 note right of a: Hello world!
881 properties a: {"class": "internal-service-actor", "type": "@clock"}
882 properties j: {"class": "external-service-actor", "type": "@computer"}
883 links a: {"Repo": "https://www.contoso.com/repo", "Swagger": "https://www.contoso.com/swagger"}
884 links j: {"Repo": "https://www.contoso.com/repo"}
885 links a: {"Dashboard": "https://www.contoso.com/dashboard", "On-Call": "https://www.contoso.com/oncall"}
886 link a: Contacts @ https://contacts.contoso.com/?contact=alice@contoso.com
887 a->>j: Hello John, how are you?
888 j-->>a: Great!
889 `,
890 {
891 logLevel: 0,
892 sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' },
893 }
894 );
895 });
896
897 it('should handle bidirectional arrows with autonumber', () => {
898 imgSnapshotTest(`
899 sequenceDiagram
900 autonumber
901 participant A
902 participant B
903 A<<->>B: This is a bidirectional message
904 A->B: This is a normal message`);
905 });
906
907 it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
908 //Be aware that the syntax for "properties" is likely to be changed.
909 imgSnapshotTest(
910 `
911 %%{init: { "config": { "mirrorActors": false, "forceMenus": true, "wrap": true }}}%%
912 sequenceDiagram
913 participant a as Alice
914 participant j as John
915 note right of a: Hello world!
916 properties a: {"class": "internal-service-actor", "type": "@clock"}
917 properties j: {"class": "external-service-actor", "type": "@computer"}
918 links a: {"Repo": "https://www.contoso.com/repo", "Swagger": "https://www.contoso.com/swagger"}
919 links j: {"Repo": "https://www.contoso.com/repo"}
920 links a: {"Dashboard": "https://www.contoso.com/dashboard", "On-Call": "https://www.contoso.com/oncall"}
921 a->>j: Hello John, how are you?
922 j-->>a: Great!
923 `,
924 {
925 logLevel: 0,
926 sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
927 }
928 );
929 });
930 it("shouldn't display unused participants", () => {
931 //Be aware that the syntax for "properties" is likely to be changed.
932 imgSnapshotTest(
933 `
934 %%{init: { "config": { "sequence": {"hideUnusedParticipants": true }}}}%%
935 sequenceDiagram
936 participant a
937 `,
938 {
939 logLevel: 0,
940 sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
941 }
942 );
943 });
944 });
945 describe('svg size', () => {
946 it('should render a sequence diagram when useMaxWidth is true (default)', () => {
947 renderGraph(
948 `
949 sequenceDiagram
950 participant Alice
951 participant Bob
952 participant John as John<br/>Second Line
953 Alice ->> Bob: Hello Bob, how are you?
954 Bob-->>John: How about you John?
955 Bob--x Alice: I am good thanks!
956 Bob-x John: I am good thanks!
957 Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
958 Bob-->Alice: Checking with John...
959 alt either this
960 Alice->>John: Yes
961 else or this
962 Alice->>John: No
963 else or this will happen
964 Alice->John: Maybe
965 end
966 par this happens in parallel
967 Alice -->> Bob: Parallel message 1
968 and
969 Alice -->> John: Parallel message 2
970 end
971 `,
972 { sequence: { useMaxWidth: true } }
973 );
974 cy.get('svg').should((svg) => {
975 expect(svg).to.have.attr('width', '100%');
976 // expect(svg).to.have.attr('height');
977 // const height = parseFloat(svg.attr('height'));
978 // expect(height).to.be.within(920, 971);
979 const style = svg.attr('style');
980 expect(style).to.match(/^max-width: [\d.]+px;$/);
981 const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
982 // use within because the absolute value can be slightly different depending on the environment ±5%
983 expect(maxWidthValue).to.be.within(820 * 0.95, 820 * 1.05);
984 });
985 });
986 it('should render a sequence diagram when useMaxWidth is false', () => {
987 renderGraph(
988 `
989 sequenceDiagram
990 participant Alice
991 participant Bob
992 participant John as John<br/>Second Line
993 Alice ->> Bob: Hello Bob, how are you?
994 Bob-->>John: How about you John?
995 Bob--x Alice: I am good thanks!
996 Bob-x John: I am good thanks!
997 Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
998 Bob-->Alice: Checking with John...
999 alt either this
1000 Alice->>John: Yes
1001 else or this
1002 Alice->>John: No
1003 else or this will happen
1004 Alice->John: Maybe
1005 end
1006 par this happens in parallel
1007 Alice -->> Bob: Parallel message 1
1008 and
1009 Alice -->> John: Parallel message 2
1010 end
1011 `,
1012 { sequence: { useMaxWidth: false } }
1013 );
1014 cy.get('svg').should((svg) => {
1015 // const height = parseFloat(svg.attr('height'));
1016 const width = parseFloat(svg.attr('width'));
1017 // expect(height).to.be.within(920, 971);
1018 // use within because the absolute value can be slightly different depending on the environment ±5%
1019 expect(width).to.be.within(820 * 0.95, 820 * 1.05);
1020 expect(svg).to.not.have.attr('style');
1021 });
1022 });
1023 });
1024 describe('render after error', () => {
1025 it('should render diagram after fixing destroy participant error', () => {
1026 cy.on('uncaught:exception', (err) => {
1027 return false;
1028 });
1029
1030 renderGraph([
1031 `sequenceDiagram
1032 Alice->>Bob: Hello Bob, how are you ?
1033 Bob->>Alice: Fine, thank you. And you?
1034 create participant Carl
1035 Alice->>Carl: Hi Carl!
1036 create actor D as Donald
1037 Carl->>D: Hi!
1038 destroy Carl
1039 Alice-xCarl: We are too many
1040 destroy Bo
1041 Bob->>Alice: I agree`,
1042 `sequenceDiagram
1043 Alice->>Bob: Hello Bob, how are you ?
1044 Bob->>Alice: Fine, thank you. And you?
1045 create participant Carl
1046 Alice->>Carl: Hi Carl!
1047 create actor D as Donald
1048 Carl->>D: Hi!
1049 destroy Carl
1050 Alice-xCarl: We are too many
1051 destroy Bob
1052 Bob->>Alice: I agree`,
1053 ]);
1054 });
1055 });
1056 describe('render new arrow type', () => {
1057 it('should render Solid half arrow top', () => {
1058 imgSnapshotTest(
1059 `
1060 sequenceDiagram
1061 Alice -|\\ John: Hello John, how are you?
1062 Alice-|\\ John: Hi Alice, I can hear you!
1063 Alice -|\\ John: Test
1064 `
1065 );
1066 });
1067 it('should render Solid half arrow bottom', () => {
1068 imgSnapshotTest(
1069 `
1070 sequenceDiagram
1071 Alice-|/John: Hello John, how are you?
1072 Alice-|/John: Hi Alice, I can hear you!
1073 Alice-|/John: Test
1074 `
1075 );
1076 });
1077
1078 it('should render Stick half arrow top ', () => {
1079 imgSnapshotTest(
1080 `
1081 sequenceDiagram
1082 Alice-\\\\John: Hello John, how are you?
1083 Alice-\\\\John: Hi Alice, I can hear you!
1084 Alice-\\\\John: Test
1085 `
1086 );
1087 });
1088 it('should render Stick half arrow bottom ', () => {
1089 imgSnapshotTest(
1090 `
1091 sequenceDiagram
1092 Alice-//John: Hello John, how are you?
1093 Alice-//John: Hi Alice, I can hear you!
1094 Alice-//John: Test
1095 `
1096 );
1097 });
1098 it('should render Solid half arrow top reverse ', () => {
1099 imgSnapshotTest(
1100 `
1101 sequenceDiagram
1102 Alice/|-John: Hello Alice, how are you?
1103 Alice/|-John: Hi Alice, I can hear you!
1104 Alice/|-John: Test
1105
1106 `
1107 );
1108 });
1109
1110 it('should render Solid half arrow bottom reverse ', () => {
1111 imgSnapshotTest(
1112 `sequenceDiagram
1113 Alice \\|- John: Hello Alice, how are you?
1114 Alice \\|- John: Hi Alice, I can hear you!
1115 Alice \\|- John: Test`
1116 );
1117 });
1118
1119 it('should render Stick half arrow top reverse ', () => {
1120 imgSnapshotTest(
1121 `
1122 sequenceDiagram
1123 Alice //-John: Hello Alice, how are you?
1124 Alice //-John: Hi Alice, I can hear you!
1125 Alice //-John: Test`
1126 );
1127 });
1128
1129 it('should render Stick half arrow bottom reverse ', () => {
1130 imgSnapshotTest(
1131 `
1132 sequenceDiagram
1133 Alice \\\\-John: Hello Alice, how are you?
1134 Alice \\\\-John: Hi Alice, I can hear you!
1135 Alice \\\\-John: Test`
1136 );
1137 });
1138
1139 it('should render Solid half arrow top dotted', () => {
1140 imgSnapshotTest(
1141 `
1142 sequenceDiagram
1143 Alice --|\\John: Hello John, how are you?
1144 Alice --|\\John: Hi Alice, I can hear you!
1145 Alice --|\\John: Test`
1146 );
1147 });
1148
1149 it('should render Solid half arrow bottom dotted', () => {
1150 imgSnapshotTest(
1151 `
1152 sequenceDiagram
1153 Alice --|/John: Hello John, how are you?
1154 Alice --|/John: Hi Alice, I can hear you!
1155 Alice --|/John: Test`
1156 );
1157 });
1158
1159 it('should render Stick half arrow top dotted', () => {
1160 imgSnapshotTest(
1161 `
1162 sequenceDiagram
1163 Alice--\\\\John: Hello John, how are you?
1164 Alice--\\\\John: Hi Alice, I can hear you!
1165 Alice--\\\\John: Test`
1166 );
1167 });
1168
1169 it('should render Stick half arrow bottom dotted', () => {
1170 imgSnapshotTest(
1171 `
1172 sequenceDiagram
1173 Alice--//John: Hello John, how are you?
1174 Alice--//John: Hi Alice, I can hear you!
1175 Alice--//John: Test`
1176 );
1177 });
1178
1179 it('should render Solid half arrow top reverse dotted', () => {
1180 imgSnapshotTest(
1181 `
1182 sequenceDiagram
1183 Alice/|--John: Hello Alice, how are you?
1184 Alice/|--John: Hi Alice, I can hear you!
1185 Alice/|--John: Test`
1186 );
1187 });
1188
1189 it('should render Solid half arrow bottom reverse dotted', () => {
1190 imgSnapshotTest(
1191 `
1192 sequenceDiagram
1193 Alice\\|--John: Hello Alice, how are you?
1194 Alice\\|--John: Hi Alice, I can hear you!
1195 Alice\\|--John: Test`
1196 );
1197 });
1198
1199 it('should render Stick half arrow top reverse dotted ', () => {
1200 imgSnapshotTest(
1201 `
1202 sequenceDiagram
1203 Alice//--John: Hello Alice, how are you?
1204 Alice//--John: Hi Alice, I can hear you!
1205 Alice//--John: Test`
1206 );
1207 });
1208
1209 it('should render Stick half arrow bottom reverse dotted ', () => {
1210 imgSnapshotTest(
1211 `
1212 sequenceDiagram
1213 Alice\\\\--John: Hello Alice, how are you?
1214 Alice\\\\--John: Hi Alice, I can hear you!
1215 Alice\\\\--John: Test`
1216 );
1217 });
1218 });
1219});
1220