Merge pull request #3 from mermaid-js/develop

Develop

.github/workflows/build.yml

@@ -38,13 +38,21 @@ jobs:
     - name: Run Unit Tests
       run: |
         yarn test --coverage
-        cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
-      env:
-        COVERALLS_SERVICE_NAME: ${{ secrets.COVERALLS_SERVICE_NAME }}
-        COVERALLS_REPO_TOKEN: ${{ secrets.COVERALLS_REPO_TOKEN }}
+        
+    - name: Upload Test Results
+      uses: coverallsapp/[email protected]
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        parallel: true
 
     - name: Run E2E Tests
       run: yarn e2e
       env:
         PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
         CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+    - name: Post Upload Test Results
+      uses: coverallsapp/github-action@master
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        parallel-finished: true

cypress/helpers/util.js

@@ -26,3 +26,9 @@ export const imgSnapshotTest = (graphStr, options, api) => {
   cy.get('svg');
   cy.percySnapshot();
 };
+
+export const renderGraph = (graphStr, options, api) => {
+  const url = mermaidUrl(graphStr, options, api);
+
+  cy.visit(url);
+};

cypress/integration/other/configuration.spec.js

@@ -0,0 +1,100 @@
+import { renderGraph } from '../../helpers/util';
+/* eslint-env jest */
+describe('Configuration', () => {
+  describe('arrowMarkerAbsolute', () => {
+    it('should handle default value false of arrowMarkerAbsolute', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        { }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle default value false of arrowMarkerAbsolute', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        { }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle arrowMarkerAbsolute excplicitly set to false', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {
+          arrowMarkerAbsolute: false
+        }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle arrowMarkerAbsolute excplicitly set to "false" as false', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {
+          arrowMarkerAbsolute: "false"
+        }
+      );
+
+      // Check the marker-end property to make sure it is properly set to
+      // start with #
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(#');
+    });
+    it('should handle arrowMarkerAbsolute set to true', () => {
+      renderGraph(
+        `graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
+        {
+          arrowMarkerAbsolute: true
+        }
+      );
+
+      cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+        .should('exist')
+        .and('include', 'url(http://localhost');
+    });
+  });
+});

cypress/integration/other/interaction.spec.js

@@ -16,7 +16,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-1Function')
+        .find('g[id="1Function"]')
         .click();
 
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
@@ -38,7 +38,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-2URL')
+        .find('g[id="2URL"]')
         .click();
 
       cy.location().should(location => {
@@ -108,7 +108,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-1Function')
+        .find('g[id="1Function"]')
         .click();
 
       cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -130,7 +130,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-2URL')
+        .find('g[id="2URL"]')
         .click();
 
       cy.location().should(location => {
@@ -200,7 +200,7 @@ describe('Interaction', () => {
       cy.viewport(1440, 1024);
       cy.visit(url);
       cy.get('body')
-        .find('g#mermaid-dom-id-1Function')
+        .find('g[id="1Function"]')
         .click();
 
       cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');

cypress/integration/rendering/classDiagram.spec.js

@@ -19,6 +19,9 @@ describe('Class diagram', () => {
       Class01 : size()
       Class01 : int chimp
       Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
       Class08 <--> C2: Cool label
       class Class10 {
         &lt;&lt;service&gt;&gt;
@@ -58,6 +61,25 @@ describe('Class diagram', () => {
     );
     cy.get('svg');
   });
+
+  it('should render a simple class diagram with different visibilities', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class01 : -int privateMethod()
+      Class01 : +int publicMethod()
+      Class01 : #int protectedMethod()
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
   it('should render multiple class diagrams', () => {
     imgSnapshotTest(
       [

cypress/platform/e2e.html

@@ -4,9 +4,8 @@
     <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" />
     <style>
       body {
-        /* font-family: 'Mansalva', cursive;
-        font-family: 'Mansalva', cursive; */
-        font-family: 'times';
+        /* font-family: 'Mansalva', cursive;*/
+        font-family: 'Mansalva', cursive;
       }
       /* .mermaid-main-font {
         font-family: "trebuchet ms", verdana, arial;

dist/index.html

@@ -408,9 +408,9 @@
 Class09 --|> Class07
 Class07 : equals()
 Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
+Class01 : #size()
+Class01 : -int chimp
+Class01 : +int gorilla
 Class08 <--> C2: Cool label
 class Class10 {
   &lt;&lt;service&gt;&gt;

package.json

@@ -78,9 +78,6 @@
     "husky": "^1.2.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
-    "jest-environment-puppeteer": "^4.3.0",
-    "jest-image-snapshot": "^2.11.1",
-    "jest-puppeteer": "^4.3.0",
     "jison": "^0.4.18",
     "moment": "^2.23.0",
     "node-sass": "^4.12.0",

src/diagrams/class/classDiagram.spec.js

@@ -40,6 +40,21 @@ describe('class diagram, ', function() {
 
       parser.parse(str);
     });
+
+    it('should handle visibility for methods and members', function() {
+      const str =
+        'classDiagram\n' +
+        'class TestClass\n' +
+        'TestClass : -int privateMember\n' +
+        'TestClass : +int publicMember\n' +
+        'TestClass : #int protectedMember\n' +
+        'TestClass : -privateMethod()\n' +
+        'TestClass : +publicMethod()\n' +
+        'TestClass : #protectedMethod()\n';
+
+      parser.parse(str);
+    });
+
     it('should handle class definitions', function() {
       const str =
         'classDiagram\n' +

src/diagrams/class/parser/classDiagram.jison

@@ -36,7 +36,7 @@
 \s*o                  return 'AGGREGATION';
 \-\-                  return 'LINE';
 \.\.                  return 'DOTTED_LINE';
-":"[^#\n;]+        return 'LABEL';
+":"[^\n;]+        return 'LABEL';
 \-                    return 'MINUS';
 "."                   return 'DOT';
 \+                    return 'PLUS';

src/diagrams/flowchart/flowDb.js

@@ -4,7 +4,8 @@ import { logger } from '../../logger';
 import utils from '../../utils';
 import { getConfig } from '../../config';
 
-const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
+// const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
+const MERMAID_DOM_ID_PREFIX = '';
 
 const config = getConfig();
 let vertices = {};

src/diagrams/flowchart/flowRenderer.js

@@ -460,8 +460,8 @@ export const draw = function(text, id) {
     subG = subGraphs[i];
 
     if (subG.title !== 'undefined') {
-      const clusterRects = document.querySelectorAll('#' + id + ' #' + subG.id + ' rect');
-      const clusterEl = document.querySelectorAll('#' + id + ' #' + subG.id);
+      const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
+      const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
 
       const xPos = clusterRects[0].x.baseVal.value;
       const yPos = clusterRects[0].y.baseVal.value;
@@ -475,7 +475,7 @@ export const draw = function(text, id) {
 
   // Add label rects for non html labels
   if (!conf.htmlLabels) {
-    const labels = document.querySelectorAll('#' + id + ' .edgeLabel .label');
+    const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
     for (let k = 0; k < labels.length; k++) {
       const label = labels[k];
 

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

@@ -168,7 +168,7 @@ describe('[Singlenodes] when parsing', () => {
     const edges = flow.parser.yy.getEdges();
 
     expect(edges.length).toBe(0);
-    expect(vert['mermaid-dom-id-1'].text).toBe('1');
+    expect(vert['1'].text).toBe('1');
   });
 
   it('should handle a single node with a single digit in a subgraph', function() {
@@ -180,7 +180,7 @@ describe('[Singlenodes] when parsing', () => {
     const edges = flow.parser.yy.getEdges();
 
     expect(edges.length).toBe(0);
-    expect(vert['mermaid-dom-id-1'].text).toBe('1');
+    expect(vert['1'].text).toBe('1');
   });
 
   it('should handle a single node with alphanumerics starting on a num', function() {
@@ -191,7 +191,7 @@ describe('[Singlenodes] when parsing', () => {
     const edges = flow.parser.yy.getEdges();
 
     expect(edges.length).toBe(0);
-    expect(vert['mermaid-dom-id-1id'].styles.length).toBe(0);
+    expect(vert['1id'].styles.length).toBe(0);
   });
 
   it('should handle a single node with alphanumerics containing a minus sign', function() {

src/diagrams/flowchart/parser/subgraph.spec.js

@@ -83,7 +83,7 @@ describe('when parsing subgraphs', function() {
     const subgraph = subgraphs[0];
     expect(subgraph.nodes.length).toBe(1);
     expect(subgraph.nodes[0]).toBe('A');
-    expect(subgraph.id).toBe('mermaid-dom-id-1test');
+    expect(subgraph.id).toBe('1test');
   });
 
   it('should handle subgraphs1', function() {

src/diagrams/state/stateRenderer.js

@@ -92,8 +92,6 @@ export const draw = function(text, id) {
   const padding = conf.padding;
   const bounds = diagram.node().getBBox();
 
-  console.warn(bounds);
-
   const width = bounds.width + padding * 2;
   const height = bounds.height + padding * 2;
 

src/mermaidAPI.js

@@ -585,23 +585,23 @@ const render = function(id, txt, cb, container) {
     .selectAll('foreignobject > *')
     .attr('xmlns', 'http://www.w3.org/1999/xhtml');
 
-  let url = '';
-  if (config.arrowMarkerAbsolute) {
-    url =
-      window.location.protocol +
-      '//' +
-      window.location.host +
-      window.location.pathname +
-      window.location.search;
-    url = url.replace(/\(/g, '\\(');
-    url = url.replace(/\)/g, '\\)');
-  }
+  // if (config.arrowMarkerAbsolute) {
+  //   url =
+  //     window.location.protocol +
+  //     '//' +
+  //     window.location.host +
+  //     window.location.pathname +
+  //     window.location.search;
+  //   url = url.replace(/\(/g, '\\(');
+  //   url = url.replace(/\)/g, '\\)');
+  // }
 
   // Fix for when the base tag is used
-  let svgCode = d3
-    .select('#d' + id)
-    .node()
-    .innerHTML.replace(/url\(#arrowhead/g, 'url(' + url + '#arrowhead', 'g');
+  let svgCode = d3.select('#d' + id).node().innerHTML;
+
+  if (!config.arrowMarkerAbsolute || config.arrowMarkerAbsolute === 'false') {
+    svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
+  }
 
   svgCode = decodeEntities(svgCode);