Test DOM structure of Selectors

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1876 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/select.js

@@ -123,8 +123,8 @@ svgedit.select.Selector.prototype.updateGripCursors = function(angle) {
 // show - boolean indicating whether grips should be shown or not
 svgedit.select.Selector.prototype.showGrips = function(show) {
 	// TODO: use suspendRedraw() here
-	var bShow = show ? "inline" : "none";
+	var bShow = show ? 'inline' : 'none';
-	selectorManager_.selectorGripsGroup.setAttribute("display", bShow);
+	selectorManager_.selectorGripsGroup.setAttribute('display', bShow);
 	var elem = this.selectedElement;
 	this.hasGrips = show;
 	if(elem && show) {
@@ -140,15 +140,15 @@ svgedit.select.Selector.prototype.resize = function() {
 		mgr = selectorManager_,
 		selectedGrips = mgr.selectorGrips,
 		selected = this.selectedElement,
-		sw = selected.getAttribute("stroke-width"),
+		sw = selected.getAttribute('stroke-width'),
 		current_zoom = svgFactory_.currentZoom();
 	var offset = 1/current_zoom;
-	if (selected.getAttribute("stroke") !== "none" && !isNaN(sw)) {
+	if (selected.getAttribute('stroke') !== 'none' && !isNaN(sw)) {
 		offset += (sw/2);
 	}
 
 	var tagName = selected.tagName;
-	if (tagName === "text") {
+	if (tagName === 'text') {
 		offset += 2/current_zoom;
 	}
 
@@ -223,26 +223,26 @@ svgedit.select.Selector.prototype.resize = function() {
 	}
 	var sr_handle = svgFactory_.svgRoot().suspendRedraw(100);
 
-	var dstr = "M" + nbax + "," + nbay
+	var dstr = 'M' + nbax + ',' + nbay
-				+ " L" + (nbax+nbaw) + "," + nbay
+				+ ' L' + (nbax+nbaw) + ',' + nbay
-				+ " " + (nbax+nbaw) + "," + (nbay+nbah)
+				+ ' ' + (nbax+nbaw) + ',' + (nbay+nbah)
-				+ " " + nbax + "," + (nbay+nbah) + "z";
+				+ ' ' + nbax + ',' + (nbay+nbah) + 'z';
 	selectedBox.setAttribute('d', dstr);
 	
-	var xform = angle ? "rotate(" + [angle,cx,cy].join(",") + ")" : "";
+	var xform = angle ? 'rotate(' + [angle,cx,cy].join(',') + ')' : '';
-	this.selectorGroup.setAttribute("transform", xform);
+	this.selectorGroup.setAttribute('transform', xform);
 
 	// TODO(codedread): Is this if needed?
 //	if(selected === selectedElements[0]) {
 		this.gripCoords = {
-			nw: [nbax, nbay],
+			'nw': [nbax, nbay],
-			ne: [nbax+nbaw, nbay],
+			'ne': [nbax+nbaw, nbay],
-			sw: [nbax, nbay+nbah],
+			'sw': [nbax, nbay+nbah],
-			se: [nbax+nbaw, nbay+nbah],
+			'se': [nbax+nbaw, nbay+nbah],
-			n:  [nbax + (nbaw)/2, nbay],
+			'n':  [nbax + (nbaw)/2, nbay],
-			w:	[nbax, nbay + (nbah)/2],
+			'w':	[nbax, nbay + (nbah)/2],
-			e:	[nbax + nbaw, nbay + (nbah)/2],
+			'e':	[nbax + nbaw, nbay + (nbah)/2],
-			s:	[nbax + (nbaw)/2, nbay + nbah]
+			's':	[nbax + (nbaw)/2, nbay + nbah]
 		};
 
 		for(var dir in this.gripCoords) {
@@ -370,9 +370,9 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
 			}
 		})
 	);
-	$.data(this.rotateGrip, "type", "rotate");
+	$.data(this.rotateGrip, 'type', 'rotate');
 
-	if($("#canvasBackground").length) return;
+	if($('#canvasBackground').length) return;
 
 	var dims = config_.dimensions;
 	var canvasbg = svgFactory_.createSVGElement({
@@ -450,7 +450,7 @@ svgedit.select.SelectorManager.prototype.releaseSelector = function(elem) {
 		if (this.selectors[i] && this.selectors[i] == sel) {
 			if (sel.locked == false) {
 				// TODO(codedread): Ensure this exists in this module.
-				console.log("WARNING! selector was released but was already unlocked");
+				console.log('WARNING! selector was released but was already unlocked');
 			}
 			delete this.selectorMap[elem.id];
 			sel.locked = false;
@@ -459,7 +459,7 @@ svgedit.select.SelectorManager.prototype.releaseSelector = function(elem) {
 
 			// remove from DOM and store reference in JS but only if it exists in the DOM
 			try {
-				sel.selectorGroup.setAttribute("display", "none");
+				sel.selectorGroup.setAttribute('display', 'none');
 			} catch(e) { }
 
 			break;
@@ -474,14 +474,14 @@ svgedit.select.SelectorManager.prototype.getRubberBandBox = function() {
 		this.rubberBandBox = this.selectorParentGroup.appendChild(
 			svgFactory_.createSVGElement({
 				'element': 'rect',
-				"attr": {
+				'attr': {
-					"id": "selectorRubberBand",
+					'id': 'selectorRubberBand',
-					"fill": "#22C",
+					'fill': '#22C',
-					"fill-opacity": 0.15,
+					'fill-opacity': 0.15,
-					"stroke": "#22C",
+					'stroke': '#22C',
-					"stroke-width": 0.5,
+					'stroke-width': 0.5,
-					"display": "none",
+					'display': 'none',
-					"style": "pointer-events:none"
+					'style': 'pointer-events:none'
 				}
 			})
 		);
@@ -499,7 +499,7 @@ svgedit.select.SelectorManager.prototype.getRubberBandBox = function() {
  *   SVGSVGElement svgRoot();
  *   SVGSVGElement svgContent();
  *
- *   Number: currentZoom();
+ *   Number currentZoom();
  *   Object getStrokedBBox(Element[]); // TODO(codedread): Remove when getStrokedBBox() has been put into svgutils.js
  * }
  */

test/select_test.html

@@ -3,6 +3,9 @@
 <head>
   <link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
   <script src='../editor/jquery.js'></script>
+  <script type='text/javascript' src='../editor/browsersupport.js'></script>
+  <script type='text/javascript' src='../editor/math.js'></script>
+  <script type='text/javascript' src='../editor/svgutils.js'></script>
   <script type='text/javascript' src='../editor/select.js'></script>
   <script type='text/javascript' src='qunit/qunit.js'></script>
   <script type='text/javascript'>
@@ -16,6 +19,60 @@
 
 	module('svgedit.select');
 
+	var svgns = 'http://www.w3.org/2000/svg';
+	var sandbox = document.getElementById('sandbox');
+	var svgroot;
+	var svgcontent;
+	var rect;
+	var mockConfig = {
+		dimensions: [640,480]
+	};
+	var mockFactory = {
+		createSVGElement: function(jsonMap) {
+			var elem = document.createElementNS(svgns, jsonMap['element']);
+			for (var attr in jsonMap['attr']) {
+				elem.setAttribute(attr, jsonMap['attr'][attr]);
+			}
+			return elem;
+		},
+		svgRoot: function() { return svgroot; },
+		svgContent: function() { return svgcontent; }
+	};
+
+    function setUp() {
+		svgroot = mockFactory.createSVGElement({
+			'element': 'svg',
+			'attr': {'id': 'svgroot'}
+		});
+		svgcontent = svgroot.appendChild(
+			mockFactory.createSVGElement({
+				'element': 'svg',
+				'attr': {'id': 'svgcontent'}
+			})
+		);
+		rect = svgcontent.appendChild(
+			mockFactory.createSVGElement({
+				'element': 'rect',
+				'attr': {
+					'id': 'rect',
+					'x': '50',
+					'y': '75',
+					'width': '200',
+					'height': '100'
+				}
+			})
+		);
+		sandbox.appendChild(svgroot);
+
+		svgedit.select.init(mockConfig, mockFactory);
+	}
+	
+	function tearDown() {
+		while (sandbox.hasChildNodes()) {
+			sandbox.removeChild(sandbox.firstChild);
+		}
+	}
+
 	test('Test svgedit.select package', function() {
 		expect(10);
 
@@ -31,6 +88,44 @@
 		equals(typeof svgedit.select.getSelectorManager, typeof function(){});
 	});
 	
+	test('Test Selector DOM structure', function() {
+		expect(20);
+
+		setUp();
+
+		ok(svgroot);
+		ok(svgroot.hasChildNodes());
+		equals(svgroot.childNodes.length, 3);
+
+		// Verify existence of canvas background.
+		var cb = svgroot.childNodes.item(0);
+		ok(cb);
+		equals(cb.id, 'canvasBackground');
+
+		ok(svgroot.childNodes.item(1));
+		equals(svgroot.childNodes.item(1), svgcontent);
+
+		// Verify existence of selectorParentGroup.
+		var spg = svgroot.childNodes.item(2);
+		ok(spg);
+		equals(spg.id, 'selectorParentGroup');
+		equals(spg.tagName, 'g');
+
+		// Verify existence of all grip elements.
+		ok(spg.querySelector('#selectorGrip_resize_nw'));
+		ok(spg.querySelector('#selectorGrip_resize_n'));
+		ok(spg.querySelector('#selectorGrip_resize_ne'));
+		ok(spg.querySelector('#selectorGrip_resize_e'));
+		ok(spg.querySelector('#selectorGrip_resize_se'));
+		ok(spg.querySelector('#selectorGrip_resize_s'));
+		ok(spg.querySelector('#selectorGrip_resize_sw'));
+		ok(spg.querySelector('#selectorGrip_resize_w'));
+		ok(spg.querySelector('#selectorGrip_rotateconnector'));
+		ok(spg.querySelector('#selectorGrip_rotate'));
+
+		tearDown();
+	});
+
   }); 
   </script>  
 </head>  
@@ -40,5 +135,6 @@
   <h2 id='qunit-userAgent'></h2>
   <ol id='qunit-tests'>
   </ol>
+  <div id='sandbox'></div>
 </body>  
 </html>