#834 Adding unit tests and rendering tests

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

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

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