Merge pull request #1089 from jgreywolf/1073-CommentsInClassDiagrams

Bug/1073 Comments in class diagrams

.vscode/settings.json

@@ -1,8 +0,0 @@
-{
-  "typescript.format.enable": false,
-  "typescript.reportStyleChecksAsWarnings": false,
-  "typescript.validate.enable": false,
-  "javascript.validate.enable": false,
-  "editor.formatOnSave": false,
-  "editor.snippetSuggestions": "top"
-}

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 } }
+    );
+  });
 });

src/diagrams/class/classDiagram.spec.js

@@ -19,6 +19,7 @@ describe('class diagram, ', function() {
 
       parser.parse(str);
     });
+
     it('should handle relation definition of different types and directions', function () {
       const str =
         'classDiagram\n' +
@@ -76,6 +77,7 @@ describe('class diagram, ', function() {
 
       parser.parse(str);
     });
+
     it('should handle parsing of method statements  grouped by brackets', function () {
       const str =
         'classDiagram\n' +
@@ -124,9 +126,106 @@ describe('class diagram, ', function() {
 
       parser.parse(str);
     });
+
+    it('should handle a comment', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        '%% Comment\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}';
+
+      parser.parse(str);
     });
 
-  describe('when fetching data from an classDiagram graph it', function() {
+    it('should handle comments at the start', function () {
+      const str =
+        '%% Comment\n' +
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}';
+      parser.parse(str);
+    });
+
+    it('should handle comments at the end', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '\n}' +
+        '%% Comment\n';
+
+      parser.parse(str);
+    });
+
+    it('should handle comments at the end no trailing newline', function () {
+      const str =
+      'classDiagram\n' +
+      'class Class1 {\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}\n' +
+        '%% Comment';
+
+      parser.parse(str);
+    });
+
+    it('should handle a comment with multiple line feeds', function () {
+      const str =
+        'classDiagram\n\n\n' +
+        '%% Comment\n\n' +
+        'class Class1 {\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}';
+
+      parser.parse(str);
+    });
+
+    it('should handle a comment with mermaid class diagram code in them', function () {
+      const str =
+        'classDiagram\n' +
+        '%% Comment Class01 <|-- Class02\n' +
+        'class Class1 {\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}';
+
+      parser.parse(str);
+    });
+
+    it('should handle a comment inside brackets', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        '%% Comment Class01 <|-- Class02\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}';
+
+      parser.parse(str);
+    });
+  });
+
+  describe('when fetching data from a classDiagram graph it', function () {
     beforeEach(function () {
       parser.yy = classDb;
       parser.yy.clear();
@@ -144,6 +243,7 @@ describe('class diagram, ', function() {
       expect(relations[0].relation.type2).toBe('none');
       expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
     });
+
     it('should handle relation definitions AGGREGATION and dotted line', function () {
       const str = 'classDiagram\n' + 'Class01 o.. Class02';
 
@@ -157,6 +257,7 @@ describe('class diagram, ', function() {
       expect(relations[0].relation.type2).toBe('none');
       expect(relations[0].relation.lineType).toBe(classDb.lineType.DOTTED_LINE);
     });
+
     it('should handle relation definitions COMPOSITION on both sides', function () {
       const str = 'classDiagram\n' + 'Class01 *--* Class02';
 
@@ -170,6 +271,7 @@ describe('class diagram, ', function() {
       expect(relations[0].relation.type2).toBe(classDb.relationType.COMPOSITION);
       expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
     });
+
     it('should handle relation definitions no types', function () {
       const str = 'classDiagram\n' + 'Class01 -- Class02';
 
@@ -183,6 +285,7 @@ describe('class diagram, ', function() {
       expect(relations[0].relation.type2).toBe('none');
       expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
     });
+
     it('should handle relation definitions with type only on right side', function () {
       const str = 'classDiagram\n' + 'Class01 --|> Class02';
 

src/diagrams/class/parser/classDiagram.jison

@@ -9,7 +9,7 @@
 %x string struct
 
 %%
-\%\%[^\n]*            /* do nothing */
+\%\%[^\n]*\n*           /* do nothing */
 \n+                   return 'NEWLINE';
 \s+                     /* skip whitespace */
 "classDiagram"          return 'CLASS_DIAGRAM';

src/diagrams/flowchart/parser/flow-comments.spec.js

@@ -12,8 +12,8 @@ describe('[Comments] when parsing', () => {
     flow.parser.yy.clear();
   });
 
-  it('should handle a comments', function() {
-    const res = flow.parser.parse('graph TD;\n%% CComment\n A-->B;');
+  it('should handle comments', function() {
+    const res = flow.parser.parse('graph TD;\n%% Comment\n A-->B;');
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -27,7 +27,7 @@ describe('[Comments] when parsing', () => {
     expect(edges[0].text).toBe('');
   });
 
-  it('should handle comments a at the start', function() {
+  it('should handle comments at the start', function() {
     const res = flow.parser.parse('%% Comment\ngraph TD;\n A-->B;');
 
     const vert = flow.parser.yy.getVertices();
@@ -43,7 +43,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments at the end', function() {
-    const res = flow.parser.parse('graph TD;\n A-->B\n %% Comment at the find\n');
+    const res = flow.parser.parse('graph TD;\n A-->B\n %% Comment at the end\n');
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -117,7 +117,7 @@ describe('[Comments] when parsing', () => {
     expect(edges[0].text).toBe('');
   });
 
-  it('should handle a comments with blank rows in-between', function() {
+  it('should handle a comment with blank rows in-between', function() {
     const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B;');
 
     const vert = flow.parser.yy.getVertices();
@@ -132,7 +132,7 @@ describe('[Comments] when parsing', () => {
     expect(edges[0].text).toBe('');
   });
 
-  it('should handle a comments mermaid flowchart code in them', function() {
+  it('should handle a comment with mermaid flowchart code in them', function() {
     const res = flow.parser.parse(
       'graph TD;\n\n\n %% Test od>Odd shape]-->|Two line<br>edge comment|ro;\n A-->B;'
     );

src/diagrams/flowchart/parser/flow.jison

@@ -9,7 +9,7 @@
 %x string
 %x dir
 %%
-\%\%[^\n]*            /* do nothing */
+\%\%[^\n]*\n*           /* do nothing */
 ["]                     this.begin("string");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
@@ -460,13 +460,6 @@ text: textToken
 
 
 
-commentText: commentToken
-    {$$=$1;}
-    | commentText commentToken
-    {$$=$1+''+$2;}
-    ;
-
-
 keywords
     : STYLE | LINKSTYLE | CLASSDEF | CLASS | CLICK | GRAPH | DIR | subgraph | end | DOWN | UP;
 
@@ -516,8 +509,6 @@ linkStyleStatement
           {$$ = $1;yy.updateLinkInterpolate($3,$7);}
     ;
 
-commentStatement: PCT PCT commentText;
-
 numList: NUM
         {$$ = [$1]}
     | numList COMMA NUM
@@ -539,8 +530,6 @@ styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT |
 
 /* Token lists */
 
-commentToken   : textToken | graphCodeTokens ;
-
 textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFAULT;
 
 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;