Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

GraphViewer: Added test for EdgeShaper UI elements

This commit is contained in:
Michael Hackstein 2013-04-02 11:10:57 +02:00
parent 60572c4889
commit 5f4a9a76d2
5 changed files with 341 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/admin/js/graphViewer/jasmine_test/runnerAll.html
View File

@ -30,6 +30,7 @@
<!-- UI Modules> -->
<script type="text/javascript" src="../ui/modalDialogHelper.js"></script>
<script type="text/javascript" src="../ui/nodeShaperControls.js"></script>
<script type="text/javascript" src="../ui/edgeShaperControls.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="specGraphViewer/graphViewerSpec.js"></script>
@ -39,6 +40,7 @@
<script type="text/javascript" src="specNodeShaper/nodeShaperSpec.js"></script>
<script type="text/javascript" src="specNodeShaper/nodeShaperUISpec.js"></script>
<script type="text/javascript" src="specEdgeShaper/edgeShaperSpec.js"></script>
<script type="text/javascript" src="specEdgeShaper/edgeShaperUISpec.js"></script>
<script type="text/javascript" src="specForceLayouter/forceLayouterSpec.js"></script>
<script type="text/javascript" src="specEvents/eventLibrarySpec.js"></script>

3
html/admin/js/graphViewer/jasmine_test/runnerEdgeShaper.html
View File

@ -19,9 +19,12 @@
<script type="text/javascript" src="helper/eventHelper.js"></script>
<script type="text/javascript" src="../graph/edgeShaper.js"></script>
<script type="text/javascript" src="../ui/modalDialogHelper.js"></script>
<script type="text/javascript" src="../ui/edgeShaperControls.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="specEdgeShaper/edgeShaperSpec.js"></script>
<script type="text/javascript" src="specEdgeShaper/edgeShaperUISpec.js"></script>
<!-- run JSLINT -->

147
html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperUISpec.js Normal file
View File

@ -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);
});
});
}());

18
html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js
View File

@ -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);

171
html/admin/js/graphViewer/ui/edgeShaperControls.js Normal file
View File

@ -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();
};
}