collab/mermaid/cypress/integration/rendering/classDiagram.spec.jsblame
View source
6dd74de1import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
6dd74de2
6dd74de3describe('Class diagram', () => {
6dd74de4 it('1: should render a simple class diagram', () => {
6dd74de5 imgSnapshotTest(
6dd74de6 `
6dd74de7 classDiagram
6dd74de8 Class01 <|-- AveryLongClass : Cool
6dd74de9 &lt;&lt;interface&gt;&gt; Class01
6dd74de10 Class03 *-- Class04
6dd74de11 Class05 o-- Class06
6dd74de12 Class07 .. Class08
6dd74de13 Class09 --> C2 : Where am i?
6dd74de14 Class09 --* C3
6dd74de15 Class09 --|> Class07
6dd74de16 Class12 <|.. Class08
6dd74de17 Class11 ..>Class12
6dd74de18 Class07 : equals()
6dd74de19 Class07 : Object[] elementData
6dd74de20 Class01 : size()
6dd74de21 Class01 : int chimp
6dd74de22 Class01 : int gorilla
6dd74de23 Class01 : -int privateChimp
6dd74de24 Class01 : +int publicGorilla
6dd74de25 Class01 : #int protectedMarmoset
6dd74de26 Class08 <--> C2: Cool label
6dd74de27 class Class10 {
6dd74de28 &lt;&lt;service&gt;&gt;
6dd74de29 int id
6dd74de30 test()
6dd74de31 }
6dd74de32 `,
6dd74de33 { logLevel: 1 }
6dd74de34 );
6dd74de35 });
6dd74de36
6dd74de37 it('2: should render a simple class diagrams with cardinality', () => {
6dd74de38 imgSnapshotTest(
6dd74de39 `
6dd74de40 classDiagram
6dd74de41 Class01 "1" <|--|> "*" AveryLongClass : Cool
6dd74de42 &lt;&lt;interface&gt;&gt; Class01
6dd74de43 Class03 "1" *-- "*" Class04
6dd74de44 Class05 "1" o-- "many" Class06
6dd74de45 Class07 "1" .. "*" Class08
6dd74de46 Class09 "1" --> "*" C2 : Where am i?
6dd74de47 Class09 "*" --* "*" C3
6dd74de48 Class09 "1" --|> "1" Class07
6dd74de49 Class07 : equals()
6dd74de50 Class07 : Object[] elementData
6dd74de51 Class01 : size()
6dd74de52 Class01 : int chimp
6dd74de53 Class01 : int gorilla
6dd74de54 Class08 "1" <--> "*" C2: Cool label
6dd74de55 class Class10 {
6dd74de56 &lt;&lt;service&gt;&gt;
6dd74de57 int id
6dd74de58 test()
6dd74de59 }
6dd74de60 `,
6dd74de61 {}
6dd74de62 );
6dd74de63 });
6dd74de64
6dd74de65 it('3: should render a simple class diagram with different visibilities', () => {
6dd74de66 imgSnapshotTest(
6dd74de67 `
6dd74de68 classDiagram
6dd74de69 Class01 <|-- AveryLongClass : Cool
6dd74de70 &lt;&lt;interface&gt;&gt; Class01
6dd74de71 Class01 : -privateMethod()
6dd74de72 Class01 : +publicMethod()
6dd74de73 Class01 : #protectedMethod()
6dd74de74 Class01 : -int privateChimp
6dd74de75 Class01 : +int publicGorilla
6dd74de76 Class01 : #int protectedMarmoset
6dd74de77 `,
6dd74de78 {}
6dd74de79 );
6dd74de80 });
6dd74de81
6dd74de82 it('4: should render a simple class diagram with comments', () => {
6dd74de83 imgSnapshotTest(
6dd74de84 `
6dd74de85 classDiagram
6dd74de86 %% this is a comment
6dd74de87 Class01 <|-- AveryLongClass : Cool
6dd74de88 &lt;&lt;interface&gt;&gt; Class01
6dd74de89 Class03 *-- Class04
6dd74de90 Class05 o-- Class06
6dd74de91 Class07 .. Class08
6dd74de92 Class09 --> C2 : Where am i?
6dd74de93 Class09 --* C3
6dd74de94 Class09 --|> Class07
6dd74de95 Class07 : equals()
6dd74de96 Class07 : Object[] elementData
6dd74de97 Class01 : size()
6dd74de98 Class01 : int chimp
6dd74de99 Class01 : int gorilla
6dd74de100 Class08 <--> C2: Cool label
6dd74de101 class Class10 {
6dd74de102 &lt;&lt;service&gt;&gt;
6dd74de103 int id
6dd74de104 test()
6dd74de105 }
6dd74de106 `,
6dd74de107 {}
6dd74de108 );
6dd74de109 });
6dd74de110
6dd74de111 it('5: should render a simple class diagram with abstract method', () => {
6dd74de112 imgSnapshotTest(
6dd74de113 `
6dd74de114 classDiagram
6dd74de115 Class01 <|-- AveryLongClass : Cool
6dd74de116 Class01 : someMethod()*
6dd74de117 `,
6dd74de118 {}
6dd74de119 );
6dd74de120 });
6dd74de121
6dd74de122 it('6: should render a simple class diagram with static method', () => {
6dd74de123 imgSnapshotTest(
6dd74de124 `
6dd74de125 classDiagram
6dd74de126 Class01 <|-- AveryLongClass : Cool
6dd74de127 Class01 : someMethod()$
6dd74de128 `,
6dd74de129 {}
6dd74de130 );
6dd74de131 });
6dd74de132
6dd74de133 it('7: should render a simple class diagram with Generic class', () => {
6dd74de134 imgSnapshotTest(
6dd74de135 `
6dd74de136 classDiagram
6dd74de137 class Class01~T~
6dd74de138 Class01 : size()
6dd74de139 Class01 : int chimp
6dd74de140 Class01 : int gorilla
6dd74de141 Class08 <--> C2: Cool label
6dd74de142 class Class10~T~ {
6dd74de143 &lt;&lt;service&gt;&gt;
6dd74de144 int id
6dd74de145 test()
6dd74de146 }
6dd74de147 `,
6dd74de148 {}
6dd74de149 );
6dd74de150 });
6dd74de151
6dd74de152 it('8: should render a simple class diagram with Generic class and relations', () => {
6dd74de153 imgSnapshotTest(
6dd74de154 `
6dd74de155 classDiagram
6dd74de156 Class01~T~ <|-- AveryLongClass : Cool
6dd74de157 Class03~T~ *-- Class04~T~
6dd74de158 Class01 : size()
6dd74de159 Class01 : int chimp
6dd74de160 Class01 : int gorilla
6dd74de161 Class08 <--> C2: Cool label
6dd74de162 class Class10~T~ {
6dd74de163 &lt;&lt;service&gt;&gt;
6dd74de164 int id
6dd74de165 test()
6dd74de166 }
6dd74de167 `,
6dd74de168 {}
6dd74de169 );
6dd74de170 });
6dd74de171
6dd74de172 it('9: should render a simple class diagram with clickable link', () => {
6dd74de173 imgSnapshotTest(
6dd74de174 `
6dd74de175 classDiagram
6dd74de176 Class01~T~ <|-- AveryLongClass : Cool
6dd74de177 Class03~T~ *-- Class04~T~
6dd74de178 Class01 : size()
6dd74de179 Class01 : int chimp
6dd74de180 Class01 : int gorilla
6dd74de181 Class08 <--> C2: Cool label
6dd74de182 class Class10~T~ {
6dd74de183 &lt;&lt;service&gt;&gt;
6dd74de184 int id
6dd74de185 test()
6dd74de186 }
6dd74de187 link Class01 "google.com" "A Tooltip"
6dd74de188 `,
6dd74de189 {}
6dd74de190 );
6dd74de191 });
6dd74de192
6dd74de193 it('10: should render a simple class diagram with clickable callback', () => {
6dd74de194 imgSnapshotTest(
6dd74de195 `
6dd74de196 classDiagram
6dd74de197 Class01~T~ <|-- AveryLongClass : Cool
6dd74de198 Class03~T~ *-- Class04~T~
6dd74de199 Class01 : size()
6dd74de200 Class01 : int chimp
6dd74de201 Class01 : int gorilla
6dd74de202 Class08 <--> C2: Cool label
6dd74de203 class Class10~T~ {
6dd74de204 &lt;&lt;service&gt;&gt;
6dd74de205 int id
6dd74de206 test()
6dd74de207 }
6dd74de208 callback Class01 "functionCall" "A Tooltip"
6dd74de209 `,
6dd74de210 {}
6dd74de211 );
6dd74de212 });
6dd74de213
6dd74de214 it('11: should render a simple class diagram with return type on method', () => {
6dd74de215 imgSnapshotTest(
6dd74de216 `
6dd74de217 classDiagram
6dd74de218 class Class10~T~ {
6dd74de219 int[] id
6dd74de220 test(int[] ids) bool
6dd74de221 testArray() bool[]
6dd74de222 }
6dd74de223 `,
6dd74de224 {}
6dd74de225 );
6dd74de226 });
6dd74de227
6dd74de228 it('12: should render a simple class diagram with generic types', () => {
6dd74de229 imgSnapshotTest(
6dd74de230 `
6dd74de231 classDiagram
6dd74de232 class Class10~T~ {
6dd74de233 int[] id
6dd74de234 List~int~ ids
6dd74de235 test(List~int~ ids) List~bool~
6dd74de236 testArray() bool[]
6dd74de237 }
6dd74de238 `,
6dd74de239 {}
6dd74de240 );
6dd74de241 });
6dd74de242
6dd74de243 it('13: should render a simple class diagram with css classes applied', () => {
6dd74de244 imgSnapshotTest(
6dd74de245 `
6dd74de246 classDiagram
6dd74de247 class Class10 {
6dd74de248 int[] id
6dd74de249 List~int~ ids
6dd74de250 test(List~int~ ids) List~bool~
6dd74de251 testArray() bool[]
6dd74de252 }
6dd74de253
6dd74de254 class Class10:::exClass2
6dd74de255 `,
6dd74de256 {}
6dd74de257 );
6dd74de258 });
6dd74de259
6dd74de260 it('14: should render a simple class diagram with css classes applied directly', () => {
6dd74de261 imgSnapshotTest(
6dd74de262 `
6dd74de263 classDiagram
6dd74de264 class Class10:::exClass2 {
6dd74de265 int[] id
6dd74de266 List~int~ ids
6dd74de267 test(List~int~ ids) List~bool~
6dd74de268 testArray() bool[]
6dd74de269 }
6dd74de270 `,
6dd74de271 {}
6dd74de272 );
6dd74de273 });
6dd74de274
6dd74de275 it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
6dd74de276 imgSnapshotTest(
6dd74de277 `
6dd74de278 classDiagram
6dd74de279 class Class10
6dd74de280 class Class20
6dd74de281
6dd74de282 cssClass "Class10, Class20" exClass2
6dd74de283 class Class20:::exClass2
6dd74de284 `,
6dd74de285 {}
6dd74de286 );
6dd74de287 });
6dd74de288
6dd74de289 it('16: should render multiple class diagrams', () => {
6dd74de290 imgSnapshotTest(
6dd74de291 [
6dd74de292 `
6dd74de293 classDiagram
6dd74de294 Class01 "1" <|--|> "*" AveryLongClass : Cool
6dd74de295 &lt;&lt;interface&gt;&gt; Class01
6dd74de296 Class03 "1" *-- "*" Class04
6dd74de297 Class05 "1" o-- "many" Class06
6dd74de298 Class07 "1" .. "*" Class08
6dd74de299 Class09 "1" --> "*" C2 : Where am i?
6dd74de300 Class09 "*" --* "*" C3
6dd74de301 Class09 "1" --|> "1" Class07
6dd74de302 Class07 : equals()
6dd74de303 Class07 : Object[] elementData
6dd74de304 Class01 : size()
6dd74de305 Class01 : int chimp
6dd74de306 Class01 : int gorilla
6dd74de307 Class08 "1" <--> "*" C2: Cool label
6dd74de308 class Class10 {
6dd74de309 &lt;&lt;service&gt;&gt;
6dd74de310 int id
6dd74de311 test()
6dd74de312 }
6dd74de313 `,
6dd74de314 `
6dd74de315 classDiagram
6dd74de316 Class01 "1" <|--|> "*" AveryLongClass : Cool
6dd74de317 &lt;&lt;interface&gt;&gt; Class01
6dd74de318 Class03 "1" *-- "*" Class04
6dd74de319 Class05 "1" o-- "many" Class06
6dd74de320 Class07 "1" .. "*" Class08
6dd74de321 Class09 "1" --> "*" C2 : Where am i?
6dd74de322 Class09 "*" --* "*" C3
6dd74de323 Class09 "1" --|> "1" Class07
6dd74de324 Class07 : equals()
6dd74de325 Class07 : Object[] elementData
6dd74de326 Class01 : size()
6dd74de327 Class01 : int chimp
6dd74de328 Class01 : int gorilla
6dd74de329 Class08 "1" <--> "*" C2: Cool label
6dd74de330 class Class10 {
6dd74de331 &lt;&lt;service&gt;&gt;
6dd74de332 int id
6dd74de333 test()
6dd74de334 }
6dd74de335 `,
6dd74de336 ],
6dd74de337 {}
6dd74de338 );
6dd74de339 });
6dd74de340
6dd74de341 // it('17: should render a class diagram when useMaxWidth is true (default)', () => {
6dd74de342 // renderGraph(
6dd74de343 // `
6dd74de344 // classDiagram
6dd74de345 // Class01 <|-- AveryLongClass : Cool
6dd74de346 // Class01 : size()
6dd74de347 // Class01 : int chimp
6dd74de348 // Class01 : int gorilla
6dd74de349 // Class01 : -int privateChimp
6dd74de350 // Class01 : +int publicGorilla
6dd74de351 // Class01 : #int protectedMarmoset
6dd74de352 // `,
6dd74de353 // { class: { useMaxWidth: true } }
6dd74de354 // );
6dd74de355 // cy.get('svg')
6dd74de356 // .should((svg) => {
6dd74de357 // expect(svg).to.have.attr('width', '100%');
6dd74de358 // const height = parseFloat(svg.attr('height'));
6dd74de359 // expect(height).to.be.within(332, 333);
6dd74de360 // // expect(svg).to.have.attr('height', '218');
6dd74de361 // const style = svg.attr('style');
6dd74de362 // expect(style).to.match(/^max-width: [\d.]+px;$/);
6dd74de363 // const maxWidthValue = parseInt(style.match(/[\d.]+/g).join(''));
6dd74de364 // // use within because the absolute value can be slightly different depending on the environment ±5%
6dd74de365 // expect(maxWidthValue).to.be.within(203, 204);
6dd74de366 // });
6dd74de367 // });
6dd74de368
6dd74de369 // it('18: should render a class diagram when useMaxWidth is false', () => {
6dd74de370 // renderGraph(
6dd74de371 // `
6dd74de372 // classDiagram
6dd74de373 // Class01 <|-- AveryLongClass : Cool
6dd74de374 // Class01 : size()
6dd74de375 // Class01 : int chimp
6dd74de376 // Class01 : int gorilla
6dd74de377 // Class01 : -int privateChimp
6dd74de378 // Class01 : +int publicGorilla
6dd74de379 // Class01 : #int protectedMarmoset
6dd74de380 // `,
6dd74de381 // { class: { useMaxWidth: false } }
6dd74de382 // );
6dd74de383 // cy.get('svg')
6dd74de384 // .should((svg) => {
6dd74de385 // const width = parseFloat(svg.attr('width'));
6dd74de386 // // use within because the absolute value can be slightly different depending on the environment ±5%
6dd74de387 // expect(width).to.be.within(100, 101);
6dd74de388 // const height = parseFloat(svg.attr('height'));
6dd74de389 // expect(height).to.be.within(332, 333);
6dd74de390 // // expect(svg).to.have.attr('height', '332');
6dd74de391 // // expect(svg).to.not.have.attr('style');
6dd74de392 // });
6dd74de393 // });
6dd74de394
6dd74de395 it('19: should render a simple class diagram with notes', () => {
6dd74de396 imgSnapshotTest(
6dd74de397 `
6dd74de398 classDiagram
6dd74de399 note "I love this diagram!\nDo you love it?"
6dd74de400 class Class10 {
6dd74de401 int id
6dd74de402 size()
6dd74de403 }
6dd74de404 note for Class10 "Cool class\nI said it's very cool class!"
6dd74de405 `,
6dd74de406 { logLevel: 1 }
6dd74de407 );
6dd74de408 });
6dd74de409
6dd74de410 it('should render class diagram with newlines in title', () => {
6dd74de411 imgSnapshotTest(`
6dd74de412 classDiagram
6dd74de413 Animal <|-- \`Du\nck\`
6dd74de414 Animal : +int age
6dd74de415 Animal : +String gender
6dd74de416 Animal: +isMammal()
6dd74de417 Animal: +mate()
6dd74de418 class \`Du\nck\` {
6dd74de419 +String beakColor
6dd74de420 +String featherColor
6dd74de421 +swim()
6dd74de422 +quack()
6dd74de423 }
6dd74de424 `);
6dd74de425 });
6dd74de426
6dd74de427 it('should render class diagram with many newlines in title', () => {
6dd74de428 imgSnapshotTest(`
6dd74de429 classDiagram
6dd74de430 class \`This\nTitle\nHas\nMany\nNewlines\` {
6dd74de431 +String Also
6dd74de432 -String Many
6dd74de433 #int Members
6dd74de434 +And()
6dd74de435 -Many()
6dd74de436 #Methods()
6dd74de437 }
6dd74de438 `);
6dd74de439 });
6dd74de440
6dd74de441 it('should render with newlines in title and an annotation', () => {
6dd74de442 imgSnapshotTest(`
6dd74de443 classDiagram
6dd74de444 class \`This\nTitle\nHas\nMany\nNewlines\` {
6dd74de445 +String Also
6dd74de446 -String Many
6dd74de447 #int Members
6dd74de448 +And()
6dd74de449 -Many()
6dd74de450 #Methods()
6dd74de451 }
6dd74de452 &lt;&lt;Interface&gt;&gt; \`This\nTitle\nHas\nMany\nNewlines\`
6dd74de453 `);
6dd74de454 });
6dd74de455
6dd74de456 it('should handle newline title in namespace', () => {
6dd74de457 imgSnapshotTest(`
6dd74de458 classDiagram
6dd74de459 namespace testingNamespace {
6dd74de460 class \`This\nTitle\nHas\nMany\nNewlines\` {
6dd74de461 +String Also
6dd74de462 -String Many
6dd74de463 #int Members
6dd74de464 +And()
6dd74de465 -Many()
6dd74de466 #Methods()
6dd74de467 }
6dd74de468 }
6dd74de469 `);
6dd74de470 });
6dd74de471
6dd74de472 it('should handle newline in string label', () => {
6dd74de473 imgSnapshotTest(`
6dd74de474 classDiagram
6dd74de475 class A["This has\na newline!"] {
6dd74de476 +String boop
6dd74de477 -Int beep
6dd74de478 #double bop
6dd74de479 }
6dd74de480
6dd74de481 class B["This title also has\na newline"]
6dd74de482 B : +with(more)
6dd74de483 B : -methods()
6dd74de484 `);
6dd74de485 });
6dd74de486
6dd74de487 it('should handle notes with anchor tag having target attribute', () => {
6dd74de488 renderGraph(
6dd74de489 `classDiagram
6dd74de490 class test { }
6dd74de491 note for test "<a href='https://mermaid.js.org/' target="_blank"><code>note about mermaid</code></a>"`
6dd74de492 );
6dd74de493
6dd74de494 cy.get('svg').then((svg) => {
6dd74de495 cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
6dd74de496 });
6dd74de497 });
6dd74de498
6dd74de499 describe('Include char sequence "graph" in text (#6795)', () => {
6dd74de500 it('has a label with char sequence "graph"', () => {
6dd74de501 imgSnapshotTest(
6dd74de502 `
6dd74de503 classDiagram
6dd74de504 class Person {
6dd74de505 +String name
6dd74de506 -Int id
6dd74de507 #double age
6dd74de508 +Text demographicProfile
6dd74de509 }
6dd74de510 `,
6dd74de511 { flowchart: { defaultRenderer: 'elk' } }
6dd74de512 );
6dd74de513 });
6dd74de514 });
6dd74de515
6dd74de516 it('should handle backticks for namespace and class names', () => {
6dd74de517 imgSnapshotTest(
6dd74de518 `
6dd74de519 classDiagram
6dd74de520 namespace \`A::B\` {
6dd74de521 class \`IPC::Sender\`
6dd74de522 }
6dd74de523 RenderProcessHost --|> \`IPC::Sender\`
6dd74de524 `,
6dd74de525 {}
6dd74de526 );
6dd74de527 it('should handle an empty class body with empty braces', () => {
6dd74de528 imgSnapshotTest(
6dd74de529 ` classDiagram
6dd74de530 class FooBase~T~ {}
6dd74de531 class Bar {
6dd74de532 +Zip
6dd74de533 +Zap()
6dd74de534 }
6dd74de535 FooBase <|-- Ba
6dd74de536 `,
6dd74de537 { flowchart: { defaultRenderer: 'elk' } }
6dd74de538 );
6dd74de539 });
6dd74de540 });
6dd74de541});