diff --git a/test/lib/helpers.js b/test/lib/helpers.js index 7a02d721..c483fb27 100644 --- a/test/lib/helpers.js +++ b/test/lib/helpers.js @@ -67,6 +67,28 @@ var comparators = { QUnit.push(Base.equals(actual, expected), actual, expected, message); }, + Element: function(actual, expected, message, options) { + // Convention: Loop through the attribute lists of both actual and + // expected element, and compare values even if they may be inherited. + // This is to handle styling values on SVGElements more flexibly. + equals(actual && actual.tagName, expected.tagName, + (message || '') + '.tagName', options); + for (var i = 0; i < expected.attributes.length; i++) { + var attr = expected.attributes[i]; + if (attr.specified) { + equals(actual && actual.getAttribute(attr.name), attr.value, + (message || '') + '.' + attr.name, options); + } + } + for (var i = 0; i < actual && actual.attributes.length; i++) { + var attr = actual.attributes[i]; + if (attr.specified) { + equals(attr.value, expected.getAttribute(attr.name) + (message || '') + '.' + attr.name, options); + } + } + }, + Base: function(actual, expected, message, options) { comparators.Object(actual, expected, message, options); }, @@ -228,14 +250,12 @@ function equals(actual, expected, message, options) { || type === 'boolean' && 'Boolean' || type === 'undefined' && 'Undefined' || Array.isArray(expected) && 'Array' - || (cls = expected && expected._class) - || type === 'object' && 'Object'; + || expected instanceof Element && 'Element' // handle DOM Elements + || (cls = expected && expected._class) // check _class 2nd last + || type === 'object' && 'Object'; // Object as catch-all var comparator = type && comparators[type]; - if (!message) { - message = type - ? type.charAt(0).toLowerCase() + type.substring(1) - : 'value'; - } + if (!message) + message = type ? type.toLowerCase() : 'value'; if (comparator) { comparator(actual, expected, message, options); } else if (expected && expected.equals) { diff --git a/test/tests/SVGExport.js b/test/tests/SVGExport.js index 217c1088..30eca294 100644 --- a/test/tests/SVGExport.js +++ b/test/tests/SVGExport.js @@ -12,527 +12,94 @@ module('SVGExport'); -// TODO: Implement proper tests and clean up testing code - -test('compare line path functions', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'line'); - var x1 = 5, - x2 = 45, - y1 = 5, - y2 = 45; - shape.setAttribute('x1', x1); - shape.setAttribute('y1', y1); - shape.setAttribute('x2', x2); - shape.setAttribute('y2', y2); - - var line = new Path.Line([x1, y1], [x2, y2]); - - var exportedLine = line.exportSVG(); - - var shapex1 = shape.getAttribute('x1'); - var shapey1 = shape.getAttribute('y1'); - var shapex2 = shape.getAttribute('x2'); - var shapey2 = shape.getAttribute('y2'); - - var exportedx1 = exportedLine.getAttribute('x1'); - var exportedy1 = exportedLine.getAttribute('y1'); - var exportedx2 = exportedLine.getAttribute('x2'); - var exportedy2 = exportedLine.getAttribute('y2'); - - equals(shapex1, exportedx1); - equals(shapey1, exportedy1); - equals(shapex2, exportedx2); - equals(shapey2, exportedy2); - +test('Export SVG line', function() { + var attrs = { + x1: 5, + x2: 45, + y1: 5, + y2: 45 + }; + var path = new Path.Line([attrs.x1, attrs.y1], [attrs.x2, attrs.y2]); + equals(path.exportSVG(), createSVG('line', attrs)); }); -test('compare negative line path functions', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'line'); - var x1 = -5, - x2 = -45, - y1 = -5, - y2 = -45; - shape.setAttribute('x1', x1); - shape.setAttribute('y1', y1); - shape.setAttribute('x2', x2); - shape.setAttribute('y2', y2); - - var line = new Path.Line([x1, y1], [x2, y2]); - - var exportedLine = line.exportSVG(); - - var shapex1 = shape.getAttribute('x1'); - var shapey1 = shape.getAttribute('y1'); - var shapex2 = shape.getAttribute('x2'); - var shapey2 = shape.getAttribute('y2'); - - var exportedx1 = exportedLine.getAttribute('x1'); - var exportedy1 = exportedLine.getAttribute('y1'); - var exportedx2 = exportedLine.getAttribute('x2'); - var exportedy2 = exportedLine.getAttribute('y2'); - - equals(shapex1, exportedx1); - equals(shapey1, exportedy1); - equals(shapex2, exportedx2); - equals(shapey2, exportedy2); - +test('Export SVG rect', function() { + var attrs = { + x: 25, + y: 25, + width: 100, + height: 100 + }; + var path = new Path.Rectangle(attrs); + equals(path.exportSVG({ matchShapes: true }), createSVG('rect', attrs)); }); -test('compare invalid line path functions', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'line'); - var x1 = null, - x2 = null, - y1 = null, - y2 = null; - shape.setAttribute('x1', x1); - shape.setAttribute('y1', y1); - shape.setAttribute('x2', x2); - shape.setAttribute('y2', y2); - - var line = new Path.Line([x1, y1], [x2, y2]); - - var exportedLine = line.exportSVG(); - - var shapex1 = shape.getAttribute('x1'); - var shapey1 = shape.getAttribute('y1'); - var shapex2 = shape.getAttribute('x2'); - var shapey2 = shape.getAttribute('y2'); - - var exportedx1 = exportedLine.getAttribute('x1'); - var exportedy1 = exportedLine.getAttribute('y1'); - var exportedx2 = exportedLine.getAttribute('x2'); - var exportedy2 = exportedLine.getAttribute('y2'); - - equals(shapex1, exportedx1); - equals(shapey1, exportedy1); - equals(shapex2, exportedx2); - equals(shapey2, exportedy2); - +test('Export SVG round rect', function() { + var attrs = { + x: 25, + y: 25, + rx: 50, + ry: 50, + width: 100, + height: 100 + }; + var path = new Path.Rectangle(new Rectangle(attrs), + new Size(attrs.rx, attrs.ry)); + equals(path.exportSVG({ matchShapes: true }), createSVG('rect', attrs)); }); -/* -test('compare rectangle values', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'rect'); - var x = 25, - y = 25, - width = 100, - height = 100; - shape.setAttribute('x', x); - shape.setAttribute('y', y); - shape.setAttribute('width', width); - shape.setAttribute('height', height); - - var point = new Point(100, 100); - var size = new Size(100, 100); - var path = new Path.Rectangle(point, size); - - var exportedRectangle = path.exportSVG(); - - var shapex1 = shape.getAttribute('x'); - var shapey1 = shape.getAttribute('y1'); - var shapewidth = shape.getAttribute('width'); - var shapeheight = shape.getAttribute('height'); - - var exportedx = exportedRectangle.getAttribute('x1'); - var exportedy = exportedRectangle.getAttribute('y1'); - - var exportedwidth = exportedRectangle.getAttribute('width'); - var exportedheight = exportedRectangle.getAttribute('height'); - - equals(shapex, exportedx); - equals(shapey, exportedy); - equals(shapewidth, exportedwidth); - equals(shapeheight, exportedheight); -}); - -test('compare negative rectangle values', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'rect'); - var x = -25, - y = -25, - width = -100, - height = -100; - shape.setAttribute('x', x); - shape.setAttribute('y', y); - shape.setAttribute('width', width); - shape.setAttribute('height', height); - - var topLeft = new Point(x, y); - var size = new Size(width, height); - var rect = new Rectangle(topLeft, size); - - var exportedRectangle = rect.exportSVG(); - - var shapex = shape.getAttribute('x'); - var shapey = shape.getAttribute('y'); - var shapewidth = shape.getAttribute('width'); - var shapeheight = shape.getAttribute('height'); - - var exportedx = exportedRectangle.getAttribute('x'); - var exportedy = exportedRectangle.getAttribute('y'); - var exportedwidth = exportedRectangle.getAttribute('width'); - var exportedheight = exportedRectangle.getAttribute('height'); - - equals(shapex, exportedx); - equals(shapey, exportedy); - equals(shapewidth, exportedwidth); - equals(shapeheight, exportedheight); -}); - -test('compare invalid rectangle values', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'rect'); - var x = null, - y = null, - width = null, - height = 100; - shape.setAttribute('x', x); - shape.setAttribute('y', y); - shape.setAttribute('width', width); - shape.setAttribute('height', height); - - var topLeft = new Point(x, y); - var size = new Size(width, height); - var rect = new Rectangle(topLeft, size); - - var exportedRectangle = rect.exportSVG(); - - var shapex = shape.getAttribute('x'); - var shapey = shape.getAttribute('y'); - var shapewidth = shape.getAttribute('width'); - var shapeheight = shape.getAttribute('height'); - - var exportedx = exportedRectangle.getAttribute('x'); - var exportedy = exportedRectangle.getAttribute('y'); - var exportedwidth = exportedRectangle.getAttribute('width'); - var exportedheight = exportedRectangle.getAttribute('height'); - - equals(shapex, exportedx); - equals(shapey, exportedy); - equals(shapewidth, exportedwidth); - equals(shapeheight, exportedheight); -}); - -test('compare rounded rectangle values', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'rect'); - var x = 25, - y = 25, - rx = 50, - ry = 50, - width = 100, - height = 100; - shape.setAttribute('x', x); - shape.setAttribute('y', y); - shape.setAttribute('rx', rx); - shape.setAttribute('ry', ry); - shape.setAttribute('width', width); - shape.setAttribute('height', height); - - var topLeft = new Point(x, y); - var size = new Size(width, height); - var cornerSize = new Size(rx, ry); - var rect = new Rectangle(topLeft, size); - var roundRect = new Path.Rectangle(rect, cornerSize); - - var exportedRectangle = rect.exportSVG(); - - var shapex = shape.getAttribute('x'); - var shapey = shape.getAttribute('y'); - var shapecx = shape.getAttribute('rx'); - var shapecy = shape.getAttribute('ry'); - var shapewidth = shape.getAttribute('width'); - var shapeheight = shape.getAttribute('height'); - - var exportedx = exportedRectangle.getAttribute('x'); - var exportedy = exportedRectangle.getAttribute('y'); - var exportedcx = exportedRectangle.getAttribute('rx'); - var exportedcy = exportedRectangle.getAttribute('ry'); - var exportedwidth = exportedRectangle.getAttribute('width'); - var exportedheight = exportedRectangle.getAttribute('height'); - - equals(shapex, exportedx); - equals(shapey, exportedy); - equals(shapewidth, exportedwidth); - equals(shapeheight, exportedheight); -}); - -test('compare negative rounded rectangle values', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'rect'); - var x = -25, - y = -25, - rx = -50, - ry = -50, - width = -100, - height = -100; - shape.setAttribute('x', x); - shape.setAttribute('y', y); - shape.setAttribute('rx', rx); - shape.setAttribute('ry', ry); - shape.setAttribute('width', width); - shape.setAttribute('height', height); - - var topLeft = new Point(x, y); - var size = new Size(width, height); - var cornerSize = new Size(rx, ry); - var rect = new Rectangle(topLeft, size); - var roundRect = new Path.Rectangle(rect, cornerSize); - - var exportedRectangle = rect.exportSVG(); - - var shapex = shape.getAttribute('x'); - var shapey = shape.getAttribute('y'); - var shapecx = shape.getAttribute('rx'); - var shapecy = shape.getAttribute('ry'); - var shapewidth = shape.getAttribute('width'); - var shapeheight = shape.getAttribute('height'); - - var exportedx = exportedRectangle.getAttribute('x'); - var exportedy = exportedRectangle.getAttribute('y'); - var exportedcx = exportedRectangle.getAttribute('rx'); - var exportedcy = exportedRectangle.getAttribute('ry'); - var exportedwidth = exportedRectangle.getAttribute('width'); - var exportedheight = exportedRectangle.getAttribute('height'); - - equals(shapex, exportedx); - equals(shapey, exportedy); - equals(shapewidth, exportedwidth); - equals(shapeheight, exportedheight); -}); - -test('compare invalid rounded rectangle values', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'rect'); - var x = null, - y = null, - rx = null, - ry = null, - width = null, - height = null; - shape.setAttribute('x', x); - shape.setAttribute('y', y); - shape.setAttribute('rx', rx); - shape.setAttribute('ry', ry); - shape.setAttribute('width', width); - shape.setAttribute('height', height); - - var topLeft = new Point(x, y); - var size = new Size(width, height); - var cornerSize = new Size(rx, ry); - var rect = new Rectangle(topLeft, size); - var roundRect = new Path.Rectangle(rect, cornerSize); - - var exportedRectangle = rect.exportSVG(); - - var shapex = shape.getAttribute('x'); - var shapey = shape.getAttribute('y'); - var shapecx = shape.getAttribute('rx'); - var shapecy = shape.getAttribute('ry'); - var shapewidth = shape.getAttribute('width'); - var shapeheight = shape.getAttribute('height'); - - var exportedx = exportedRectangle.getAttribute('x'); - var exportedy = exportedRectangle.getAttribute('y'); - var exportedcx = exportedRectangle.getAttribute('rx'); - var exportedcy = exportedRectangle.getAttribute('ry'); - var exportedwidth = exportedRectangle.getAttribute('width'); - var exportedheight = exportedRectangle.getAttribute('height'); - - equals(shapex, exportedx); - equals(shapey, exportedy); - equals(shapewidth, exportedwidth); - equals(shapeheight, exportedheight); -});*/ - -test('compare ellipse values', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'ellipse'); - var cx = 100, - cy = 80, - rx = 50, - ry = 30; - shape.setAttribute('cx', cx); - shape.setAttribute('cy', cy); - shape.setAttribute('rx', rx); - shape.setAttribute('ry', ry); - - var center = new Point(cx, cy); - var offset = new Point(rx, ry); - var topLeft = center.subtract(offset); - var bottomRight = center.add(offset); - - var rect = new Rectangle(topLeft, bottomRight); - var ellipse = new Shape.Ellipse(rect); - - var exportedEllipse = ellipse.exportSVG(); - - var shapecx = shape.getAttribute('cx'); - var shapecy = shape.getAttribute('cy'); - var shaperx = shape.getAttribute('rx'); - var shapery = shape.getAttribute('ry'); - - var exportedcx = exportedEllipse.getAttribute('cx'); - var exportedcy = exportedEllipse.getAttribute('cy'); - var exportedrx = exportedEllipse.getAttribute('rx'); - var exportedry = exportedEllipse.getAttribute('ry'); - - equals(shapecx, exportedcx); - equals(shapecy, exportedcy); - equals(shaperx, exportedrx); - equals(shapery, exportedry); - -}); - -test('compare circle values', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'circle'); - var cx = 100, - cy = 80, - r = 50; - shape.setAttribute('cx', cx); - shape.setAttribute('cy', cy); - shape.setAttribute('r', r); - - var center = new Point(cx, cy); - var circle = new Shape.Circle(center, r); - - var exportedCircle = circle.exportSVG(); - - var shapecx = shape.getAttribute('cx'); - var shapecy = shape.getAttribute('cy'); - var shaper = shape.getAttribute('r'); - - var exportedcx = exportedCircle.getAttribute('cx'); - var exportedcy = exportedCircle.getAttribute('cy'); - var exportedr = exportedCircle.getAttribute('r'); - - equals(shapecx, exportedcx); - equals(shapecy, exportedcy); - equals(shaper, exportedr); - -}); - -test('compare polygon values', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'polygon'); - var svgpoints = "100,10 40,180 190,60 10,60 160,180"; - shape.setAttribute('points', svgpoints); - - var poly = new Path(); - var points = shape.points; - var start = points.getItem(0); - var point; - poly.moveTo([start.x, start.y]); - - for (var i = 1; i < points.length; i++) { - point = points.getItem(i); - poly.lineTo([point.x, point.y]); +test('Export SVG ellipse', function() { + var attrs = { + cx: 300, + cy: 80, + rx: 100, + ry: 50 } - if (shape.nodeName.toLowerCase() == 'polygon') { - poly.closePath(); - } - - var exportedPolygon = poly.exportSVG(); - - var svgPoints = shape.getAttribute('points'); - - var exportedPoints = shape.getAttribute('points'); - - equals(svgPoints, exportedPoints); - + var path = new Path.Ellipse({ + center: new Point(attrs.cx, attrs.cy), + radius: new Point(attrs.rx, attrs.ry) + }); + equals(path.exportSVG({ matchShapes: true }), createSVG('ellipse', attrs)); }); -test('compare negative polygon values', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'polygon'); - var svgpoints = "-100,-10 -40,-180 -190,-60 -10,-60 -160,-180"; - shape.setAttribute('points', svgpoints); - - var poly = new Path(); - var points = shape.points; - var start = points.getItem(0); - var point; - poly.moveTo([start.x, start.y]); - - for (var i = 1; i < points.length; i++) { - point = points.getItem(i); - poly.lineTo([point.x, point.y]); +test('Export SVG circle', function() { + var attrs = { + cx: 100, + cy: 80, + r: 50 } - if (shape.nodeName.toLowerCase() == 'polygon') { - poly.closePath(); - } - - var exportedPolygon = poly.exportSVG(); - - var svgPoints = shape.getAttribute('points'); - - var exportedPoints = shape.getAttribute('points'); - - equals(svgPoints, exportedPoints); - + var path = new Path.Circle({ + center: new Point(attrs.cx, attrs.cy), + radius: attrs.r + }); + equals(path.exportSVG({ matchShapes: true }), createSVG('circle', attrs)); }); -test('compare polyline values', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'polyline'); - var svgpoints = "5,5 45,45 5,45 45,5"; - shape.setAttribute('points', svgpoints); - - var poly = new Path(); - var points = shape.points; - var start = points.getItem(0); - var point; - poly.moveTo([start.x, start.y]); - - for (var i = 1; i < points.length; i++) { - point = points.getItem(i); - poly.lineTo([point.x, point.y]); - } - if (shape.nodeName.toLowerCase() == 'polygon') { - poly.closePath(); - } - - var exportedPolygon = poly.exportSVG(); - - var svgPoints = shape.getAttribute('points'); - - var exportedPoints = shape.getAttribute('points'); - - equals(svgPoints, exportedPoints); +function createPolyPath(str) { + var points = str.split(' ').map(function(point) { + return point.split(',').map(parseFloat); + }); + var path = new Path(); + path.moveTo(points[0]); + for (var i = 1; i < points.length; i++) + path.lineTo(points[i]); + return path; +} +test('Export SVG polygon', function() { + var points = '100,10 40,180 190,60 10,60 160,180'; + var path = createPolyPath(points); + path.closePath(); + equals(path.exportSVG({ matchShapes: true }), createSVG('polygon', { + points: points + })); }); -test('compare negative polyline values', function() { - var svgns = 'http://www.w3.org/2000/svg'; - var shape = document.createElementNS(svgns, 'polyline'); - var svgpoints = "-5,-5 -45,-45 -5,-45 -45,-5"; - shape.setAttribute('points', svgpoints); - - var poly = new Path(); - var points = shape.points; - var start = points.getItem(0); - var point; - poly.moveTo([start.x, start.y]); - - for (var i = 1; i < points.length; i++) { - point = points.getItem(i); - poly.lineTo([point.x, point.y]); - } - if (shape.nodeName.toLowerCase() == 'polygon') { - poly.closePath(); - } - - var exportedPolygon = poly.exportSVG(); - - var svgPoints = shape.getAttribute('points'); - - var exportedPoints = shape.getAttribute('points'); - - equals(svgPoints, exportedPoints); - +test('Export SVG polyline', function() { + var points = '5,5 45,45 5,45 45,5'; + var path = createPolyPath(points); + equals(path.exportSVG({ matchShapes: true }), createSVG('polyline', { + points: points + })); }); + diff --git a/test/tests/SVGImport.js b/test/tests/SVGImport.js index c9295a35..212443dc 100644 --- a/test/tests/SVGImport.js +++ b/test/tests/SVGImport.js @@ -12,12 +12,6 @@ module('SVGImport'); -test('Import complex CompoundPath and clone', function() { - var svg = createSVG(';'); - var item = paper.project.importSVG(svg.getElementById('path')); - equals(item, item.clone(), null, { cloned: true }); -}); - test('Import SVG line', function() { var attrs = { x1: 5, @@ -112,10 +106,16 @@ test('Import SVG polygon', function() { }); test('Import SVG polyline', function() { - var points = "5,5 45,45 5,45 45,5"; + var points = '5,5 45,45 5,45 45,5'; var imported = paper.project.importSVG(createSVG('polyline', { points: points })); var path = createPolyPath(points); equals(imported, path); }); + +test('Import complex CompoundPath and clone', function() { + var svg = createSVG(';'); + var item = paper.project.importSVG(svg.getElementById('path')); + equals(item, item.clone(), null, { cloned: true }); +}); diff --git a/test/tests/load.js b/test/tests/load.js index acc8fdc7..adf878e3 100644 --- a/test/tests/load.js +++ b/test/tests/load.js @@ -59,6 +59,7 @@ /*#*/ include('HitResult.js'); +/*#*/ include('JSON.js'); + /*#*/ include('SVGImport.js'); /*#*/ include('SVGExport.js'); -/*#*/ include('JSON.js');