add basic tests for graph editor

Tests relying on node edition popup are not working yet

dream/platform/src/jsplumb/test.js

 /*global rJS, JSON, QUnit, jQuery, RSVP, console*/
 
-(function (rJS, JSON, QUnit, RSVP) {
+(function (rJS, JSON, QUnit, RSVP, $) {
   "use strict";
   var start = QUnit.start,
     stop = QUnit.stop,
     test = QUnit.test,
     equal = QUnit.equal,
+    ok = QUnit.ok,
     sample_class_definition = {
       "edge": {
         "description": "Base definition for edge",
@@ -100,6 +101,26 @@
           "color": "blue"
         }
       },
+      "node": {
+        "N1": {
+          "_class": "Example.Node",
+          "name": "Node 1",
+          "coordinate": {
+            "top": 0,
+            "left": 0
+          },
+          "shape": "square"
+        },
+        "N2": {
+          "_class": "Example.Node",
+          "name": "Node 2",
+          "shape": "circle"
+        }
+      }
+    },
+    sample_graph_not_connected = {
+      "edge": {
+      },
       "node": {
         "N1": {
           "_class": "Example.Node",
@@ -116,6 +137,10 @@
     sample_data_graph = JSON.stringify(
       {class_definition: sample_class_definition, graph: sample_graph }
     ),
+    sample_data_graph_not_connected = JSON.stringify(
+      {class_definition: sample_class_definition,
+       graph: sample_graph_not_connected }
+    ),
     sample_data_empty_graph = JSON.stringify(
       {class_definition: sample_class_definition, graph: {node: {}, edge: {}} }
     );
@@ -150,6 +175,8 @@
       stop();
 
       function runTest() {
+        // XXX here I used getContent to have a promise, but there must be a
+        // more elegant way.
         return jsplumb_gadget.getContent().then(function () {
             // fake a drop event
             var e = new Event('drop');
@@ -190,6 +217,182 @@
         .always(start);
     });
 
+    test("Node can be dragged", function () {
+      var jsplumb_gadget;
+      stop();
+
+      function runTest() {
+        return jsplumb_gadget.getContent().then(function () {
+            // 100 and 60 are about 10% of the #main div ( set by css, so this
+            // might change )
+            $("div[title='Node 1']").simulate("drag", {dx: 100, dy: 60});
+          })
+          .then(function () {
+            return jsplumb_gadget.getContent();
+          })
+          .then(function (content) {
+            var graph = JSON.parse(content).graph,
+              node_coordinate = graph.node.N1.coordinate;
+            // Since original coordinates where 0,0 we are now about 0.1,0.1
+            // as we moved 10%
+            ok((node_coordinate.top - 0.1) < 0.1, "Top is ok");
+            ok((node_coordinate.left - 0.1) < 0.1, "Left is ok");
+          });
+      }
+
+      g.declareGadget("./index.html", {
+        element: document.querySelector("#qunit-fixture")
+      })
+        .then(function (new_gadget) {
+          jsplumb_gadget = new_gadget;
+          jsplumb_gadget.render(sample_data_graph);
+        })
+        .then(function () {
+          return RSVP.any([
+            jsplumb_gadget.startService(),
+            runTest()
+            ]);
+        })
+        .fail(console.error.bind(this))
+        .always(start);
+    });
+
+    test("Node properties can be edited", function () {
+      var jsplumb_gadget;
+      stop();
+
+      function runTest() {
+        return jsplumb_gadget.getContent().then(function () {
+            $("div[title='Node 1']").simulate("dblclick");
+          
+            // XXX popup not displayed
+            $("input[name='name']").val("Modified Name");
+            $("input[value='Validate']").click();
+          })
+          .then(function () {
+            return jsplumb_gadget.getContent();
+          })
+          .then(function (content) {
+            var graph = JSON.parse(content).graph,
+              node = graph.node.N1;
+            equal(node.name, "Modified Name");
+          });
+      }
+
+      g.declareGadget("./index.html", {
+        element: document.querySelector("#qunit-fixture")
+      })
+        .then(function (new_gadget) {
+          jsplumb_gadget = new_gadget;
+          jsplumb_gadget.render(sample_data_graph);
+        })
+        .then(function () {
+          return RSVP.any([
+            jsplumb_gadget.startService(),
+            runTest()
+            ]);
+        })
+        .fail(console.error.bind(this))
+        .always(start);
+    });
+
+    test("Node can be connected", function () {
+      var jsplumb_gadget;
+      stop();
+
+      function runTest() {
+        return jsplumb_gadget.getContent().then(function (content) {
+            var node1 = jsplumb_gadget.props.main.querySelector(
+              "div[title='Node 1']"
+            ),
+              node2 = jsplumb_gadget.props.main.querySelector(
+              "div[title='Node 2']"
+            );
+
+            // At this point we have no edge
+            equal(Object.keys(JSON.parse(content).graph.edge).length, 0);
+
+            jsplumb_gadget.props.jsplumb_instance.connect(
+              {source: node1.id, target: node2.id}
+            );
+
+          })
+          .then(function () {
+            return jsplumb_gadget.getContent();
+          })
+          .then(function (content) {
+            var edge, graph = JSON.parse(content).graph;
+            equal(Object.keys(graph.node).length, 2);
+            equal(Object.keys(graph.edge).length, 1);
+            edge = graph.edge[Object.keys(graph.edge)[0]];
+
+            // XXX how edge class would be set ? the first one from schema ?
+            //equal(edge._class, "Example.Edge");
+            equal(edge.source, "N1");
+            equal(edge.destination, "N2");
+          });
+      }
+
+      g.declareGadget("./index.html", {
+        element: document.querySelector("#qunit-fixture")
+      })
+        .then(function (new_gadget) {
+          jsplumb_gadget = new_gadget;
+          jsplumb_gadget.render(sample_data_graph_not_connected);
+        })
+        .then(function () {
+          return RSVP.any([
+            jsplumb_gadget.startService(),
+            runTest()
+            ]);
+        })
+        .fail(console.error.bind(this))
+        .always(start);
+    });
+
+    test("Node can be deleted", function () {
+      var jsplumb_gadget;
+      stop();
+
+      function runTest() {
+        return jsplumb_gadget.getContent().then(function () {
+            $("div[title='Node 1']").simulate("dblclick");
+          
+            // XXX popup not displayed
+            $("input[value='Delete']").click();
+          })
+          .then(function () {
+            return jsplumb_gadget.getContent();
+          })
+          .then(function (content) {
+            var graph = JSON.parse(content).graph;
+            equal(1, Object.keys(graph.node).length);
+          });
+      }
+
+      g.declareGadget("./index.html", {
+        element: document.querySelector("#qunit-fixture")
+      })
+        .then(function (new_gadget) {
+          jsplumb_gadget = new_gadget;
+          jsplumb_gadget.render(sample_data_graph);
+        })
+        .then(function () {
+          return RSVP.any([
+            jsplumb_gadget.startService(),
+            runTest()
+            ]);
+        })
+        .fail(console.error.bind(this))
+        .always(start);
+    });
+
+
+    // test("Node id can changed (connections are updated and node"
+    //      " can be edited afterwards)",
+    // test("New node can edited",
+    // test("New node can deleted",
+
   });
 
-}(rJS, JSON, QUnit, RSVP));
+}(rJS, JSON, QUnit, RSVP, jQuery));