Merge pull request #1089 from jgreywolf/1073-CommentsInClassDiagrams

Bug/1073 Comments in class diagrams

cypress/integration/rendering/classDiagram.spec.js

@@ -2,7 +2,7 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('Class diagram', () => {
-  it('should render a simple class diagram', () => {
+  it('1: should render a simple class diagram', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -33,7 +33,8 @@ describe('Class diagram', () => {
     );
     cy.get('svg');
   });
-  it('should render a simple class diagrams with cardinality', () => {
+
+  it('2: should render a simple class diagrams with cardinality', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -132,4 +133,34 @@ describe('Class diagram', () => {
     );
     cy.get('svg');
   });
+
+  it('4: should render a simple class diagram with comments', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      %% this is a comment
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 *-- Class04
+      Class05 o-- Class06
+      Class07 .. Class08
+      Class09 --> C2 : Where am i?
+      Class09 --* C3
+      Class09 --|> Class07
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -14,6 +14,7 @@ describe('Flowcart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
   it('2: should render a simple flowchart with htmlLabels', () => {
     imgSnapshotTest(
       `graph TD
@@ -26,6 +27,7 @@ describe('Flowcart', () => {
       { flowchart: { htmlLabels: true } }
     );
   });
+
   it('3: should render a simple flowchart with line breaks', () => {
     imgSnapshotTest(
       `
@@ -99,6 +101,7 @@ describe('Flowcart', () => {
       {}
     );
   });
+
   it('6: should render a flowchart full of icons', () => {
     imgSnapshotTest(
       `
@@ -178,6 +181,7 @@ describe('Flowcart', () => {
       {}
     );
   });
+
   it('8: should render subgraphs', () => {
     imgSnapshotTest(
       `
@@ -190,7 +194,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('9: should render subgraphs with a title startign with a digit', () => {
+  it('9: should render subgraphs with a title starting with a digit', () => {
     imgSnapshotTest(
       `
     graph TB
@@ -237,7 +241,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('11: should render a flowchart with ling sames and class definitoins', () => {
+  it('11: should render a flowchart with long names and class definitions', () => {
     imgSnapshotTest(
       `graph LR
       sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@@ -356,6 +360,7 @@ describe('Flowcart', () => {
       }
     );
   });
+
   it('13: should render hexagons', () => {
     imgSnapshotTest(
       `
@@ -377,4 +382,18 @@ describe('Flowcart', () => {
       }
     );
   });
+
+  it('14: should render a simple flowchart with comments', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      %% this is a comment
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
 });