diff --git a/src/diagram-api/diagramAPI.ts b/src/diagram-api/diagramAPI.ts index 232933e0d..9a86c5b51 100644 --- a/src/diagram-api/diagramAPI.ts +++ b/src/diagram-api/diagramAPI.ts @@ -6,8 +6,8 @@ import { MermaidConfig } from '../config.type'; import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox'; import { addStylesForDiagram } from '../styles'; -/* - Packaging and exposing resources for externa diagrams so that they can import +/* + Packaging and exposing resources for externa diagrams so that they can import diagramAPI and have access to selct parts of mermaid common code reqiored to create diagrams worling like the internal diagrams. */ diff --git a/src/diagrams/flowchart/flowRenderer.addEdges.spec.js b/src/diagrams/flowchart/flowRenderer.addEdges.spec.js new file mode 100644 index 000000000..1bcb076f1 --- /dev/null +++ b/src/diagrams/flowchart/flowRenderer.addEdges.spec.js @@ -0,0 +1,154 @@ +import flowDb from './flowDb'; +import flowParser from './parser/flow'; +import flowRenderer from './flowRenderer'; +import Diagram from '../../Diagram'; +import { addDiagrams } from '../../diagram-api/diagram-orchestration'; +addDiagrams(); +afterEach(() => { + jest.restoreAllMocks(); +}); + +describe('when using mermaid and ', function () { + describe('when calling addEdges ', function () { + beforeEach(function () { + flowParser.parser.yy = flowDb; + flowDb.clear(); + flowDb.setGen('gen-2'); + }); + it('should handle edges with text', function () { + const diag = new Diagram('graph TD;A-->|text ex|B;'); + diag.db.getVertices(); + const edges = diag.db.getEdges(); + + const mockG = { + setEdge: function (start, end, options) { + expect(start).toContain('flowchart-A-'); + expect(end).toContain('flowchart-B-'); + expect(options.arrowhead).toBe('normal'); + expect(options.label.match('text ex')).toBeTruthy(); + }, + }; + + flowRenderer.addEdges(edges, mockG, diag); + }); + + it('should handle edges without text', function () { + const diag = new Diagram('graph TD;A-->B;'); + diag.db.getVertices(); + const edges = diag.db.getEdges(); + + const mockG = { + setEdge: function (start, end, options) { + expect(start).toContain('flowchart-A-'); + expect(end).toContain('flowchart-B-'); + expect(options.arrowhead).toBe('normal'); + }, + }; + + flowRenderer.addEdges(edges, mockG, diag); + }); + + it('should handle open-ended edges', function () { + const diag = new Diagram('graph TD;A---B;'); + diag.db.getVertices(); + const edges = diag.db.getEdges(); + + const mockG = { + setEdge: function (start, end, options) { + expect(start).toContain('flowchart-A-'); + expect(end).toContain('flowchart-B-'); + expect(options.arrowhead).toBe('none'); + }, + }; + + flowRenderer.addEdges(edges, mockG, diag); + }); + + it('should handle edges with styles defined', function () { + const diag = new Diagram('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;'); + diag.db.getVertices(); + const edges = diag.db.getEdges(); + + const mockG = { + setEdge: function (start, end, options) { + expect(start).toContain('flowchart-A-'); + expect(end).toContain('flowchart-B-'); + expect(options.arrowhead).toBe('none'); + expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;'); + }, + }; + + flowRenderer.addEdges(edges, mockG, diag); + }); + it('should handle edges with interpolation defined', function () { + const diag = new Diagram('graph TD;A---B; linkStyle 0 interpolate basis'); + diag.db.getVertices(); + const edges = diag.db.getEdges(); + + const mockG = { + setEdge: function (start, end, options) { + expect(start).toContain('flowchart-A-'); + expect(end).toContain('flowchart-B-'); + expect(options.arrowhead).toBe('none'); + expect(options.curve).toBe('basis'); // mocked as string + }, + }; + + flowRenderer.addEdges(edges, mockG, diag); + }); + it('should handle edges with text and styles defined', function () { + const diag = new Diagram( + 'graph TD;A---|the text|B; linkStyle 0 stroke:val1,stroke-width:val2;' + ); + diag.db.getVertices(); + const edges = diag.db.getEdges(); + + const mockG = { + setEdge: function (start, end, options) { + expect(start).toContain('flowchart-A-'); + expect(end).toContain('flowchart-B-'); + expect(options.arrowhead).toBe('none'); + expect(options.label.match('the text')).toBeTruthy(); + expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;'); + }, + }; + + flowRenderer.addEdges(edges, mockG, diag); + }); + + it('should set fill to "none" by default when handling edges', function () { + const diag = new Diagram('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;'); + diag.db.getVertices(); + const edges = diag.db.getEdges(); + + const mockG = { + setEdge: function (start, end, options) { + expect(start).toContain('flowchart-A-'); + expect(end).toContain('flowchart-B'); + expect(options.arrowhead).toBe('none'); + expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;'); + }, + }; + + flowRenderer.addEdges(edges, mockG, diag); + }); + + it('should not set fill to none if fill is set in linkStyle', function () { + const diag = new Diagram( + 'graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2,fill:blue;' + ); + diag.db.getVertices(); + const edges = diag.db.getEdges(); + const mockG = { + setEdge: function (start, end, options) { + expect(start).toContain('flowchart-A-'); + expect(end).toContain('flowchart-B-'); + expect(options.arrowhead).toBe('none'); + expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:blue;'); + }, + }; + + flowRenderer.addEdges(edges, mockG, diag); + }); + }); +}); diff --git a/src/mermaid.spec.js b/src/mermaid.spec.js index ef870072e..fcd83a61b 100644 --- a/src/mermaid.spec.js +++ b/src/mermaid.spec.js @@ -2,11 +2,6 @@ import mermaid from './mermaid'; import { mermaidAPI } from './mermaidAPI'; import flowDb from './diagrams/flowchart/flowDb'; import flowParser from './diagrams/flowchart/parser/flow'; -import flowRenderer from './diagrams/flowchart/flowRenderer'; -import Diagram from './Diagram'; -import { addDiagrams } from './diagram-api/diagram-orchestration'; - -addDiagrams(); const spyOn = jest.spyOn; @@ -61,149 +56,6 @@ describe('when using mermaid and ', function () { }); }); - describe('when calling addEdges ', function () { - beforeEach(function () { - flowParser.parser.yy = flowDb; - flowDb.clear(); - flowDb.setGen('gen-2'); - }); - it('should handle edges with text', function () { - const diag = new Diagram('graph TD;A-->|text ex|B;'); - diag.db.getVertices(); - const edges = diag.db.getEdges(); - - const mockG = { - setEdge: function (start, end, options) { - expect(start).toContain('flowchart-A-'); - expect(end).toContain('flowchart-B-'); - expect(options.arrowhead).toBe('normal'); - expect(options.label.match('text ex')).toBeTruthy(); - }, - }; - - flowRenderer.addEdges(edges, mockG, diag); - }); - - it('should handle edges without text', function () { - const diag = new Diagram('graph TD;A-->B;'); - diag.db.getVertices(); - const edges = diag.db.getEdges(); - - const mockG = { - setEdge: function (start, end, options) { - expect(start).toContain('flowchart-A-'); - expect(end).toContain('flowchart-B-'); - expect(options.arrowhead).toBe('normal'); - }, - }; - - flowRenderer.addEdges(edges, mockG, diag); - }); - - it('should handle open-ended edges', function () { - const diag = new Diagram('graph TD;A---B;'); - diag.db.getVertices(); - const edges = diag.db.getEdges(); - - const mockG = { - setEdge: function (start, end, options) { - expect(start).toContain('flowchart-A-'); - expect(end).toContain('flowchart-B-'); - expect(options.arrowhead).toBe('none'); - }, - }; - - flowRenderer.addEdges(edges, mockG, diag); - }); - - it('should handle edges with styles defined', function () { - const diag = new Diagram('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;'); - diag.db.getVertices(); - const edges = diag.db.getEdges(); - - const mockG = { - setEdge: function (start, end, options) { - expect(start).toContain('flowchart-A-'); - expect(end).toContain('flowchart-B-'); - expect(options.arrowhead).toBe('none'); - expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;'); - }, - }; - - flowRenderer.addEdges(edges, mockG, diag); - }); - it('should handle edges with interpolation defined', function () { - const diag = new Diagram('graph TD;A---B; linkStyle 0 interpolate basis'); - diag.db.getVertices(); - const edges = diag.db.getEdges(); - - const mockG = { - setEdge: function (start, end, options) { - expect(start).toContain('flowchart-A-'); - expect(end).toContain('flowchart-B-'); - expect(options.arrowhead).toBe('none'); - expect(options.curve).toBe('basis'); // mocked as string - }, - }; - - flowRenderer.addEdges(edges, mockG, diag); - }); - it('should handle edges with text and styles defined', function () { - const diag = new Diagram( - 'graph TD;A---|the text|B; linkStyle 0 stroke:val1,stroke-width:val2;' - ); - diag.db.getVertices(); - const edges = diag.db.getEdges(); - - const mockG = { - setEdge: function (start, end, options) { - expect(start).toContain('flowchart-A-'); - expect(end).toContain('flowchart-B-'); - expect(options.arrowhead).toBe('none'); - expect(options.label.match('the text')).toBeTruthy(); - expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;'); - }, - }; - - flowRenderer.addEdges(edges, mockG, diag); - }); - - it('should set fill to "none" by default when handling edges', function () { - const diag = new Diagram('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;'); - diag.db.getVertices(); - const edges = diag.db.getEdges(); - - const mockG = { - setEdge: function (start, end, options) { - expect(start).toContain('flowchart-A-'); - expect(end).toContain('flowchart-B'); - expect(options.arrowhead).toBe('none'); - expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;'); - }, - }; - - flowRenderer.addEdges(edges, mockG, diag); - }); - - it('should not set fill to none if fill is set in linkStyle', function () { - const diag = new Diagram( - 'graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2,fill:blue;' - ); - diag.db.getVertices(); - const edges = diag.db.getEdges(); - const mockG = { - setEdge: function (start, end, options) { - expect(start).toContain('flowchart-A-'); - expect(end).toContain('flowchart-B-'); - expect(options.arrowhead).toBe('none'); - expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:blue;'); - }, - }; - - flowRenderer.addEdges(edges, mockG, diag); - }); - }); - describe('checking validity of input ', function () { beforeEach(function () { flowParser.parser.yy = flowDb;