Added tests for colors and fully setup cypress in Docker

cypress/integration/rendering/sankey.spec.js

@@ -1,26 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
-
-describe('Sankey Diagram', () => {
-  it('should render a simple example', () => {
-    imgSnapshotTest(
-      `
-      sankey-beta
-      
-      a,b,10
-      `,
-      {}
-    );
-  });
-
-  describe('Changes link color', function () {
-    beforeAll(() => {
-      let conf = {
-        sankey: {
-          linkColor: 'source',
-        }
-      };
-  
-      mermaidAPI.initialize(conf);
-    });
-  });
-});

cypress/integration/rendering/sankey.spec.ts

@@ -0,0 +1,85 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('Sankey Diagram', () => {
+  it('should render a simple example', () => {
+    imgSnapshotTest(
+      `
+      sankey-beta
+      
+      sourceNode,targetNode,10
+      `,
+      {}
+    );
+  });
+
+  describe('when given a linkColor', function () {
+    it('links should be the same color as source node', () => {
+      renderGraph(
+        `
+        sankey-beta
+        
+        sourceNode,targetNode,10
+        `,
+        {
+          sankey: { linkColor: 'source' },
+        }
+      );
+
+      cy.get('.link path').then((link) => {
+        cy.get('.node[id="node-1"] rect').should(node =>
+          expect(link.attr('stroke')).to.equal(node.attr('fill'))
+        );
+      });
+    });
+
+    it('should change link color to hex code', () => {
+      renderGraph(
+        `
+        sankey-beta
+        a,b,10
+        `,
+        {
+          sankey: { linkColor: '#636465' },
+        }
+      );
+
+      cy.get('.link path').should((link) => {
+        expect(link.attr('stroke')).to.equal('#636465');
+      });
+    });
+
+    it('links should be the same color as target node', () => {
+      renderGraph(
+        `
+        sankey-beta
+        sourceNode,targetNode,10
+        `,
+        {
+          sankey: { linkColor: 'target' },
+        }
+      );
+
+      cy.get('.link path').then((link) => {
+        cy.get('.node[id="node-2"] rect').should(node =>
+          expect(link.attr('stroke')).to.equal(node.attr('fill'))
+        );
+      });
+    });
+
+    it('links must be gradient', () => {
+      renderGraph(
+        `
+        sankey-beta
+        sourceNode,targetNode,10
+        `,
+        {
+          sankey: { linkColor: 'gradient' },
+        }
+      );
+
+      cy.get('.link path').should((link) => {
+        expect(link.attr('stroke')).to.equal('url(#linearGradient-3)');
+      });
+    });
+  });
+});

demos/sankey.html

@@ -19,47 +19,19 @@
     <pre class="mermaid">
       sankey-beta
 
-      %% There are leading and trailing spaces, do not crop
-          Agricultural 'waste',Bio-conversion,124.729   
-      %% line with a comment
-
-      %% Normal line
+      Agricultural 'waste',Bio-conversion,124.729
       Bio-conversion,Liquid,0.597
-
-      %% Line with unquoted sankey keyword
-      sankey,target,10
-
-      %% Quoted sankey keyword
-      "sankey",target,10
-
-      %% Another normal line
       Bio-conversion,Losses,26.862
-
-      %% Line with integer amount
-      Bio-conversion,Solid,280
-
-      %% Some blank lines in the middle of CSV
-
-
-      %% Another normal line
+      Bio-conversion,Solid,280.322
       Bio-conversion,Gas,81.144
-
-      %% Quoted line
-      "Biofuel imports",Liquid,35
-
-      %% Quoted line with escaped quotes inside
-      """Biomass imports""",Solid,35
-
-      %% Lines containing commas inside
-      %% Quoted and unquoted values should be equal in terms of graph
-      "District heating","Heating and cooling, commercial",22.505
-      District heating,"Heating and cooling, homes",46.184
-
-      %% A bunch of lines, normal CSV
+      Biofuel imports,Liquid,35
+      Biomass imports,Solid,35
       Coal imports,Coal,11.606
       Coal reserves,Coal,63.965
       Coal,Solid,75.571
       District heating,Industry,10.639
+      District heating,Heating and cooling - commercial,22.505
+      District heating,Heating and cooling - homes,46.184
       Electricity grid,Over generation / exports,104.453
       Electricity grid,Heating and cooling - homes,113.726
       Electricity grid,H2 conversion,27.14
@@ -113,12 +85,8 @@
       Thermal generation,District heating,79.329
       Tidal,Electricity grid,9.452
       UK land based bioenergy,Bio-conversion,182.01
-      """Wave""",Electricity grid,19.013
-      """Wind""",Electricity grid,289.366
-
-      %% lines at the end, do not remove
-
-
+      Wave,Electricity grid,19.013
+      Wind,Electricity grid,289.366
     </pre>
 
     <script type="module">

docker-compose.yml

@@ -17,18 +17,17 @@ services:
       - 9000:9000
       - 3333:3333
   cypress:
-    image: cypress/base:18.16.0
+    image: cypress/included:12.16.0
     stdin_open: true
     tty: true
     working_dir: /mermaid
     mem_limit: '2G'
+    entrypoint: cypress
     environment:
-      - NODE_OPTIONS=--max_old_space_size=2048
+      - DISPLAY
     volumes:
       - ./:/mermaid
-      - root_cache:/root/.cache
-      - root_local:/root/.local
-      - root_npm:/root/.npm
+      - /tmp/.X11-unix:/tmp/.X11-unix
     network_mode: host
 
 volumes:

packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts

@@ -117,6 +117,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .data(graph.nodes)
     .join('g')
     .attr('class', 'node')
+    .attr('id', (d: any) => (d.uid = Uid.next('node-')).id)
     .attr('transform', function (d: any) {
       return 'translate(' + d.x0 + ',' + d.y0 + ')';
     })
@@ -183,10 +184,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb
       coloring = (d: any) => d.uid;
       break;
     case SankeyLinkColor.source:
-      coloring = (d: any) => d.source.id;
+      coloring = (d: any) => colorScheme(d.source.id);
       break;
     case SankeyLinkColor.target:
-      coloring = (d: any) => d.target.id;
+      coloring = (d: any) => colorScheme(d.target.id);
       break;
     default:
       coloring = linkColor;

run

@@ -31,7 +31,7 @@ $RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm pre
 ;;
 
 cypress)
-$RUN cypress npm run cypress $args
+$RUN cypress $args
 ;;
 
 help)
@@ -42,7 +42,7 @@ cat <<EOF
 
 $(bold MERMAID LOCAL DOCKER DEVELOPMENT)
 
-Welcome! Thank you for joining development.
+Welcome! Thank you for joining the development.
 This is a script for running commands within docker containers at ease.
 __________________________________________________________________________________________
 
@@ -74,7 +74,10 @@ $(bold ./$name pnpm add --filter mermaid) $(underline package)
 $(bold git diff --name-only develop \| xargs ./$name pnpm prettier --write)
         Prettify everything you added so far
 
-$(bold ./$name cypress run -- --spec cypress/integration/rendering/)$(underline test.ts)
+$(bold ./$name cypress open --project .)
+        Open cypress interactive GUI
+
+$(bold ./$name cypress run --spec cypress/integration/rendering/)$(underline test.spec.ts)
         Run specific test in cypress\n
 
 EOF