From 753bd7e1d90a8cdd98ae888fd4e9b03a77bf6933 Mon Sep 17 00:00:00 2001 From: Justin Greywolf Date: Tue, 26 Nov 2019 11:18:32 -0800 Subject: [PATCH] Update class diagrams to handle comments updated regex in parser to correctly handle comments in class diagrams. Also updated flowchart parser to remove unused elements for comments, as well as modifying the regex to match --- .../rendering/classDiagram.spec.js | 35 ++- .../integration/rendering/flowchart.spec.js | 19 ++ src/diagrams/class/classDiagram.spec.js | 200 +++++++++--------- src/diagrams/class/parser/classDiagram.jison | 2 +- .../flowchart/parser/flow-comments.spec.js | 10 +- src/diagrams/flowchart/parser/flow.jison | 2 +- 6 files changed, 163 insertions(+), 105 deletions(-) diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 0125a4373..29c4aba86 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/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 + <<interface>> 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 { + <<service>> + int id + test() + } + `, + {} + ); + cy.get('svg'); + }); }); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 565083520..a27f3b50c 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/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( ` @@ -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 } } + ); + }); }); diff --git a/src/diagrams/class/classDiagram.spec.js b/src/diagrams/class/classDiagram.spec.js index 2c83e6675..a1089d3d7 100644 --- a/src/diagrams/class/classDiagram.spec.js +++ b/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); + }); + + 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 an classDiagram graph it', function () { + 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'; @@ -297,100 +400,5 @@ describe('class diagram, ', function () { expect(testClass.methods[0]).toBe('test()'); expect(testClass.methods[1]).toBe('foo()'); }); - - it('should handle a comment', function () { - const str = - 'classDiagram\n' + - '%% Comment \n' + - 'class Class1 {\n' + - 'int : test\n' + - 'string : foo\n' + - 'test()\n' + - 'foo()\n' + - '}'; - - parser.parse(str); - }); - - // it('should handle comments at the start', function () { - // const str = - // '%% Comment\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 = - // 'class Class1 {\n' + - // 'int : test\n' + - // 'string : foo\n' + - // 'test()\n' + - // 'foo()\n' + - // '}\n' + - // '%% Comment'; - - // parser.parse(str); - // }); - - // it('should handle comments at the end many trailing newlines', function () { - // const str = - // 'classDiagram\n' + - // '%% Comment\n\n\n\n\n' + - // 'class Class1 {\n' + - // 'int : test\n' + - // 'string : foo\n' + - // 'test()\n' + - // 'foo()\n' + - // '}'; - - // parser.parse(str); - // }); - - // it('should handle a comment with blank rows in-between', 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); - //}); }); }); diff --git a/src/diagrams/class/parser/classDiagram.jison b/src/diagrams/class/parser/classDiagram.jison index f9e1d22af..f34da91a5 100644 --- a/src/diagrams/class/parser/classDiagram.jison +++ b/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'; diff --git a/src/diagrams/flowchart/parser/flow-comments.spec.js b/src/diagrams/flowchart/parser/flow-comments.spec.js index 5ef91c874..e05caadd0 100644 --- a/src/diagrams/flowchart/parser/flow-comments.spec.js +++ b/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(); @@ -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
edge comment|ro;\n A-->B;' ); diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison index 309d83c94..80a53b01a 100644 --- a/src/diagrams/flowchart/parser/flow.jison +++ 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"); ["] this.popState(); [^"]* return "STR";