Feature/labels on links (#178)

* Fix conflicts

* Add some labels in data/default.js

* Update snapshots

* Minor tweaks align feature with master

* Update link.spec.js since JSON render tree changed with nesting <path> in <svg>

* Global link.renderLabel property to globaly disable labels on links

* In sandbox/utils merge the default config with the dataset config

* Add e2e tests for link label feature

* Add image to document links label feature

cypress/integration/link.e2e.js

@@ -3,7 +3,6 @@ const SANDBOX_URL = Cypress.env("SANDBOX_URL");
 const LinkPO = require("../page-objects/link.po");
 const NodePO = require("../page-objects/node.po");
 const SandboxPO = require("../page-objects/sandbox.po");
-let nodes = require("./../../sandbox/data/small/small.data").nodes.map(({ id }) => id);
 
 describe("[rd3g-link] link tests", function() {
     before(function() {
@@ -25,6 +24,25 @@ describe("[rd3g-link] link tests", function() {
         this.link34PO = new LinkPO(3);
     });
 
+    describe("when some link.renderLabel is enable", function() {
+        beforeEach(function() {
+            cy.contains("link.renderLabel").scrollIntoView();
+            this.sandboxPO.getFieldInput("link.renderLabel").click();
+        });
+
+        describe("and some link has a 'label' property", function() {
+            it("should properly render the label in the link between two nodes", function() {
+                // link between nodes' 1 and 2 should have a label
+                this.link12PO.getLabel().contains("link 1 and 2");
+            });
+        });
+
+        afterEach(function() {
+            cy.contains("link.renderLabel").scrollIntoView();
+            this.sandboxPO.getFieldInput("link.renderLabel").click();
+        });
+    });
+
     describe("when highlightDegree is 0", function() {
         beforeEach(function() {
             // set highlightDegree to 0

cypress/page-objects/link.po.js

@@ -14,6 +14,7 @@ function LinkPO(index) {
         this.getLine()
             .invoke("attr", "marker-end")
             .should("contain", "url(#marker-");
+    this.getLabel = () => this.getLine().siblings();
 }
 
 module.exports = LinkPO;

cypress/page-objects/sandbox.po.js

@@ -4,7 +4,7 @@
  */
 function SandboxPO() {
     // whitelist checkbox inputs
-    this.checkboxes = ["node.renderLabel", "staticGraph", "collapsible", "directed"];
+    this.checkboxes = ["link.renderLabel", "node.renderLabel", "staticGraph", "collapsible", "directed"];
 
     // actions
     this.fullScreenMode = () => cy.get(".container__graph > :nth-child(1) > :nth-child(1)");

sandbox/data/default.js

@@ -1,147 +1,147 @@
 module.exports = {
     links: [
         {
-            source: 'Androsynth',
-            target: 'Chenjesu'
+            source: "Androsynth",
+            target: "Chenjesu",
         },
         {
-            source: 'Androsynth',
-            target: 'Ilwrath'
+            source: "Androsynth",
+            target: "Ilwrath",
         },
         {
-            source: 'Androsynth',
-            target: 'Mycon'
+            source: "Androsynth",
+            target: "Mycon",
         },
         {
-            source: 'Androsynth',
-            target: 'Spathi'
+            source: "Androsynth",
+            target: "Spathi",
         },
         {
-            source: 'Androsynth',
-            target: 'Umgah'
+            source: "Androsynth",
+            target: "Umgah",
         },
         {
-            source: 'Androsynth',
-            target: 'VUX'
+            source: "Androsynth",
+            target: "VUX",
         },
         {
-            source: 'Chenjesu',
-            target: 'Mycon'
+            source: "Chenjesu",
+            target: "Mycon",
         },
         {
-            source: 'Chenjesu',
-            target: 'Spathi'
+            source: "Chenjesu",
+            target: "Spathi",
         },
         {
-            source: 'Chenjesu',
-            target: 'Umgah'
+            source: "Chenjesu",
+            target: "Umgah",
         },
         {
-            source: 'Chenjesu',
-            target: 'VUX'
+            source: "Chenjesu",
+            target: "VUX",
         },
         {
-            source: 'Ilwrath',
-            target: 'Spathi'
+            source: "Ilwrath",
+            target: "Spathi",
         },
         {
-            source: 'Ilwrath',
-            target: 'Umgah'
+            source: "Ilwrath",
+            target: "Umgah",
         },
         {
-            source: 'Ilwrath',
-            target: 'VUX'
+            source: "Ilwrath",
+            target: "VUX",
         },
         {
-            source: 'Mycon',
-            target: 'Umgah'
+            source: "Mycon",
+            target: "Umgah",
         },
         {
-            source: 'Mycon',
-            target: 'VUX'
+            source: "Mycon",
+            target: "VUX",
         },
         {
-            source: 'Umgah',
-            target: 'VUX'
+            source: "Umgah",
+            target: "VUX",
         },
         {
-            source: 'Androsynth',
-            target: 'Guardian'
+            source: "Androsynth",
+            target: "Guardian",
         },
         {
-            source: 'Chenjesu',
-            target: 'Broodhmome'
+            source: "Chenjesu",
+            target: "Broodhmome",
         },
         {
-            source: 'Ilwrath',
-            target: 'Avenger'
+            source: "Ilwrath",
+            target: "Avenger",
         },
         {
-            source: 'Mycon',
-            target: 'Podship'
+            source: "Mycon",
+            target: "Podship",
         },
         {
-            source: 'Spathi',
-            target: 'Eluder'
+            source: "Spathi",
+            target: "Eluder",
         },
         {
-            source: 'Umgah',
-            target: 'Drone'
+            source: "Umgah",
+            target: "Drone",
         },
         {
-            source: 'VUX',
-            target: 'Intruder'
-        }
+            source: "VUX",
+            target: "Intruder",
+        },
     ],
     nodes: [
         {
-            id: 'Androsynth'
+            id: "Androsynth",
         },
         {
-            id: 'Chenjesu'
+            id: "Chenjesu",
         },
         {
-            id: 'Ilwrath'
+            id: "Ilwrath",
         },
         {
-            id: 'Mycon'
+            id: "Mycon",
         },
         {
-            id: 'Spathi'
+            id: "Spathi",
         },
         {
-            id: 'Umgah'
+            id: "Umgah",
         },
         {
-            id: 'VUX'
+            id: "VUX",
         },
         {
-            id: 'Guardian',
-            symbolType: 'square'
+            id: "Guardian",
+            symbolType: "square",
         },
         {
-            id: 'Broodhmome',
-            symbolType: 'square'
+            id: "Broodhmome",
+            symbolType: "square",
         },
         {
-            id: 'Avenger',
-            symbolType: 'square'
+            id: "Avenger",
+            symbolType: "square",
         },
         {
-            id: 'Podship',
-            symbolType: 'square'
+            id: "Podship",
+            symbolType: "square",
         },
         {
-            id: 'Eluder',
-            symbolType: 'square'
+            id: "Eluder",
+            symbolType: "square",
         },
         {
-            id: 'Drone',
-            symbolType: 'square'
+            id: "Drone",
+            symbolType: "square",
         },
         {
-            id: 'Intruder',
-            symbolType: 'square'
-        }
-    ]
+            id: "Intruder",
+            symbolType: "square",
+        },
+    ],
 };

sandbox/data/small/small.data.js

@@ -2,37 +2,38 @@ module.exports = {
     links: [
         {
             source: 1,
-            target: 2
+            target: 2,
+            label: "link 1 and 2",
         },
         {
             source: 1,
-            target: 3
+            target: 3,
         },
         {
             source: 1,
-            target: 4
+            target: 4,
         },
         {
             source: 3,
-            target: 4
-        }
+            target: 4,
+        },
     ],
     nodes: [
         {
             id: 1,
-            name: 'Node 1'
+            name: "Node 1",
         },
         {
             id: 2,
-            name: 'Node 2'
+            name: "Node 2",
         },
         {
             id: 3,
-            name: 'Node 3'
+            name: "Node 3",
         },
         {
             id: 4,
-            name: 'Node 4'
-        }
-    ]
+            name: "Node 4",
+        },
+    ],
 };