From 5f4a9a76d2255c0aaed6314cb08a9119cfa67c93 Mon Sep 17 00:00:00 2001 From: Michael Hackstein Date: Tue, 2 Apr 2013 11:10:57 +0200 Subject: [PATCH] GraphViewer: Added test for EdgeShaper UI elements --- .../graphViewer/jasmine_test/runnerAll.html | 2 + .../jasmine_test/runnerEdgeShaper.html | 3 + .../specEdgeShaper/edgeShaperUISpec.js | 147 +++++++++++++++ .../specNodeShaper/nodeShaperUISpec.js | 18 ++ .../js/graphViewer/ui/edgeShaperControls.js | 171 ++++++++++++++++++ 5 files changed, 341 insertions(+) create mode 100644 html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperUISpec.js create mode 100644 html/admin/js/graphViewer/ui/edgeShaperControls.js diff --git a/html/admin/js/graphViewer/jasmine_test/runnerAll.html b/html/admin/js/graphViewer/jasmine_test/runnerAll.html index 8dbb12eab8..adc9dd6740 100644 --- a/html/admin/js/graphViewer/jasmine_test/runnerAll.html +++ b/html/admin/js/graphViewer/jasmine_test/runnerAll.html @@ -30,6 +30,7 @@ + @@ -39,6 +40,7 @@ + diff --git a/html/admin/js/graphViewer/jasmine_test/runnerEdgeShaper.html b/html/admin/js/graphViewer/jasmine_test/runnerEdgeShaper.html index 738be1ba59..58c1faa2b8 100644 --- a/html/admin/js/graphViewer/jasmine_test/runnerEdgeShaper.html +++ b/html/admin/js/graphViewer/jasmine_test/runnerEdgeShaper.html @@ -19,9 +19,12 @@ + + + diff --git a/html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperUISpec.js b/html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperUISpec.js new file mode 100644 index 0000000000..e99b1f0b54 --- /dev/null +++ b/html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperUISpec.js @@ -0,0 +1,147 @@ +/*jslint indent: 2, nomen: true, maxlen: 100, white: true plusplus: true */ +/*global beforeEach, afterEach */ +/*global describe, it, expect*/ +/*global runs, waitsFor, spyOn */ +/*global window, eb, loadFixtures, document */ +/*global $, _, d3*/ +/*global helper*/ +/*global EdgeShaper, EdgeShaperControls*/ + +//////////////////////////////////////////////////////////////////////////////// +/// @brief Graph functionality +/// +/// @file +/// +/// DISCLAIMER +/// +/// Copyright 2010-2012 triagens GmbH, Cologne, Germany +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// +/// Copyright holder is triAGENS GmbH, Cologne, Germany +/// +/// @author Michael Hackstein +/// @author Copyright 2011-2013, triAGENS GmbH, Cologne, Germany +//////////////////////////////////////////////////////////////////////////////// + + +(function () { + "use strict"; + + describe('Edge Shaper UI', function () { + var svg, shaper, shaperUI, list, spy; + + beforeEach(function () { + svg = document.createElement("svg"); + document.body.appendChild(svg); + shaper = new EdgeShaper(d3.select("svg")); + list = document.createElement("ul"); + document.body.appendChild(list); + list.id = "control_list"; + shaperUI = new EdgeShaperControls(list, shaper); + spyOn(shaper, 'changeTo'); + }); + + afterEach(function () { + document.body.removeChild(svg); + document.body.removeChild(list); + }); + + it('should throw errors if not setup correctly', function() { + expect(function() { + var e = new EdgeShaperControls(); + }).toThrow("A list element has to be given."); + expect(function() { + var e = new EdgeShaperControls(list); + }).toThrow("The EdgeShaper has to be given."); + }); + + it('should be able to add a shape none control to the list', function() { + runs(function() { + shaperUI.addControlOpticShapeNone(); + + expect($("#control_list #control_none").length).toEqual(1); + + helper.simulateMouseEvent("click", "control_none"); + + expect(shaper.changeTo).toHaveBeenCalledWith({ + shape: { + type: EdgeShaper.shapes.NONE + } + }); + }); + }); + + it('should be able to add a shape arrow control to the list', function() { + runs(function() { + shaperUI.addControlOpticShapeArrow(); + + expect($("#control_list #control_arrow").length).toEqual(1); + + helper.simulateMouseEvent("click", "control_arrow"); + + expect(shaper.changeTo).toHaveBeenCalledWith({ + shape: { + type: EdgeShaper.shapes.ARROW + } + }); + }); + + }); + + it('should be able to add a switch label control to the list', function() { + runs(function() { + shaperUI.addControlOpticLabel(); + + expect($("#control_list #control_label").length).toEqual(1); + + helper.simulateMouseEvent("click", "control_label"); + $("#control_label_key").attr("value", "theAnswer"); + helper.simulateMouseEvent("click", "control_label_submit"); + + expect(shaper.changeTo).toHaveBeenCalledWith({ + label: "theAnswer" + }); + }); + + waitsFor(function() { + return $("#control_rect_modal").length === 0; + }, 2000, "The modal dialog should disappear."); + + }); + + it('should be able to add all optic controls to the list', function () { + shaperUI.addAllOptics(); + + expect($("#control_list #control_none").length).toEqual(1); + expect($("#control_list #control_arrow").length).toEqual(1); + expect($("#control_list #control_label").length).toEqual(1); + + }); + + it('should be able to add all action controls to the list', function () { + shaperUI.addAllActions(); + + }); + + it('should be able to add all controls to the list', function () { + shaperUI.addAll(); + + expect($("#control_list #control_none").length).toEqual(1); + expect($("#control_list #control_arrow").length).toEqual(1); + expect($("#control_list #control_label").length).toEqual(1); + + }); + }); + +}()); \ No newline at end of file diff --git a/html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js b/html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js index 2d609d66da..4dc590d6f2 100644 --- a/html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js +++ b/html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js @@ -66,6 +66,22 @@ }).toThrow("The NodeShaper has to be given."); }); + it('should be able to add a shape none control to the list', function() { + runs(function() { + shaperUI.addControlOpticShapeNone(); + + expect($("#control_list #control_none").length).toEqual(1); + + helper.simulateMouseEvent("click", "control_none"); + + expect(shaper.changeTo).toHaveBeenCalledWith({ + shape: { + type: NodeShaper.shapes.NONE + } + }); + }); + }); + it('should be able to add a shape circle control to the list', function() { runs(function() { shaperUI.addControlOpticShapeCircle(); @@ -142,6 +158,7 @@ it('should be able to add all optic controls to the list', function () { shaperUI.addAllOptics(); + expect($("#control_list #control_none").length).toEqual(1); expect($("#control_list #control_circle").length).toEqual(1); expect($("#control_list #control_rect").length).toEqual(1); expect($("#control_list #control_label").length).toEqual(1); @@ -156,6 +173,7 @@ it('should be able to add all controls to the list', function () { shaperUI.addAll(); + expect($("#control_list #control_none").length).toEqual(1); expect($("#control_list #control_circle").length).toEqual(1); expect($("#control_list #control_rect").length).toEqual(1); expect($("#control_list #control_label").length).toEqual(1); diff --git a/html/admin/js/graphViewer/ui/edgeShaperControls.js b/html/admin/js/graphViewer/ui/edgeShaperControls.js new file mode 100644 index 0000000000..98a3025243 --- /dev/null +++ b/html/admin/js/graphViewer/ui/edgeShaperControls.js @@ -0,0 +1,171 @@ +/*jslint indent: 2, nomen: true, maxlen: 100, white: true plusplus: true */ +/*global $, _, d3*/ +/*global document*/ +/*global EdgeShaper, modalDialogHelper*/ +//////////////////////////////////////////////////////////////////////////////// +/// @brief Graph functionality +/// +/// @file +/// +/// DISCLAIMER +/// +/// Copyright 2010-2012 triagens GmbH, Cologne, Germany +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// +/// Copyright holder is triAGENS GmbH, Cologne, Germany +/// +/// @author Michael Hackstein +/// @author Copyright 2011-2013, triAGENS GmbH, Cologne, Germany +//////////////////////////////////////////////////////////////////////////////// +function NodeShaperControls(list, shaper) { + "use strict"; + + if (list === undefined) { + throw "A list element has to be given."; + } + if (shaper === undefined) { + throw "The NodeShaper has to be given."; + } + var self = this, + + createModalDialog = function(title, idprefix, objects, callback) { + var table = modalDialogHelper.modalDivTemplate(title, idprefix, callback); + + _.each(objects, function(o) { + var tr = document.createElement("tr"), + labelTh = document.createElement("th"), + contentTh = document.createElement("th"), + input; + + table.appendChild(tr); + tr.appendChild(labelTh); + labelTh.className = "collectionTh capitalize"; + labelTh.appendChild(document.createTextNode(o.id + ":")); + tr.appendChild(contentTh); + contentTh.className = "collectionTh"; + switch(o.type) { + case "text": + input = document.createElement("input"); + input.type = "text"; + input.id = idprefix + o.id; + contentTh.appendChild(input); + break; + default: + //Sorry unknown + table.removeChild(tr); + break; + } + }); + $("#" + idprefix + "modal").modal('show'); + }; + + this.addControlOpticShapeCircle = function() { + var prefix = "control_circle", + idprefix = prefix + "_", + callback = function() { + createModalDialog("Switch to Circle", + idprefix, [{ + type: "text", + id: "radius" + }], function () { + var r = $("#" + idprefix + "radius").attr("value"); + shaper.changeTo({ + shape: { + type: NodeShaper.shapes.CIRCLE, + radius: r + } + }); + } + ); + }, + button = document.createElement("li"); + button.className = "graph_control " + prefix; + button.id = prefix; + button.appendChild(document.createTextNode("Circle")); + list.appendChild(button); + button.onclick = callback; + }; + + this.addControlOpticShapeRect = function() { + var prefix = "control_rect", + idprefix = prefix + "_", + callback = function() { + createModalDialog("Switch to Rectangle", + idprefix, [{ + type: "text", + id: "width" + },{ + type: "text", + id: "height" + }], function () { + var w = $("#" + idprefix + "width").attr("value"), + h = $("#" + idprefix + "height").attr("value"); + shaper.changeTo({ + shape: { + type: NodeShaper.shapes.RECT, + width: w, + height: h + } + }); + } + ); + }, + button = document.createElement("li"); + button.className = "graph_control " + prefix; + button.id = prefix; + button.appendChild(document.createTextNode("Rectangle")); + list.appendChild(button); + button.onclick = callback; + }; + + this.addControlOpticLabel = function() { + var prefix = "control_label", + idprefix = prefix + "_", + callback = function() { + createModalDialog("Switch Label Attribute", + idprefix, [{ + type: "text", + id: "key" + }], function () { + var key = $("#" + idprefix + "key").attr("value"); + shaper.changeTo({ + label: key + }); + } + ); + }, + button = document.createElement("li"); + button.className = "graph_control " + prefix; + button.id = prefix; + button.appendChild(document.createTextNode("Label")); + list.appendChild(button); + button.onclick = callback; + }; + + this.addAllOptics = function () { + self.addControlOpticShapeCircle(); + self.addControlOpticShapeRect(); + self.addControlOpticLabel(); + }; + + this.addAllActions = function () { + + }; + + this.addAll = function () { + self.addAllOptics(); + self.addAllActions(); + }; + +} \ No newline at end of file