26.9 KB1110 lines
Blame
1import { imgSnapshotTest, renderGraph, verifyNumber } from '../../helpers/util.ts';
2
3describe('Flowchart ELK', () => {
4 it('1-elk: should render a simple flowchart', () => {
5 imgSnapshotTest(
6 `flowchart-elk TD
7 A[Christmas] -->|Get money| B(Go shopping)
8 B --> C{Let me think}
9 C -->|One| D[Laptop]
10 C -->|Two| E[iPhone]
11 C -->|Three| F[fa:fa-car Car]
12 `,
13 {}
14 );
15 imgSnapshotTest(
16 `flowchart TD
17 A[Christmas] -->|Get money| B(Go shopping)
18 B --> C{Let me think}
19 C -->|One| D[Laptop]
20 C -->|Two| E[iPhone]
21 C -->|Three| F[fa:fa-car Car]
22 `,
23 { flowchart: { defaultRenderer: 'elk' } }
24 );
25 });
26
27 it('2-elk: should render a simple flowchart with diagramPadding set to 0', () => {
28 imgSnapshotTest(
29 `flowchart-elk TD
30 A[Christmas] -->|Get money| B(Go shopping)
31 B --> C{Let me think}
32 %% this is a comment
33 C -->|One| D[Laptop]
34 C -->|Two| E[iPhone]
35 C -->|Three| F[fa:fa-car Car]
36 `,
37 { flowchart: { diagramPadding: 0 } }
38 );
39 });
40
41 it('3-elk: a link with correct arrowhead to a subgraph', () => {
42 imgSnapshotTest(
43 `flowchart-elk TD
44 P1
45 P1 -->P1.5
46 subgraph P1.5
47 P2
48 P2.5(( A ))
49 P3
50 end
51 P2 --> P4
52 P3 --> P6
53 P1.5 --> P5
54 `,
55 {}
56 );
57 });
58
59 it('4-elk: Length of edges', () => {
60 imgSnapshotTest(
61 `flowchart-elk TD
62 L1 --- L2
63 L2 --- C
64 M1 ---> C
65 R1 .-> R2
66 R2 <.-> C
67 C -->|Label 1| E1
68 C <-- Label 2 ---> E2
69 C ----> E3
70 C <-...-> E4
71 C ======> E5
72 `,
73 {}
74 );
75 });
76 it('5-elk: should render escaped without html labels', () => {
77 imgSnapshotTest(
78 `flowchart-elk TD
79 a["<strong>Haiya</strong>"]---->b
80 `,
81 { htmlLabels: false, flowchart: { htmlLabels: false } }
82 );
83 });
84 it('6-elk: should render non-escaped with html labels', () => {
85 imgSnapshotTest(
86 `flowchart-elk TD
87 a["<strong>Haiya</strong>"]===>b
88 `,
89 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
90 );
91 });
92 it('7-elk: should render a flowchart when useMaxWidth is true (default)', () => {
93 renderGraph(
94 `flowchart-elk TD
95 A[Christmas] -->|Get money| B(Go shopping)
96 B --> C{Let me think}
97 C -->|One| D[Laptop]
98 C -->|Two| E[iPhone]
99 C -->|Three| F[fa:fa-car Car]
100 `,
101 { flowchart: { useMaxWidth: true } }
102 );
103 cy.get('svg').should((svg) => {
104 expect(svg).to.have.attr('width', '100%');
105 // expect(svg).to.have.attr('height');
106 // use within because the absolute value can be slightly different depending on the environment ±5%
107 // const height = parseFloat(svg.attr('height'));
108 // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
109 const style = svg.attr('style');
110 expect(style).to.match(/^max-width: [\d.]+px;$/);
111 const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
112 verifyNumber(maxWidthValue, 380, 15);
113 });
114 });
115 it('8-elk: should render a flowchart when useMaxWidth is false', () => {
116 renderGraph(
117 `flowchart-elk TD
118 A[Christmas] -->|Get money| B(Go shopping)
119 B --> C{Let me think}
120 C -->|One| D[Laptop]
121 C -->|Two| E[iPhone]
122 C -->|Three| F[fa:fa-car Car]
123 `,
124 { flowchart: { useMaxWidth: false } }
125 );
126 cy.get('svg').should((svg) => {
127 // const height = parseFloat(svg.attr('height'));
128 const width = parseFloat(svg.attr('width'));
129 // use within because the absolute value can be slightly different depending on the environment ±5%
130 // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
131 verifyNumber(width, 380, 15);
132 expect(svg).to.not.have.attr('style');
133 });
134 });
135
136 it('V2 elk - 16: Render Stadium shape', () => {
137 imgSnapshotTest(
138 ` flowchart-elk TD
139 A([stadium shape test])
140 A -->|Get money| B([Go shopping])
141 B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
142 C -->|One| D([Laptop])
143 C -->|Two| E([iPhone])
144 C -->|Three| F([Car<br/>wroom wroom])
145 click A "index.html#link-clicked" "link test"
146 click B testClick "click test"
147 classDef someclass fill:#f96;
148 class A someclass;
149 class C someclass;
150 `,
151 { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
152 );
153 });
154
155 it('50-elk: handle nested subgraphs in reverse order', () => {
156 imgSnapshotTest(
157 `flowchart-elk LR
158 a -->b
159 subgraph A
160 B
161 end
162 subgraph B
163 b
164 end
165 `,
166 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
167 );
168 });
169
170 it('51-elk: handle nested subgraphs in reverse order', () => {
171 imgSnapshotTest(
172 `flowchart-elk LR
173 a -->b
174 subgraph A
175 B
176 end
177 subgraph B
178 b
179 end
180 `,
181 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
182 );
183 });
184
185 it('52-elk: handle nested subgraphs in several levels', () => {
186 imgSnapshotTest(
187 `flowchart-elk TB
188 b-->B
189 a-->c
190 subgraph O
191 A
192 end
193 subgraph B
194 c
195 end
196 subgraph A
197 a
198 b
199 B
200 end
201 `,
202 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
203 );
204 });
205
206 it('53-elk: handle nested subgraphs with edges in and out', () => {
207 imgSnapshotTest(
208 `flowchart-elk TB
209 internet
210 nat
211 router
212 lb1
213 lb2
214 compute1
215 compute2
216 subgraph project
217 router
218 nat
219 subgraph subnet1
220 compute1
221 lb1
222 end
223 subgraph subnet2
224 compute2
225 lb2
226 end
227 end
228 internet --> router
229 router --> subnet1 & subnet2
230 subnet1 & subnet2 --> nat --> internet
231 `,
232 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
233 );
234 });
235
236 it('54-elk: handle nested subgraphs with outgoing links', () => {
237 imgSnapshotTest(
238 `flowchart-elk TD
239 subgraph main
240 subgraph subcontainer
241 subcontainer-child
242 end
243 subcontainer-child--> subcontainer-sibling
244 end
245 `,
246 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
247 );
248 });
249
250 it('55-elk: handle nested subgraphs with outgoing links 2', () => {
251 imgSnapshotTest(
252 `flowchart-elk TD
253
254subgraph one[One]
255 subgraph sub_one[Sub One]
256 _sub_one
257 end
258 subgraph sub_two[Sub Two]
259 _sub_two
260 end
261 _one
262end
263
264%% here, either the first or the second one
265sub_one --> sub_two
266_one --> b
267 `,
268 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
269 );
270 });
271
272 it('56-elk: handle nested subgraphs with outgoing links 3', () => {
273 imgSnapshotTest(
274 `flowchart-elk TB
275 subgraph container_Beta
276 process_C-->Process_D
277 end
278 subgraph container_Alpha
279 process_A-->process_B
280 process_A-->|messages|process_C
281 end
282 process_B-->|via_AWSBatch|container_Beta
283 `,
284 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
285 );
286 });
287 it('57-elk: handle nested subgraphs with outgoing links 4', () => {
288 imgSnapshotTest(
289 `flowchart-elk LR
290subgraph A
291a -->b
292end
293subgraph B
294b
295end
296 `,
297 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
298 );
299 });
300
301 it('57-elk: handle nested subgraphs with outgoing links 2', () => {
302 imgSnapshotTest(
303 `flowchart-elk TB
304 c1-->a2
305 subgraph one
306 a1-->a2
307 end
308 subgraph two
309 b1-->b2
310 end
311 subgraph three
312 c1-->c2
313 end
314 one --> two
315 three --> two
316 two --> c2
317 `,
318 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
319 );
320 });
321 it('57.x: handle nested subgraphs with outgoing links 5', () => {
322 imgSnapshotTest(
323 `%% this does not produce the desired result
324flowchart-elk TB
325 subgraph container_Beta
326 process_C-->Process_D
327 end
328 subgraph container_Alpha
329 process_A-->process_B
330 process_B-->|via_AWSBatch|container_Beta
331 process_A-->|messages|process_C
332 end
333 `,
334 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
335 );
336 });
337 it('58-elk: handle styling with style expressions', () => {
338 imgSnapshotTest(
339 `
340 flowchart-elk LR
341 id1(Start)-->id2(Stop)
342 style id1 fill:#f9f,stroke:#333,stroke-width:4px
343 style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
344 `,
345 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
346 );
347 });
348 it('59-elk: handle styling of subgraphs and links', () => {
349 imgSnapshotTest(
350 `
351flowchart-elk TD
352 A[Christmas] ==> D
353 A[Christmas] -->|Get money| B(Go shopping)
354 A[Christmas] ==> C
355 subgraph T ["Test"]
356 A
357 B
358 C
359 end
360
361 classDef Test fill:#F84E68,stroke:#333,color:white;
362 class A,T Test
363 classDef TestSub fill:green;
364 class T TestSub
365 linkStyle 0,1 color:orange, stroke: orange;
366 `,
367 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
368 );
369 });
370 it('60-elk: handle styling for all node shapes - v2', () => {
371 imgSnapshotTest(
372 `
373 flowchart-elk LR
374 A[red text] -->|default style| B(blue text)
375 C([red text]) -->|default style| D[[blue text]]
376 E[(red text)] -->|default style| F((blue text))
377 G>red text] -->|default style| H{blue text}
378 I{{red text}} -->|default style| J[/blue text/]
379 K[\\ red text\\] -->|default style| L[/blue text\\]
380 M[\\ red text/] -->|default style| N[blue text];
381 O(((red text))) -->|default style| P(((blue text)));
382 linkStyle default color:Sienna;
383 style A stroke:#ff0000,fill:#ffcccc,color:#ff0000;
384 style B stroke:#0000ff,fill:#ccccff,color:#0000ff;
385 style C stroke:#ff0000,fill:#ffcccc,color:#ff0000;
386 style D stroke:#0000ff,fill:#ccccff,color:#0000ff;
387 style E stroke:#ff0000,fill:#ffcccc,color:#ff0000;
388 style F stroke:#0000ff,fill:#ccccff,color:#0000ff;
389 style G stroke:#ff0000,fill:#ffcccc,color:#ff0000;
390 style H stroke:#0000ff,fill:#ccccff,color:#0000ff;
391 style I stroke:#ff0000,fill:#ffcccc,color:#ff0000;
392 style J stroke:#0000ff,fill:#ccccff,color:#0000ff;
393 style K stroke:#ff0000,fill:#ffcccc,color:#ff0000;
394 style L stroke:#0000ff,fill:#ccccff,color:#0000ff;
395 style M stroke:#ff0000,fill:#ffcccc,color:#ff0000;
396 style N stroke:#0000ff,fill:#ccccff,color:#0000ff;
397 style O stroke:#ff0000,fill:#ffcccc,color:#ff0000;
398 style P stroke:#0000ff,fill:#ccccff,color:#0000ff;
399 `,
400 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose', logLevel: 2 }
401 );
402 });
403 it('61-elk: fontawesome icons in edge labels', () => {
404 imgSnapshotTest(
405 `
406 flowchart-elk TD
407 C -->|fa:fa-car Car| F[fa:fa-car Car]
408 `,
409 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
410 );
411 });
412 it('62-elk: should render styled subgraphs', () => {
413 imgSnapshotTest(
414 `
415 flowchart-elk TB
416 A
417 B
418 subgraph foo[Foo SubGraph]
419 C
420 D
421 end
422 subgraph bar[Bar SubGraph]
423 E
424 F
425 end
426 G
427
428 A-->B
429 B-->C
430 C-->D
431 B-->D
432 D-->E
433 E-->A
434 E-->F
435 F-->D
436 F-->G
437 B-->G
438 G-->D
439
440 style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
441 style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
442 `,
443 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
444 );
445 });
446 it('63-elk: title on subgraphs should be themeable', () => {
447 imgSnapshotTest(
448 `
449 %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
450 flowchart-elk LR
451 subgraph A
452 a --> b
453 end
454 subgraph B
455 i -->f
456 end
457 A --> B
458 `,
459 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
460 );
461 });
462 it('65-elk: text-color from classes', () => {
463 imgSnapshotTest(
464 `
465 flowchart-elk LR
466 classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
467 Lorem --> Ipsum --> Dolor
468 class Lorem,Dolor dark
469 `,
470 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
471 );
472 });
473 it('66-elk: More nested subgraph cases (TB)', () => {
474 imgSnapshotTest(
475 `
476flowchart-elk TB
477 subgraph two
478 b1
479 end
480 subgraph three
481 c2
482 end
483
484 three --> two
485 two --> c2
486
487 `,
488 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
489 );
490 });
491 it('67-elk: More nested subgraph cases (RL)', () => {
492 imgSnapshotTest(
493 `
494flowchart-elk RL
495 subgraph two
496 b1
497 end
498 subgraph three
499 c2
500 end
501
502 three --> two
503 two --> c2
504
505 `,
506 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
507 );
508 });
509 it('68-elk: More nested subgraph cases (BT)', () => {
510 imgSnapshotTest(
511 `
512flowchart-elk BT
513 subgraph two
514 b1
515 end
516 subgraph three
517 c2
518 end
519
520 three --> two
521 two --> c2
522
523 `,
524 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
525 );
526 });
527 it('69-elk: More nested subgraph cases (LR)', () => {
528 imgSnapshotTest(
529 `
530flowchart-elk LR
531 subgraph two
532 b1
533 end
534 subgraph three
535 c2
536 end
537
538 three --> two
539 two --> c2
540
541 `,
542 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
543 );
544 });
545 it('70-elk: Handle nested subgraph cases (TB) link out and link between subgraphs', () => {
546 imgSnapshotTest(
547 `
548flowchart-elk TB
549 subgraph S1
550 sub1 -->sub2
551 end
552 subgraph S2
553 sub4
554 end
555 S1 --> S2
556 sub1 --> sub4
557 `,
558 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
559 );
560 });
561 it('71-elk: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
562 imgSnapshotTest(
563 `
564flowchart-elk RL
565 subgraph S1
566 sub1 -->sub2
567 end
568 subgraph S2
569 sub4
570 end
571 S1 --> S2
572 sub1 --> sub4
573 `,
574 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
575 );
576 });
577 it('72-elk: Handle nested subgraph cases (BT) link out and link between subgraphs', () => {
578 imgSnapshotTest(
579 `
580flowchart-elk BT
581 subgraph S1
582 sub1 -->sub2
583 end
584 subgraph S2
585 sub4
586 end
587 S1 --> S2
588 sub1 --> sub4
589 `,
590 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
591 );
592 });
593 it('74-elk: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
594 imgSnapshotTest(
595 `
596flowchart-elk RL
597 subgraph S1
598 sub1 -->sub2
599 end
600 subgraph S2
601 sub4
602 end
603 S1 --> S2
604 sub1 --> sub4
605 `,
606 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
607 );
608 });
609 it('74-elk: Handle labels for multiple edges from and to the same couple of nodes', () => {
610 imgSnapshotTest(
611 `
612flowchart-elk RL
613 subgraph one
614 a1 -- l1 --> a2
615 a1 -- l2 --> a2
616 end
617 `,
618 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
619 );
620 });
621
622 it('76-elk: handle unicode encoded character with HTML labels true', () => {
623 imgSnapshotTest(
624 `flowchart-elk TB
625 a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
626 --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
627 `,
628 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
629 );
630 });
631
632 it('2050-elk: handling of different rendering direction in subgraphs', () => {
633 imgSnapshotTest(
634 `
635 flowchart-elk LR
636
637 subgraph TOP
638 direction TB
639 subgraph B1
640 direction RL
641 i1 -->f1
642 end
643 subgraph B2
644 direction BT
645 i2 -->f2
646 end
647 end
648 A --> TOP --> B
649 B1 --> B2
650 `,
651 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
652 );
653 });
654
655 it('2388-elk: handling default in the node name', () => {
656 imgSnapshotTest(
657 `
658 flowchart-elk LR
659 default-index.js --> dot.template.js
660 index.js --> module-utl.js
661 `,
662 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
663 );
664 });
665 it('2824-elk: Clipping of edges', () => {
666 imgSnapshotTest(
667 `
668 flowchart-elk TD
669 A --> B
670 A --> C
671 B --> C
672 `,
673 { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
674 );
675 });
676 it('1433-elk: should render a titled flowchart with titleTopMargin set to 0', () => {
677 imgSnapshotTest(
678 `---
679title: Simple flowchart
680---
681flowchart-elk TD
682A --> B
683`,
684 { flowchart: { titleTopMargin: 0 } }
685 );
686 });
687 it('elk: should include classes on the edges', () => {
688 renderGraph(
689 `flowchart-elk TD
690 A --> B --> C --> D
691 `,
692 {}
693 );
694 cy.get('svg').should((svg) => {
695 const edges = svg[0].querySelectorAll('.edges > path');
696 edges.forEach((edge) => {
697 expect(edge).to.have.class('flowchart-link');
698 });
699 });
700 });
701 describe('Markdown strings flowchart-elk (#4220)', () => {
702 describe('html labels', () => {
703 it('With styling and classes', () => {
704 imgSnapshotTest(
705 `%%{init: {"flowchart": {"htmlLabels": true}} }%%
706flowchart-elk LR
707 A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
708 id1(Start)-->id2(Stop)
709 style id1 fill:#f9f,stroke:#333,stroke-width:4px
710 style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
711 classDef someclass fill:#f96
712`,
713 { flowchart: { titleTopMargin: 0 } }
714 );
715 });
716 it('With formatting in a node', () => {
717 imgSnapshotTest(
718 `%%{init: {"flowchart": {"htmlLabels": true}} }%%
719flowchart-elk LR
720 a{"\`The **cat** in the hat\`"} -- 1o --> b
721 a -- 2o --> c
722 a -- 3o --> d
723 g --2i--> a
724 d --1i--> a
725 h --3i -->a
726 b --> d(The dog in the hog)
727 c --> d
728`,
729 { flowchart: { titleTopMargin: 0 } }
730 );
731 });
732 it('New line in node and formatted edge label', () => {
733 imgSnapshotTest(
734 `%%{init: {"flowchart": {"htmlLabels": true}} }%%
735flowchart-elk LR
736b("\`The dog in **the** hog.(1)
737NL\`") --"\`1o **bold**\`"--> c
738`,
739 { flowchart: { titleTopMargin: 0 } }
740 );
741 });
742 it.skip('Wrapping long text with a new line', () => {
743 imgSnapshotTest(
744 `%%{init: {"flowchart": {"htmlLabels": true}} }%%
745flowchart-elk LR
746b(\`The dog in **the** hog.(1).. a a a a *very long text* about it
747Word!
748
749Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
750
751`,
752 { flowchart: { titleTopMargin: 0 } }
753 );
754 });
755 it('Sub graphs and markdown strings', () => {
756 imgSnapshotTest(
757 `%%{init: {"flowchart": {"htmlLabels": true}} }%%
758flowchart-elk LR
759subgraph "One"
760 a("\`The **cat**
761 in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
762end
763subgraph "\`**Two**\`"
764 c("\`The **cat**
765 in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
766end
767
768`,
769 { flowchart: { titleTopMargin: 0 } }
770 );
771 });
772 });
773
774 describe('svg text labels', () => {
775 it('With styling and classes', () => {
776 imgSnapshotTest(
777 `%%{init: {"flowchart": {"htmlLabels": false}} }%%
778flowchart-elk LR
779 A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
780 id1(Start)-->id2(Stop)
781 style id1 fill:#f9f,stroke:#333,stroke-width:4px
782 style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
783 classDef someclass fill:#f96
784`,
785 { flowchart: { titleTopMargin: 0 } }
786 );
787 });
788 it('With formatting in a node', () => {
789 imgSnapshotTest(
790 `%%{init: {"flowchart": {"htmlLabels": false}} }%%
791flowchart-elk LR
792 a{"\`The **cat** in the hat\`"} -- 1o --> b
793 a -- 2o --> c
794 a -- 3o --> d
795 g --2i--> a
796 d --1i--> a
797 h --3i -->a
798 b --> d(The dog in the hog)
799 c --> d
800`,
801 { flowchart: { titleTopMargin: 0 } }
802 );
803 });
804 it('New line in node and formatted edge label', () => {
805 imgSnapshotTest(
806 `%%{init: {"flowchart": {"htmlLabels": false}} }%%
807flowchart-elk LR
808b("\`The dog in **the** hog.(1)
809NL\`") --"\`1o **bold**\`"--> c
810`,
811 { flowchart: { titleTopMargin: 0 } }
812 );
813 });
814 it('Wrapping long text with a new line', () => {
815 imgSnapshotTest(
816 `%%{init: {"flowchart": {"htmlLabels": false}} }%%
817flowchart-elk LR
818b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
819Word!
820
821Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
822
823`,
824 { flowchart: { titleTopMargin: 0 } }
825 );
826 });
827 it('Sub graphs and markdown strings', () => {
828 imgSnapshotTest(
829 `%%{init: {"flowchart": {"htmlLabels": false}} }%%
830flowchart-elk LR
831subgraph "One"
832 a("\`The **cat**
833 in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
834end
835subgraph "\`**Two**\`"
836 c("\`The **cat**
837 in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
838end
839
840`,
841 { flowchart: { titleTopMargin: 0 } }
842 );
843 });
844 it('Sub graphs', () => {
845 imgSnapshotTest(
846 `---
847config:
848 layout: elk
849---
850
851flowchart LR
852 subgraph subgraph_ko6czgs5u["Untitled subgraph"]
853 D["Option 1"]
854 end
855 C{"Evaluate"} -- One --> D
856 C -- Two --> E(("Option 2"))
857 D --> E
858 A["A"]
859
860`,
861 { flowchart: { titleTopMargin: 0 } }
862 );
863 });
864 it('6080: should handle diamond shape intersections', () => {
865 imgSnapshotTest(
866 `---
867config:
868 layout: elk
869---
870flowchart LR
871 subgraph s1["Untitled subgraph"]
872 n1["Evaluate"]
873 n2["Option 1"]
874 n3["Option 2"]
875 n4["fa:fa-car Option 3"]
876 end
877 subgraph s2["Untitled subgraph"]
878 n5["Evaluate"]
879 n6["Option 1"]
880 n7["Option 2"]
881 n8["fa:fa-car Option 3"]
882 end
883 A["Start"] -- Some text --> B("Continue")
884 B --> C{"Evaluate"}
885 C -- One --> D["Option 1"]
886 C -- Two --> E["Option 2"]
887 C -- Three --> F["fa:fa-car Option 3"]
888 n1 -- One --> n2
889 n1 -- Two --> n3
890 n1 -- Three --> n4
891 n5 -- One --> n6
892 n5 -- Two --> n7
893 n5 -- Three --> n8
894 n1@{ shape: diam}
895 n2@{ shape: rect}
896 n3@{ shape: rect}
897 n4@{ shape: rect}
898 n5@{ shape: diam}
899 n6@{ shape: rect}
900 n7@{ shape: rect}
901 n8@{ shape: rect}
902
903`,
904 { flowchart: { titleTopMargin: 0 } }
905 );
906 });
907
908 it('6088-1: should handle diamond shape intersections', () => {
909 imgSnapshotTest(
910 `---
911config:
912 layout: elk
913---
914 flowchart LR
915 subgraph S2
916 subgraph s1["APA"]
917 D{"Use the editor"}
918 end
919
920
921 D -- Mermaid js --> I{"fa:fa-code Text"}
922 D --> I
923 D --> I
924
925 end
926`,
927 { flowchart: { titleTopMargin: 0 } }
928 );
929 });
930
931 it('6088-2: should handle diamond shape intersections', () => {
932 imgSnapshotTest(
933 `---
934config:
935 layout: elk
936---
937 flowchart LR
938 a
939 subgraph s0["APA"]
940 subgraph s8["APA"]
941 subgraph s1["APA"]
942 D{"X"}
943 E[Q]
944 end
945 subgraph s3["BAPA"]
946 F[Q]
947 I
948 end
949 D --> I
950 D --> I
951 D --> I
952
953 I{"X"}
954 end
955 end
956
957`,
958 { flowchart: { titleTopMargin: 0 } }
959 );
960 });
961
962 it('6088-3: should handle diamond shape intersections', () => {
963 imgSnapshotTest(
964 `---
965config:
966 layout: elk
967---
968 flowchart LR
969 a
970 D{"Use the editor"}
971
972 D -- Mermaid js --> I{"fa:fa-code Text"}
973 D-->I
974 D-->I
975
976`,
977 { flowchart: { titleTopMargin: 0 } }
978 );
979 });
980
981 it('6088-4: should handle diamond shape intersections', () => {
982 imgSnapshotTest(
983 `---
984config:
985 layout: elk
986---
987flowchart LR
988 subgraph s1["Untitled subgraph"]
989 n1["Evaluate"]
990 n2["Option 1"]
991 n3["Option 2"]
992 n4["fa:fa-car Option 3"]
993 end
994 subgraph s2["Untitled subgraph"]
995 n5["Evaluate"]
996 n6["Option 1"]
997 n7["Option 2"]
998 n8["fa:fa-car Option 3"]
999 end
1000 A["Start"] -- Some text --> B("Continue")
1001 B --> C{"Evaluate"}
1002 C -- One --> D["Option 1"]
1003 C -- Two --> E["Option 2"]
1004 C -- Three --> F["fa:fa-car Option 3"]
1005 n1 -- One --> n2
1006 n1 -- Two --> n3
1007 n1 -- Three --> n4
1008 n5 -- One --> n6
1009 n5 -- Two --> n7
1010 n5 -- Three --> n8
1011 n1@{ shape: diam}
1012 n2@{ shape: rect}
1013 n3@{ shape: rect}
1014 n4@{ shape: rect}
1015 n5@{ shape: diam}
1016 n6@{ shape: rect}
1017 n7@{ shape: rect}
1018 n8@{ shape: rect}
1019
1020`,
1021 { flowchart: { titleTopMargin: 0 } }
1022 );
1023 });
1024
1025 it('6088-5: should handle diamond shape intersections', () => {
1026 imgSnapshotTest(
1027 `---
1028config:
1029 layout: elk
1030---
1031flowchart LR
1032 A{A} --> B & C
1033
1034`,
1035 { flowchart: { titleTopMargin: 0 } }
1036 );
1037 });
1038 it('6088-6: should handle diamond shape intersections', () => {
1039 imgSnapshotTest(
1040 `---
1041config:
1042 layout: elk
1043---
1044flowchart LR
1045 A{A} --> B & C
1046 subgraph "subbe"
1047 A
1048 end
1049
1050`,
1051 { flowchart: { titleTopMargin: 0 } }
1052 );
1053 });
1054 });
1055 });
1056
1057 it('6647-elk: should keep node order when using elk layout unless it would add crossings', () => {
1058 imgSnapshotTest(
1059 `---
1060config:
1061 layout: elk
1062---
1063 flowchart TB
1064 a --> a1 & a2 & a3 & a4
1065 b --> b1 & b2
1066 b2 --> b3
1067 b1 --> b4
1068 `
1069 );
1070 });
1071});
1072
1073describe('Title and arrow styling #4813', () => {
1074 it('should render a flowchart with title', () => {
1075 const titleString = 'Test Title';
1076 renderGraph(
1077 `---
1078 title: ${titleString}
1079 ---
1080 flowchart LR
1081 A-->B
1082 A-->C`,
1083 { layout: 'elk' }
1084 );
1085 cy.get('svg').should((svg) => {
1086 const title = svg[0].querySelector('text');
1087 expect(title.textContent).to.contain(titleString);
1088 });
1089 });
1090
1091 it('Render with stylized arrows', () => {
1092 renderGraph(
1093 `
1094 flowchart LR
1095 A-->B
1096 B-.-oC
1097 C==xD
1098 D ~~~ A`,
1099 { layout: 'elk' }
1100 );
1101 cy.get('svg').should((svg) => {
1102 const edges = svg[0].querySelectorAll('.edges path');
1103 expect(edges[0].getAttribute('class')).to.contain('edge-pattern-solid');
1104 expect(edges[1].getAttribute('class')).to.contain('edge-pattern-dotted');
1105 expect(edges[2].getAttribute('class')).to.contain('edge-thickness-thick');
1106 expect(edges[3].getAttribute('class')).to.contain('edge-thickness-invisible');
1107 });
1108 });
1109});
1110