diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 19dc312d7..4729537cc 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -428,4 +428,29 @@ describe('Flowcart', () => { { flowchart: { htmlLabels: false } } ); }); + it('17: Chaining of nodes', () => { + imgSnapshotTest( + `graph LR + a --> b --> c + `, + { flowchart: { htmlLabels: false } } + ); + }); + it('18: Multiple nodes and chaining in one statement', () => { + imgSnapshotTest( + `graph LR + a --> b c--> d + `, + { flowchart: { htmlLabels: false } } + ); + }); + it('19: Multiple nodes and chaining in one statement', () => { + imgSnapshotTest( + `graph TD + A[ h ] -- hello --> B[" test "]:::exClass C --> D; + classDef exClass background:#bbb,border:1px solid red; + `, + { flowchart: { htmlLabels: false } } + ); + }); }); diff --git a/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js b/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js index db8cfadfe..4436cb4d6 100644 --- a/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js +++ b/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js @@ -34,4 +34,179 @@ describe('when parsing flowcharts', function() { expect(edges[1].type).toBe('arrow'); expect(edges[1].text).toBe(''); }); + it('should handle chaining of vertices', function() { + const res = flow.parser.parse(` + graph TD + A B --> C; + `); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + + expect(vert['A'].id).toBe('A'); + expect(vert['B'].id).toBe('B'); + expect(vert['C'].id).toBe('C'); + expect(edges.length).toBe(2); + expect(edges[0].start).toBe('A'); + expect(edges[0].end).toBe('C'); + expect(edges[0].type).toBe('arrow'); + expect(edges[0].text).toBe(''); + expect(edges[1].start).toBe('B'); + expect(edges[1].end).toBe('C'); + expect(edges[1].type).toBe('arrow'); + expect(edges[1].text).toBe(''); + }); + it('should multiple vertices in link statement in the begining', function() { + const res = flow.parser.parse(` + graph TD + A-->B C; + `); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + + expect(vert['A'].id).toBe('A'); + expect(vert['B'].id).toBe('B'); + expect(vert['C'].id).toBe('C'); + expect(edges.length).toBe(2); + expect(edges[0].start).toBe('A'); + expect(edges[0].end).toBe('B'); + expect(edges[0].type).toBe('arrow'); + expect(edges[0].text).toBe(''); + expect(edges[1].start).toBe('A'); + expect(edges[1].end).toBe('C'); + expect(edges[1].type).toBe('arrow'); + expect(edges[1].text).toBe(''); + }); + it('should multiple vertices in link statement at the end', function() { + const res = flow.parser.parse(` + graph TD + A B--> C D; + `); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + + expect(vert['A'].id).toBe('A'); + expect(vert['B'].id).toBe('B'); + expect(vert['C'].id).toBe('C'); + expect(vert['D'].id).toBe('D'); + expect(edges.length).toBe(4); + expect(edges[0].start).toBe('A'); + expect(edges[0].end).toBe('C'); + expect(edges[0].type).toBe('arrow'); + expect(edges[0].text).toBe(''); + expect(edges[1].start).toBe('A'); + expect(edges[1].end).toBe('D'); + expect(edges[1].type).toBe('arrow'); + expect(edges[1].text).toBe(''); + expect(edges[2].start).toBe('B'); + expect(edges[2].end).toBe('C'); + expect(edges[2].type).toBe('arrow'); + expect(edges[2].text).toBe(''); + expect(edges[3].start).toBe('B'); + expect(edges[3].end).toBe('D'); + expect(edges[3].type).toBe('arrow'); + expect(edges[3].text).toBe(''); + }); + it('should handle chaining of vertices at both ends at once', function() { + const res = flow.parser.parse(` + graph TD + A B--> C D; + `); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + + expect(vert['A'].id).toBe('A'); + expect(vert['B'].id).toBe('B'); + expect(vert['C'].id).toBe('C'); + expect(vert['D'].id).toBe('D'); + expect(edges.length).toBe(4); + expect(edges[0].start).toBe('A'); + expect(edges[0].end).toBe('C'); + expect(edges[0].type).toBe('arrow'); + expect(edges[0].text).toBe(''); + expect(edges[1].start).toBe('A'); + expect(edges[1].end).toBe('D'); + expect(edges[1].type).toBe('arrow'); + expect(edges[1].text).toBe(''); + expect(edges[2].start).toBe('B'); + expect(edges[2].end).toBe('C'); + expect(edges[2].type).toBe('arrow'); + expect(edges[2].text).toBe(''); + expect(edges[3].start).toBe('B'); + expect(edges[3].end).toBe('D'); + expect(edges[3].type).toBe('arrow'); + expect(edges[3].text).toBe(''); + }); + it('should handle chaining and multiple nodes in in link statement', function() { + const res = flow.parser.parse(` + graph TD + A --> B C --> D; + `); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + + expect(vert['A'].id).toBe('A'); + expect(vert['B'].id).toBe('B'); + expect(vert['C'].id).toBe('C'); + expect(vert['D'].id).toBe('D'); + expect(edges.length).toBe(4); + expect(edges[0].start).toBe('A'); + expect(edges[0].end).toBe('B'); + expect(edges[0].type).toBe('arrow'); + expect(edges[0].text).toBe(''); + expect(edges[1].start).toBe('A'); + expect(edges[1].end).toBe('C'); + expect(edges[1].type).toBe('arrow'); + expect(edges[1].text).toBe(''); + expect(edges[2].start).toBe('B'); + expect(edges[2].end).toBe('D'); + expect(edges[2].type).toBe('arrow'); + expect(edges[2].text).toBe(''); + expect(edges[3].start).toBe('C'); + expect(edges[3].end).toBe('D'); + expect(edges[3].type).toBe('arrow'); + expect(edges[3].text).toBe(''); + }); + it('should handle chaining and multiple nodes in in link statement with extra info in statements', function() { + const res = flow.parser.parse(` + graph TD + A[ h ] -- hello --> B[" test "]:::exClass C --> D; + classDef exClass background:#bbb,border:1px solid red; + `); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + + const classes = flow.parser.yy.getClasses(); + + expect(classes['exClass'].styles.length).toBe(2); + expect(classes['exClass'].styles[0]).toBe('background:#bbb'); + expect(classes['exClass'].styles[1]).toBe('border:1px solid red'); + expect(vert['A'].id).toBe('A'); + expect(vert['B'].id).toBe('B'); + expect(vert['B'].classes[0]).toBe('exClass'); + expect(vert['C'].id).toBe('C'); + expect(vert['D'].id).toBe('D'); + expect(edges.length).toBe(4); + expect(edges[0].start).toBe('A'); + expect(edges[0].end).toBe('B'); + expect(edges[0].type).toBe('arrow'); + expect(edges[0].text).toBe('hello'); + expect(edges[1].start).toBe('A'); + expect(edges[1].end).toBe('C'); + expect(edges[1].type).toBe('arrow'); + expect(edges[1].text).toBe('hello'); + expect(edges[2].start).toBe('B'); + expect(edges[2].end).toBe('D'); + expect(edges[2].type).toBe('arrow'); + expect(edges[2].text).toBe(''); + expect(edges[3].start).toBe('C'); + expect(edges[3].end).toBe('D'); + expect(edges[3].type).toBe('arrow'); + expect(edges[3].text).toBe(''); + }); }); diff --git a/src/diagrams/flowchart/parser/subgraph.spec.js b/src/diagrams/flowchart/parser/subgraph.spec.js index 8bb02fe38..afe6c6d43 100644 --- a/src/diagrams/flowchart/parser/subgraph.spec.js +++ b/src/diagrams/flowchart/parser/subgraph.spec.js @@ -228,6 +228,14 @@ describe('when parsing subgraphs', function() { const vert = flow.parser.yy.getVertices(); const edges = flow.parser.yy.getEdges(); + expect(edges[0].type).toBe('arrow'); + }); + it('should handle subgraphs with multi node statements in it', function() { + const res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\na b --> c e\n end;'); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + expect(edges[0].type).toBe('arrow'); }); });