GraphViewer: Added tests for colouring of Nodes/Edges

html/admin/js/graphViewer/graphViewer.js

@@ -276,6 +276,7 @@ function GraphViewer(svg, width, height,
   
   //TODO REMOVE
   //HACK to view the Controls in the Demo
+  
   var edgeShaperControls = new EdgeShaperControls($("#controls")[0], edgeShaper);
   edgeShaperControls.addAll();
   var nodeShaperControls = new NodeShaperControls($("#controls")[0], nodeShaper);

html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperSpec.js

@@ -336,14 +336,35 @@
         shaper = new EdgeShaper(d3.select("svg"),
           {
             color: {
-              type: "single",
-              value: "#123456"
+              type: "gradient",
+              source: "#123456",
+              target: "#654321"
             }
           }
-        );
+        ),
+        allStops;
         shaper.drawEdges(edges);
         
-        throw "Sorry todo";
+        expect($("#1-2 line").attr("stroke")).toEqual("url(#gradientEdgeColor)");
+        
+        // Sorry if the line is plain horizontal it is not displayed.
+        expect($("#1-2 line").attr("y2")).toBeDefined();
+        expect($("#1-2 line").attr("y2")).not.toEqual("0");
+        
+        // This check may not work
+        expect($("svg defs linearGradient").length).toEqual(1);
+        expect($("svg defs #gradientEdgeColor").length).toEqual(1);
+        
+        allStops = $("svg defs #gradientEdgeColor stop");
+        expect(allStops[0].getAttribute("offset")).toEqual("0");
+        expect(allStops[1].getAttribute("offset")).toEqual("0.4");
+        expect(allStops[2].getAttribute("offset")).toEqual("0.6");
+        expect(allStops[3].getAttribute("offset")).toEqual("1");
+        
+        expect(allStops[0].getAttribute("stop-color")).toEqual("#123456");
+        expect(allStops[1].getAttribute("stop-color")).toEqual("#123456");
+        expect(allStops[2].getAttribute("stop-color")).toEqual("#654321");
+        expect(allStops[3].getAttribute("stop-color")).toEqual("#654321");
         
       });
       

html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperSpec.js

@@ -87,6 +87,102 @@
       expect(clicked[2]).toBeUndefined();
     });
 
+    describe('testing for colours', function() {
+      
+      it('should be able to use the same colour for all nodes', function() {
+        var nodes = [{_id: 1}, {_id: 2}],
+        shaper = new NodeShaper(d3.select("svg"),
+        {
+          color: {
+            type: "single",
+            fill: "#123456",
+            stroke: "#654321"
+          }
+        });
+        shaper.drawNodes(nodes);
+        
+        expect($("#1").attr("fill")).toEqual("#123456");
+        expect($("#1").attr("stroke")).toEqual("#654321");
+        expect($("#2").attr("fill")).toEqual("#123456");
+        expect($("#2").attr("stroke")).toEqual("#654321");
+        
+      });
+      
+      it('should be able to use a colour based on attribute value', function() {
+        var nodes = [
+          {_id: 1,
+            label: "lbl1"
+          }, {
+            _id: 2,
+            label: "lbl2"
+          }, {
+            _id: 3,
+            label: "lbl3"
+          }, {
+            _id: 4,
+            label: "lbl1"
+          }],
+        shaper = new NodeShaper(d3.select("svg"),
+        {
+          color: {
+            type: "attribute",
+            key: "label"
+          }
+        }),
+        c1, c2, c3, c4;
+        shaper.drawNodes(nodes);
+        
+        c1 = $("#1").attr("fill");
+        c2 = $("#2").attr("fill");
+        c3 = $("#3").attr("fill");
+        c4 = $("#4").attr("fill");
+        
+        expect(c1).toBeDefined();
+        expect(c2).toBeDefined();
+        expect(c3).toBeDefined();
+        expect(c4).toBeDefined();
+        
+        expect(c1).toEqual(c4);
+        expect(c1).not.toEqual(c2);
+        expect(c1).not.toEqual(c3);
+        expect(c2).not.toEqual(c3);
+      });
+      
+      it('should be able to use colours based on _expanded attribute', function() {
+        var nodes = [
+          {
+            _id: 1,
+            _expanded: true
+          }, {
+            _id: 2,
+            _expanded: false
+          }, {
+            _id: 3
+          }],
+        shaper = new NodeShaper(d3.select("svg"),
+        {
+          color: {
+            type: "attribute",
+            key: "label"
+          }
+        }),
+        c1, c2, c3;
+        shaper.drawNodes(nodes);
+        
+        c1 = $("#1").attr("fill");
+        c2 = $("#2").attr("fill");
+        c3 = $("#3").attr("fill");
+        
+        expect(c1).toBeDefined();
+        expect(c2).toBeDefined();
+        expect(c3).toBeDefined();
+        
+        expect(c1).not.toEqual(c2);
+        expect(c1).toEqual(c3);
+      });
+      
+    });
+
     describe('when nodes are already drawn', function() {
       var nodes,
       clicked,