github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Breaking change: Rename config file to svgedit-config-iife.js (or for the module version, svgedit-config-es.js);

Browse Source 
also expect one directory higher; incorporates #207 (@iuyiuy)
- Breaking change: Separate `extIconsPath` from `extPath` (not copying over icons)
- Breaking change: Don't reference `custom.css` in HTML; can instead be referenced in JavaScript through
    the config file (provided in `svgedit-config-sample-iife.js`/`svgedit-config-sample-es.js` as `svgedit-custom.css` for
    better namespacing); incorporates #207 (@iuyiuy)
- Breaking change: Remove minified jgraduate/spinbtn files (minified within Rollup routine)
- Fix: Zoom when scrolled; incorporates #169 (@AndrolGenhald), adapting for conventions; also allow avoidance when shift key pressed
- Fix: Update Atom feed reference in HTML
- Fixes related to recent commits: Some path and method name fixes needed, function order, missing methods, variable scope declaration, no need for DOMContentLoaded listeners in modules, switch back to non-default export, avoid trimming nullish, deal with mock tests, fix `math.matrixMultiply`, use jquery-svg where needed for array/SVG attributes; add babel-polyfill and defer script to imagelib; other misc. fixes
- Enhancement: Move config-sample.js out of `editor` directory
- Enhancement: For `callback`-style extensions, also provide config object; add following
   to that object: buildCanvgCallback, canvg, decode64, encode64, executeAfterLoads, getTypeMap, isChrome, ieIE, NS, text2xml
- Enhancement: Complete ES6 modules work (extensions, locales, tests), along with Babel;
    make Node build routine for converting modular source to non-modular,
    use `loadStylesheets` for modular stylehsheet defining (but parallel loading);
- Enhancement: Add `stylesheets` config for modular but parallel stylesheet loading with `@default` option for simple inclusion/exclusion of defaults (if not going with default).
- Refactoring: Clean up `svg-editor.html`: consistent indents; avoid extra lbs, avoid long lines
- Refactoring: Avoid embedded API adding inline JavaScript listener
- Refactoring: Move layers and context code to `draw.js`
- Refactoring: Move `pathActions` from `svgcanvas.js` (though preserve aliases to these methods on `canvas`) and `convertPath` from `svgutils.js` to `path.js`
- Refactoring: Move `getStrokedBBox` from `svgcanvas.js` (while keeping an alias) to `svgutils.js` (as `getStrokedBBoxDefaultVisible` to avoid conflict with existing)
- Docs: Remove "dependencies" comments in code except where summarizing role of jQuery or a non-obvious dependency
- Refactoring/Linting: Enfore `no-extra-semi` and `quote-props` rules
- Refactoring: Further avoidance of quotes on properties (as possible)
- Refactoring: Use `class` in place of functions where intended as classes
- Refactoring: Consistency and granularity in extensions imports
- Testing: Update QUnit to 2.6.1 (node_modules) and Sinon to 5.0.8 (and add sinon-test at 2.1.3) and enforce eslint-plugin-qunit linting rules; update custom extensions
- Testing: Add node-static for automating (and accessing out-of-directory contents)
- Testing: Avoid HTML attributes for styling
- Testing: Add npm `test` script
- Testing: Comment out unused jQuery SVG test
- Testing: Add test1 and svgutils_performance_test to all tests page
- Testing: Due apparently to Path having not been a formal class, the test was calling it without `new`; refactored now with sufficient mock data to take into account it is a class
- npm: Update devDeps
- npm: Add html modules and config build to test script
This commit is contained in:
Brett Zamir
2018-05-22 18:03:16 +08:00
parent ae2394f086
commit 8c9e40d349
260 changed files with 100462 additions and 13388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
test/all_tests.html
View File

@@ -4,24 +4,37 @@
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<title>All SVG-edit Tests</title>
<style>
iframe {width: 100%; height: 70px;}
</style>
<script defer="defer" src="all_tests.js"></script>
</head>
<body>
<h1>All SVG-edit Tests</h1>
<p>This file frames all SVG-edit test pages. This should only include tests known to work. These tests are known to pass 100% in the following: Firefox 3.6, Chrome 7, IE9 Preview 6 (1.9.8006.6000), Opera 10.63. If a test is broken in this page, it is possible that <em>YOU</em> broke it. Please do not submit code that breaks any of these tests.</p>
<iframe src="jquery-svg_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="svgtransformlist_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="contextmenu_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="math_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="svgutils_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="svgutils_bbox_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="history_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="select_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="draw_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="units_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="path_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="sanitize_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="coords_test.html" width="100%" height="70" scrolling="no"></iframe>
<iframe src="recalculate_test.html" width="100%" height="70" scrolling="no"></iframe>
<p>This file frames all SVG-edit test pages. This should only include
tests known to work. These tests are known to pass 100% in the
following:
Firefox 3.6, Chrome 7, IE9 Preview 6 (1.9.8006.6000), Opera 10.63.
If a test is broken in this page, it is possible that <em>YOU</em>
broke it. Please do not submit code that breaks any of these tests.</p>
<!--
<iframe src="jquery-svg_test.html" scrolling="no"></iframe>
-->
<iframe src="svgtransformlist_test.html" scrolling="no"></iframe>
<iframe src="contextmenu_test.html" scrolling="no"></iframe>
<iframe src="math_test.html" scrolling="no"></iframe>
<iframe src="svgutils_test.html" scrolling="no"></iframe>
<iframe src="svgutils_bbox_test.html" scrolling="no"></iframe>
<iframe src="history_test.html" scrolling="no"></iframe>
<iframe src="select_test.html" scrolling="no"></iframe>
<iframe src="draw_test.html" scrolling="no"></iframe>
<iframe src="units_test.html" scrolling="no"></iframe>
<iframe src="path_test.html" scrolling="no"></iframe>
<iframe src="sanitize_test.html" scrolling="no"></iframe>
<iframe src="coords_test.html" scrolling="no"></iframe>
<iframe src="recalculate_test.html" scrolling="no"></iframe>
<iframe src="test1.html" scrolling="no"></iframe>
<iframe src="svgutils_performance_test.html" scrolling="no"></iframe>
</body>
<script src="all_tests.js"></script>
</html>

4
test/all_tests.js
View File

@@ -1,8 +1,8 @@
const iframes = document.querySelectorAll('iframe');
[...iframes].forEach((f) => {
f.addEventListener('load', () => {
f.contentWindow.QUnit.done = () => {
f.contentWindow.QUnit.done(() => {
f.style.height = (f.contentDocument.body.scrollHeight + 20) + 'px';
};
});
});
});

9
test/contextmenu_test.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<title>Unit Tests for contextmenu.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script>
// Mock for browser.js
@@ -12,15 +12,14 @@
ready () {}
};
</script>
<script src="../editor/contextmenu.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="contextmenu_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="contextmenu_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for contextmenu.js</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="svgroot" style="visibility:hidden"></div>
<div id="svgroot" style="visibility: hidden;"></div>
</body>
</html>

58
test/contextmenu_test.js
View File

@@ -1,60 +1,60 @@
/* eslint-env qunit */
/* globals svgedit, equals */
import * as contextmenu from '../editor/contextmenu.js';
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});
function tearDown () {
svgedit.contextmenu.resetCustomMenus();
contextmenu.resetCustomMenus();
}
module('svgedit.contextmenu');
QUnit.module('svgedit.contextmenu');
test('Test svgedit.contextmenu package', function () {
expect(4);
QUnit.test('Test svgedit.contextmenu package', function (assert) {
assert.expect(4);
ok(svgedit.contextmenu, 'contextmenu registered correctly');
ok(svgedit.addContextMenuItem, 'addContextMenuItem registered correctly');
ok(svgedit.contextmenu.hasCustomMenuItemHandler, 'contextmenu hasCustomHandler registered correctly');
ok(svgedit.contextmenu.getCustomMenuItemHandler, 'contextmenu getCustomHandler registered correctly');
assert.ok(contextmenu, 'contextmenu registered correctly');
assert.ok(contextmenu.add, 'add registered correctly');
assert.ok(contextmenu.hasCustomHandler, 'contextmenu hasCustomHandler registered correctly');
assert.ok(contextmenu.getCustomHandler, 'contextmenu getCustomHandler registered correctly');
});
test('Test svgedit.contextmenu does not add invalid menu item', function () {
expect(3);
QUnit.test('Test svgedit.contextmenu does not add invalid menu item', function (assert) {
assert.expect(3);
svgedit.addContextMenuItem({id: 'justanid'});
ok(!svgedit.contextmenu.hasCustomMenuItemHandler('justanid'), 'menu item with just an id is invalid');
contextmenu.add({id: 'justanid'});
assert.ok(!contextmenu.hasCustomHandler('justanid'), 'menu item with just an id is invalid');
svgedit.addContextMenuItem({id: 'idandlabel', label: 'anicelabel'});
ok(!svgedit.contextmenu.hasCustomMenuItemHandler('idandlabel'), 'menu item with just an id and label is invalid');
contextmenu.add({id: 'idandlabel', label: 'anicelabel'});
assert.ok(!contextmenu.hasCustomHandler('idandlabel'), 'menu item with just an id and label is invalid');
svgedit.addContextMenuItem({id: 'idandlabel', label: 'anicelabel', action: 'notafunction'});
ok(!svgedit.contextmenu.hasCustomMenuItemHandler('idandlabel'), 'menu item with action that is not a function is invalid');
contextmenu.add({id: 'idandlabel', label: 'anicelabel', action: 'notafunction'});
assert.ok(!contextmenu.hasCustomHandler('idandlabel'), 'menu item with action that is not a function is invalid');
});
test('Test svgedit.contextmenu adds valid menu item', function () {
expect(2);
QUnit.test('Test svgedit.contextmenu adds valid menu item', function (assert) {
assert.expect(2);
const validItem = {id: 'valid', label: 'anicelabel', action () { alert('testing'); }};
svgedit.addContextMenuItem(validItem);
contextmenu.add(validItem);
ok(svgedit.contextmenu.hasCustomMenuItemHandler('valid'), 'Valid menu item is added.');
equals(svgedit.contextmenu.getCustomMenuItemHandler('valid'), validItem.action, 'Valid menu action is added.');
assert.ok(contextmenu.hasCustomHandler('valid'), 'Valid menu item is added.');
assert.equal(contextmenu.getCustomHandler('valid'), validItem.action, 'Valid menu action is added.');
tearDown();
});
test('Test svgedit.contextmenu rejects valid duplicate menu item id', function () {
expect(1);
QUnit.test('Test svgedit.contextmenu rejects valid duplicate menu item id', function (assert) {
assert.expect(1);
const validItem1 = {id: 'valid', label: 'anicelabel', action () { alert('testing'); }};
const validItem2 = {id: 'valid', label: 'anicelabel', action () { alert('testingtwice'); }};
svgedit.addContextMenuItem(validItem1);
svgedit.addContextMenuItem(validItem2);
contextmenu.add(validItem1);
contextmenu.add(validItem2);
equals(svgedit.contextmenu.getCustomMenuItemHandler('valid'), validItem1.action, 'duplicate menu item is rejected.');
assert.equal(contextmenu.getCustomHandler('valid'), validItem1.action, 'duplicate menu item is rejected.');
tearDown();
});

16
test/coords_test.html
View File

@@ -4,25 +4,17 @@
<meta charset="utf-8" />
<title>Unit Tests for coords.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/svgedit.js"></script>
<script src="../editor/math.js"></script>
<script src="../editor/pathseg.js"></script>
<script src="../editor/browser.js"></script>
<script src="../editor/svgutils.js"></script>
<script src="../editor/units.js"></script>
<script src="../editor/svgtransformlist.js"></script>
<script src="../editor/coords.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="coords_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="coords_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for svgedit.coords</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="root" style="visibility:hidden"></div>
<div id="root" style="visibility: hidden;"></div>
</body>
</html>

152
test/coords_test.js
View File

@@ -1,29 +1,31 @@
/* eslint-env qunit */
/* globals svgedit, equals */
import {NS} from '../editor/svgedit.js';
import * as utilities from '../editor/svgutils.js';
import * as coords from '../editor/coords.js';
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});
const root = document.getElementById('root');
const svgroot = document.createElementNS(svgedit.NS.SVG, 'svg');
const svgroot = document.createElementNS(NS.SVG, 'svg');
svgroot.id = 'svgroot';
root.appendChild(svgroot);
const svg = document.createElementNS(svgedit.NS.SVG, 'svg');
const svg = document.createElementNS(NS.SVG, 'svg');
svgroot.appendChild(svg);
let elemId = 1;
function setUp () {
// Mock out editor context.
svgedit.utilities.init({
utilities.init({
getSVGRoot () { return svg; },
getDOMDocument () { return null; },
getDOMContainer () { return null; }
});
svgedit.coords.init({
coords.init({
getGridSnapping () { return false; },
getDrawing () {
return {
@@ -39,12 +41,12 @@ function tearDown () {
}
}
test('Test remapElement(translate) for rect', function () {
expect(4);
QUnit.test('Test remapElement(translate) for rect', function (assert) {
assert.expect(4);
setUp();
const rect = document.createElementNS(svgedit.NS.SVG, 'rect');
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('x', '200');
rect.setAttribute('y', '150');
rect.setAttribute('width', '250');
@@ -64,21 +66,21 @@ test('Test remapElement(translate) for rect', function () {
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(rect, attrs, m);
coords.remapElement(rect, attrs, m);
equals(rect.getAttribute('x'), '300');
equals(rect.getAttribute('y'), '100');
equals(rect.getAttribute('width'), '125');
equals(rect.getAttribute('height'), '75');
assert.equal(rect.getAttribute('x'), '300');
assert.equal(rect.getAttribute('y'), '100');
assert.equal(rect.getAttribute('width'), '125');
assert.equal(rect.getAttribute('height'), '75');
tearDown();
});
test('Test remapElement(scale) for rect', function () {
expect(4);
QUnit.test('Test remapElement(scale) for rect', function (assert) {
assert.expect(4);
setUp();
const rect = document.createElementNS(svgedit.NS.SVG, 'rect');
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('width', '250');
rect.setAttribute('height', '120');
svg.appendChild(rect);
@@ -96,21 +98,21 @@ test('Test remapElement(scale) for rect', function () {
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
svgedit.coords.remapElement(rect, attrs, m);
coords.remapElement(rect, attrs, m);
equals(rect.getAttribute('x'), '0');
equals(rect.getAttribute('y'), '0');
equals(rect.getAttribute('width'), '500');
equals(rect.getAttribute('height'), '60');
assert.equal(rect.getAttribute('x'), '0');
assert.equal(rect.getAttribute('y'), '0');
assert.equal(rect.getAttribute('width'), '500');
assert.equal(rect.getAttribute('height'), '60');
tearDown();
});
test('Test remapElement(translate) for circle', function () {
expect(3);
QUnit.test('Test remapElement(translate) for circle', function (assert) {
assert.expect(3);
setUp();
const circle = document.createElementNS(svgedit.NS.SVG, 'circle');
const circle = document.createElementNS(NS.SVG, 'circle');
circle.setAttribute('cx', '200');
circle.setAttribute('cy', '150');
circle.setAttribute('r', '125');
@@ -128,20 +130,20 @@ test('Test remapElement(translate) for circle', function () {
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(circle, attrs, m);
coords.remapElement(circle, attrs, m);
equals(circle.getAttribute('cx'), '300');
equals(circle.getAttribute('cy'), '100');
equals(circle.getAttribute('r'), '125');
assert.equal(circle.getAttribute('cx'), '300');
assert.equal(circle.getAttribute('cy'), '100');
assert.equal(circle.getAttribute('r'), '125');
tearDown();
});
test('Test remapElement(scale) for circle', function () {
expect(3);
QUnit.test('Test remapElement(scale) for circle', function (assert) {
assert.expect(3);
setUp();
const circle = document.createElementNS(svgedit.NS.SVG, 'circle');
const circle = document.createElementNS(NS.SVG, 'circle');
circle.setAttribute('cx', '200');
circle.setAttribute('cy', '150');
circle.setAttribute('r', '250');
@@ -159,21 +161,21 @@ test('Test remapElement(scale) for circle', function () {
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
svgedit.coords.remapElement(circle, attrs, m);
coords.remapElement(circle, attrs, m);
equals(circle.getAttribute('cx'), '400');
equals(circle.getAttribute('cy'), '75');
assert.equal(circle.getAttribute('cx'), '400');
assert.equal(circle.getAttribute('cy'), '75');
// Radius is the minimum that fits in the new bounding box.
equals(circle.getAttribute('r'), '125');
assert.equal(circle.getAttribute('r'), '125');
tearDown();
});
test('Test remapElement(translate) for ellipse', function () {
expect(4);
QUnit.test('Test remapElement(translate) for ellipse', function (assert) {
assert.expect(4);
setUp();
const ellipse = document.createElementNS(svgedit.NS.SVG, 'ellipse');
const ellipse = document.createElementNS(NS.SVG, 'ellipse');
ellipse.setAttribute('cx', '200');
ellipse.setAttribute('cy', '150');
ellipse.setAttribute('rx', '125');
@@ -193,21 +195,21 @@ test('Test remapElement(translate) for ellipse', function () {
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(ellipse, attrs, m);
coords.remapElement(ellipse, attrs, m);
equals(ellipse.getAttribute('cx'), '300');
equals(ellipse.getAttribute('cy'), '100');
equals(ellipse.getAttribute('rx'), '125');
equals(ellipse.getAttribute('ry'), '75');
assert.equal(ellipse.getAttribute('cx'), '300');
assert.equal(ellipse.getAttribute('cy'), '100');
assert.equal(ellipse.getAttribute('rx'), '125');
assert.equal(ellipse.getAttribute('ry'), '75');
tearDown();
});
test('Test remapElement(scale) for ellipse', function () {
expect(4);
QUnit.test('Test remapElement(scale) for ellipse', function (assert) {
assert.expect(4);
setUp();
const ellipse = document.createElementNS(svgedit.NS.SVG, 'ellipse');
const ellipse = document.createElementNS(NS.SVG, 'ellipse');
ellipse.setAttribute('cx', '200');
ellipse.setAttribute('cy', '150');
ellipse.setAttribute('rx', '250');
@@ -227,21 +229,21 @@ test('Test remapElement(scale) for ellipse', function () {
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
svgedit.coords.remapElement(ellipse, attrs, m);
coords.remapElement(ellipse, attrs, m);
equals(ellipse.getAttribute('cx'), '400');
equals(ellipse.getAttribute('cy'), '75');
equals(ellipse.getAttribute('rx'), '500');
equals(ellipse.getAttribute('ry'), '60');
assert.equal(ellipse.getAttribute('cx'), '400');
assert.equal(ellipse.getAttribute('cy'), '75');
assert.equal(ellipse.getAttribute('rx'), '500');
assert.equal(ellipse.getAttribute('ry'), '60');
tearDown();
});
test('Test remapElement(translate) for line', function () {
expect(4);
QUnit.test('Test remapElement(translate) for line', function (assert) {
assert.expect(4);
setUp();
const line = document.createElementNS(svgedit.NS.SVG, 'line');
const line = document.createElementNS(NS.SVG, 'line');
line.setAttribute('x1', '50');
line.setAttribute('y1', '100');
line.setAttribute('x2', '120');
@@ -261,21 +263,21 @@ test('Test remapElement(translate) for line', function () {
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(line, attrs, m);
coords.remapElement(line, attrs, m);
equals(line.getAttribute('x1'), '150');
equals(line.getAttribute('y1'), '50');
equals(line.getAttribute('x2'), '220');
equals(line.getAttribute('y2'), '150');
assert.equal(line.getAttribute('x1'), '150');
assert.equal(line.getAttribute('y1'), '50');
assert.equal(line.getAttribute('x2'), '220');
assert.equal(line.getAttribute('y2'), '150');
tearDown();
});
test('Test remapElement(scale) for line', function () {
expect(4);
QUnit.test('Test remapElement(scale) for line', function (assert) {
assert.expect(4);
setUp();
const line = document.createElementNS(svgedit.NS.SVG, 'line');
const line = document.createElementNS(NS.SVG, 'line');
line.setAttribute('x1', '50');
line.setAttribute('y1', '100');
line.setAttribute('x2', '120');
@@ -295,21 +297,21 @@ test('Test remapElement(scale) for line', function () {
m.c = 0; m.d = 0.5;
m.e = 0; m.f = 0;
svgedit.coords.remapElement(line, attrs, m);
coords.remapElement(line, attrs, m);
equals(line.getAttribute('x1'), '100');
equals(line.getAttribute('y1'), '50');
equals(line.getAttribute('x2'), '240');
equals(line.getAttribute('y2'), '100');
assert.equal(line.getAttribute('x1'), '100');
assert.equal(line.getAttribute('y1'), '50');
assert.equal(line.getAttribute('x2'), '240');
assert.equal(line.getAttribute('y2'), '100');
tearDown();
});
test('Test remapElement(translate) for text', function () {
expect(2);
QUnit.test('Test remapElement(translate) for text', function (assert) {
assert.expect(2);
setUp();
const text = document.createElementNS(svgedit.NS.SVG, 'text');
const text = document.createElementNS(NS.SVG, 'text');
text.setAttribute('x', '50');
text.setAttribute('y', '100');
svg.appendChild(text);
@@ -325,10 +327,10 @@ test('Test remapElement(translate) for text', function () {
m.c = 0; m.d = 1;
m.e = 100; m.f = -50;
svgedit.coords.remapElement(text, attrs, m);
coords.remapElement(text, attrs, m);
equals(text.getAttribute('x'), '150');
equals(text.getAttribute('y'), '50');
assert.equal(text.getAttribute('x'), '150');
assert.equal(text.getAttribute('y'), '50');
tearDown();
});

19
test/draw_test.html
View File

@@ -4,25 +4,18 @@
<meta charset="utf-8" />
<title>Unit Tests for draw.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/svgedit.js"></script>
<script src="../editor/pathseg.js"></script>
<script src="../editor/browser.js"></script>
<script src="../editor/units.js"></script>
<script src="../editor/svgutils.js"></script>
<script src="../editor/draw.js"></script>
<script src="../editor/layer.js"></script>
<script src="qunit/qunit.js"></script>
<script src="sinon/sinon-1.17.3.js"></script>
<script src="sinon/sinon-qunit-1.0.0.js"></script>
<script defer="defer" src="draw_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script src="../node_modules/sinon/pkg/sinon-no-sourcemaps.js"></script>
<script src="../node_modules/sinon-test/dist/sinon-test.js"></script>
<script type="module" src="draw_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for draw.js</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="sandbox" style="visibility:hidden"></div>
<div id="sandbox" style="visibility: hidden;"></div>
</body>
</html>

707
test/draw_test.js
View File

File diff suppressed because it is too large Load Diff

12
test/history_test.html
View File

@@ -4,24 +4,22 @@
<meta charset="utf-8" />
<title>Unit Tests for history.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/svgedit.js"></script>
<script src="../editor/history.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="history_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="history_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for history.js</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="divparent" style="visibility:hidden">
<div id="divparent" style="visibility: hidden;">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="div4" style="visibility:hidden">
<div id="div4" style="visibility: hidden;">
<div id="div5"></div>
</div>
</body>

501
test/history_test.js
View File

@@ -1,24 +1,28 @@
/* eslint-env qunit */
/* globals svgedit, equals */
import {NS} from '../editor/svgedit.js';
import * as transformlist from '../editor/svgtransformlist.js';
import * as utilities from '../editor/svgutils.js';
import * as history from '../editor/history.js';
// TODO(codedread): Write tests for handling history events.
// Mocked out methods.
svgedit.transformlist = {};
svgedit.transformlist.removeElementFromListMap = function (elem) {};
svgedit.utilities = {};
svgedit.utilities.getHref = function (elem) { return '#foo'; };
svgedit.utilities.setHref = function (elem, val) {};
svgedit.utilities.getRotationAngle = function (elem) { return 0; };
transformlist.changeRemoveElementFromListMap(function (elem) {});
utilities.mock({
getHref (elem) { return '#foo'; },
setHref (elem, val) {},
getRotationAngle (elem) { return 0; }
});
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});
const {NS} = svgedit;
// const svg = document.createElementNS(NS.SVG, 'svg');
let undoMgr = null;
const divparent = document.getElementById('divparent');
@@ -28,14 +32,14 @@ const div3 = document.getElementById('div3');
const div4 = document.getElementById('div4');
const div5 = document.getElementById('div5');
module('svgedit.history');
QUnit.module('svgedit.history');
class MockCommand {
constructor (optText) { this.text_ = optText; }
apply () {};
unapply () {};
getText () { return this.text_; };
elements () { return []; };
apply () {}
unapply () {}
getText () { return this.text_; }
elements () { return []; }
}
/*
@@ -45,69 +49,69 @@ class MockHistoryEventHandler {
*/
function setUp () {
undoMgr = new svgedit.history.UndoManager();
undoMgr = new history.UndoManager();
}
function tearDown () {
undoMgr = null;
}
test('Test svgedit.history package', function () {
expect(13);
QUnit.test('Test svgedit.history package', function (assert) {
assert.expect(13);
ok(svgedit.history);
ok(svgedit.history.MoveElementCommand);
ok(svgedit.history.InsertElementCommand);
ok(svgedit.history.ChangeElementCommand);
ok(svgedit.history.RemoveElementCommand);
ok(svgedit.history.BatchCommand);
ok(svgedit.history.UndoManager);
equals(typeof svgedit.history.MoveElementCommand, typeof function () {});
equals(typeof svgedit.history.InsertElementCommand, typeof function () {});
equals(typeof svgedit.history.ChangeElementCommand, typeof function () {});
equals(typeof svgedit.history.RemoveElementCommand, typeof function () {});
equals(typeof svgedit.history.BatchCommand, typeof function () {});
equals(typeof svgedit.history.UndoManager, typeof function () {});
assert.ok(history);
assert.ok(history.MoveElementCommand);
assert.ok(history.InsertElementCommand);
assert.ok(history.ChangeElementCommand);
assert.ok(history.RemoveElementCommand);
assert.ok(history.BatchCommand);
assert.ok(history.UndoManager);
assert.equal(typeof history.MoveElementCommand, typeof function () {});
assert.equal(typeof history.InsertElementCommand, typeof function () {});
assert.equal(typeof history.ChangeElementCommand, typeof function () {});
assert.equal(typeof history.RemoveElementCommand, typeof function () {});
assert.equal(typeof history.BatchCommand, typeof function () {});
assert.equal(typeof history.UndoManager, typeof function () {});
});
test('Test UndoManager methods', function () {
expect(14);
QUnit.test('Test UndoManager methods', function (assert) {
assert.expect(14);
setUp();
ok(undoMgr);
ok(undoMgr.addCommandToHistory);
ok(undoMgr.getUndoStackSize);
ok(undoMgr.getRedoStackSize);
ok(undoMgr.resetUndoStack);
ok(undoMgr.getNextUndoCommandText);
ok(undoMgr.getNextRedoCommandText);
assert.ok(undoMgr);
assert.ok(undoMgr.addCommandToHistory);
assert.ok(undoMgr.getUndoStackSize);
assert.ok(undoMgr.getRedoStackSize);
assert.ok(undoMgr.resetUndoStack);
assert.ok(undoMgr.getNextUndoCommandText);
assert.ok(undoMgr.getNextRedoCommandText);
equals(typeof undoMgr, typeof {});
equals(typeof undoMgr.addCommandToHistory, typeof function () {});
equals(typeof undoMgr.getUndoStackSize, typeof function () {});
equals(typeof undoMgr.getRedoStackSize, typeof function () {});
equals(typeof undoMgr.resetUndoStack, typeof function () {});
equals(typeof undoMgr.getNextUndoCommandText, typeof function () {});
equals(typeof undoMgr.getNextRedoCommandText, typeof function () {});
assert.equal(typeof undoMgr, typeof {});
assert.equal(typeof undoMgr.addCommandToHistory, typeof function () {});
assert.equal(typeof undoMgr.getUndoStackSize, typeof function () {});
assert.equal(typeof undoMgr.getRedoStackSize, typeof function () {});
assert.equal(typeof undoMgr.resetUndoStack, typeof function () {});
assert.equal(typeof undoMgr.getNextUndoCommandText, typeof function () {});
assert.equal(typeof undoMgr.getNextRedoCommandText, typeof function () {});
tearDown();
});
test('Test UndoManager.addCommandToHistory() function', function () {
expect(3);
QUnit.test('Test UndoManager.addCommandToHistory() function', function (assert) {
assert.expect(3);
setUp();
equals(undoMgr.getUndoStackSize(), 0);
assert.equal(undoMgr.getUndoStackSize(), 0);
undoMgr.addCommandToHistory(new MockCommand());
equals(undoMgr.getUndoStackSize(), 1);
assert.equal(undoMgr.getUndoStackSize(), 1);
undoMgr.addCommandToHistory(new MockCommand());
equals(undoMgr.getUndoStackSize(), 2);
assert.equal(undoMgr.getUndoStackSize(), 2);
tearDown();
});
test('Test UndoManager.getUndoStackSize() and getRedoStackSize() functions', function () {
expect(18);
QUnit.test('Test UndoManager.getUndoStackSize() and getRedoStackSize() functions', function (assert) {
assert.expect(18);
setUp();
@@ -115,46 +119,46 @@ test('Test UndoManager.getUndoStackSize() and getRedoStackSize() functions', fun
undoMgr.addCommandToHistory(new MockCommand());
undoMgr.addCommandToHistory(new MockCommand());
equals(undoMgr.getUndoStackSize(), 3);
equals(undoMgr.getRedoStackSize(), 0);
assert.equal(undoMgr.getUndoStackSize(), 3);
assert.equal(undoMgr.getRedoStackSize(), 0);
undoMgr.undo();
equals(undoMgr.getUndoStackSize(), 2);
equals(undoMgr.getRedoStackSize(), 1);
assert.equal(undoMgr.getUndoStackSize(), 2);
assert.equal(undoMgr.getRedoStackSize(), 1);
undoMgr.undo();
equals(undoMgr.getUndoStackSize(), 1);
equals(undoMgr.getRedoStackSize(), 2);
assert.equal(undoMgr.getUndoStackSize(), 1);
assert.equal(undoMgr.getRedoStackSize(), 2);
undoMgr.undo();
equals(undoMgr.getUndoStackSize(), 0);
equals(undoMgr.getRedoStackSize(), 3);
assert.equal(undoMgr.getUndoStackSize(), 0);
assert.equal(undoMgr.getRedoStackSize(), 3);
undoMgr.undo();
equals(undoMgr.getUndoStackSize(), 0);
equals(undoMgr.getRedoStackSize(), 3);
assert.equal(undoMgr.getUndoStackSize(), 0);
assert.equal(undoMgr.getRedoStackSize(), 3);
undoMgr.redo();
equals(undoMgr.getUndoStackSize(), 1);
equals(undoMgr.getRedoStackSize(), 2);
assert.equal(undoMgr.getUndoStackSize(), 1);
assert.equal(undoMgr.getRedoStackSize(), 2);
undoMgr.redo();
equals(undoMgr.getUndoStackSize(), 2);
equals(undoMgr.getRedoStackSize(), 1);
assert.equal(undoMgr.getUndoStackSize(), 2);
assert.equal(undoMgr.getRedoStackSize(), 1);
undoMgr.redo();
equals(undoMgr.getUndoStackSize(), 3);
equals(undoMgr.getRedoStackSize(), 0);
assert.equal(undoMgr.getUndoStackSize(), 3);
assert.equal(undoMgr.getRedoStackSize(), 0);
undoMgr.redo();
equals(undoMgr.getUndoStackSize(), 3);
equals(undoMgr.getRedoStackSize(), 0);
assert.equal(undoMgr.getUndoStackSize(), 3);
assert.equal(undoMgr.getRedoStackSize(), 0);
tearDown();
});
test('Test UndoManager.resetUndoStackSize() function', function () {
expect(4);
QUnit.test('Test UndoManager.resetUndoStackSize() function', function (assert) {
assert.expect(4);
setUp();
@@ -163,90 +167,90 @@ test('Test UndoManager.resetUndoStackSize() function', function () {
undoMgr.addCommandToHistory(new MockCommand());
undoMgr.undo();
equals(undoMgr.getUndoStackSize(), 2);
equals(undoMgr.getRedoStackSize(), 1);
assert.equal(undoMgr.getUndoStackSize(), 2);
assert.equal(undoMgr.getRedoStackSize(), 1);
undoMgr.resetUndoStack();
equals(undoMgr.getUndoStackSize(), 0);
equals(undoMgr.getRedoStackSize(), 0);
assert.equal(undoMgr.getUndoStackSize(), 0);
assert.equal(undoMgr.getRedoStackSize(), 0);
tearDown();
});
test('Test UndoManager.getNextUndoCommandText() function', function () {
expect(9);
QUnit.test('Test UndoManager.getNextUndoCommandText() function', function (assert) {
assert.expect(9);
setUp();
equals(undoMgr.getNextUndoCommandText(), '');
assert.equal(undoMgr.getNextUndoCommandText(), '');
undoMgr.addCommandToHistory(new MockCommand('First'));
undoMgr.addCommandToHistory(new MockCommand('Second'));
undoMgr.addCommandToHistory(new MockCommand('Third'));
equals(undoMgr.getNextUndoCommandText(), 'Third');
assert.equal(undoMgr.getNextUndoCommandText(), 'Third');
undoMgr.undo();
equals(undoMgr.getNextUndoCommandText(), 'Second');
assert.equal(undoMgr.getNextUndoCommandText(), 'Second');
undoMgr.undo();
equals(undoMgr.getNextUndoCommandText(), 'First');
assert.equal(undoMgr.getNextUndoCommandText(), 'First');
undoMgr.undo();
equals(undoMgr.getNextUndoCommandText(), '');
assert.equal(undoMgr.getNextUndoCommandText(), '');
undoMgr.redo();
equals(undoMgr.getNextUndoCommandText(), 'First');
assert.equal(undoMgr.getNextUndoCommandText(), 'First');
undoMgr.redo();
equals(undoMgr.getNextUndoCommandText(), 'Second');
assert.equal(undoMgr.getNextUndoCommandText(), 'Second');
undoMgr.redo();
equals(undoMgr.getNextUndoCommandText(), 'Third');
assert.equal(undoMgr.getNextUndoCommandText(), 'Third');
undoMgr.redo();
equals(undoMgr.getNextUndoCommandText(), 'Third');
assert.equal(undoMgr.getNextUndoCommandText(), 'Third');
tearDown();
});
test('Test UndoManager.getNextRedoCommandText() function', function () {
expect(8);
QUnit.test('Test UndoManager.getNextRedoCommandText() function', function (assert) {
assert.expect(8);
setUp();
equals(undoMgr.getNextRedoCommandText(), '');
assert.equal(undoMgr.getNextRedoCommandText(), '');
undoMgr.addCommandToHistory(new MockCommand('First'));
undoMgr.addCommandToHistory(new MockCommand('Second'));
undoMgr.addCommandToHistory(new MockCommand('Third'));
equals(undoMgr.getNextRedoCommandText(), '');
assert.equal(undoMgr.getNextRedoCommandText(), '');
undoMgr.undo();
equals(undoMgr.getNextRedoCommandText(), 'Third');
assert.equal(undoMgr.getNextRedoCommandText(), 'Third');
undoMgr.undo();
equals(undoMgr.getNextRedoCommandText(), 'Second');
assert.equal(undoMgr.getNextRedoCommandText(), 'Second');
undoMgr.undo();
equals(undoMgr.getNextRedoCommandText(), 'First');
assert.equal(undoMgr.getNextRedoCommandText(), 'First');
undoMgr.redo();
equals(undoMgr.getNextRedoCommandText(), 'Second');
assert.equal(undoMgr.getNextRedoCommandText(), 'Second');
undoMgr.redo();
equals(undoMgr.getNextRedoCommandText(), 'Third');
assert.equal(undoMgr.getNextRedoCommandText(), 'Third');
undoMgr.redo();
equals(undoMgr.getNextRedoCommandText(), '');
assert.equal(undoMgr.getNextRedoCommandText(), '');
tearDown();
});
test('Test UndoManager.undo() and redo() functions', function () {
expect(10);
QUnit.test('Test UndoManager.undo() and redo() functions', function (assert) {
assert.expect(10);
setUp();
@@ -265,302 +269,305 @@ test('Test UndoManager.undo() and redo() functions', function () {
undoMgr.addCommandToHistory(cmd2);
undoMgr.addCommandToHistory(cmd3);
ok(!lastCalled);
assert.ok(!lastCalled);
undoMgr.undo();
equals(lastCalled, 'cmd3.unapply');
assert.equal(lastCalled, 'cmd3.unapply');
undoMgr.redo();
equals(lastCalled, 'cmd3.apply');
assert.equal(lastCalled, 'cmd3.apply');
undoMgr.undo();
undoMgr.undo();
equals(lastCalled, 'cmd2.unapply');
assert.equal(lastCalled, 'cmd2.unapply');
undoMgr.undo();
equals(lastCalled, 'cmd1.unapply');
assert.equal(lastCalled, 'cmd1.unapply');
lastCalled = null;
undoMgr.undo();
ok(!lastCalled);
assert.ok(!lastCalled);
undoMgr.redo();
equals(lastCalled, 'cmd1.apply');
assert.equal(lastCalled, 'cmd1.apply');
undoMgr.redo();
equals(lastCalled, 'cmd2.apply');
assert.equal(lastCalled, 'cmd2.apply');
undoMgr.redo();
equals(lastCalled, 'cmd3.apply');
assert.equal(lastCalled, 'cmd3.apply');
lastCalled = null;
undoMgr.redo();
ok(!lastCalled);
assert.ok(!lastCalled);
tearDown();
});
test('Test MoveElementCommand', function () {
expect(26);
QUnit.test('Test MoveElementCommand', function (assert) {
assert.expect(26);
setUp();
let move = new svgedit.history.MoveElementCommand(div3, div1, divparent);
ok(move.unapply);
ok(move.apply);
equals(typeof move.unapply, typeof function () {});
equals(typeof move.apply, typeof function () {});
let move = new history.MoveElementCommand(div3, div1, divparent);
assert.ok(move.unapply);
assert.ok(move.apply);
assert.equal(typeof move.unapply, typeof function () {});
assert.equal(typeof move.apply, typeof function () {});
move.unapply();
equals(divparent.firstElementChild, div3);
equals(divparent.firstElementChild.nextElementSibling, div1);
equals(divparent.lastElementChild, div2);
assert.equal(divparent.firstElementChild, div3);
assert.equal(divparent.firstElementChild.nextElementSibling, div1);
assert.equal(divparent.lastElementChild, div2);
move.apply();
equals(divparent.firstElementChild, div1);
equals(divparent.firstElementChild.nextElementSibling, div2);
equals(divparent.lastElementChild, div3);
assert.equal(divparent.firstElementChild, div1);
assert.equal(divparent.firstElementChild.nextElementSibling, div2);
assert.equal(divparent.lastElementChild, div3);
move = new svgedit.history.MoveElementCommand(div1, null, divparent);
move = new history.MoveElementCommand(div1, null, divparent);
move.unapply();
equals(divparent.firstElementChild, div2);
equals(divparent.firstElementChild.nextElementSibling, div3);
equals(divparent.lastElementChild, div1);
assert.equal(divparent.firstElementChild, div2);
assert.equal(divparent.firstElementChild.nextElementSibling, div3);
assert.equal(divparent.lastElementChild, div1);
move.apply();
equals(divparent.firstElementChild, div1);
equals(divparent.firstElementChild.nextElementSibling, div2);
equals(divparent.lastElementChild, div3);
assert.equal(divparent.firstElementChild, div1);
assert.equal(divparent.firstElementChild.nextElementSibling, div2);
assert.equal(divparent.lastElementChild, div3);
move = new svgedit.history.MoveElementCommand(div2, div5, div4);
move = new history.MoveElementCommand(div2, div5, div4);
move.unapply();
equals(divparent.firstElementChild, div1);
equals(divparent.firstElementChild.nextElementSibling, div3);
equals(divparent.lastElementChild, div3);
equals(div4.firstElementChild, div2);
equals(div4.firstElementChild.nextElementSibling, div5);
assert.equal(divparent.firstElementChild, div1);
assert.equal(divparent.firstElementChild.nextElementSibling, div3);
assert.equal(divparent.lastElementChild, div3);
assert.equal(div4.firstElementChild, div2);
assert.equal(div4.firstElementChild.nextElementSibling, div5);
move.apply();
equals(divparent.firstElementChild, div1);
equals(divparent.firstElementChild.nextElementSibling, div2);
equals(divparent.lastElementChild, div3);
equals(div4.firstElementChild, div5);
equals(div4.lastElementChild, div5);
assert.equal(divparent.firstElementChild, div1);
assert.equal(divparent.firstElementChild.nextElementSibling, div2);
assert.equal(divparent.lastElementChild, div3);
assert.equal(div4.firstElementChild, div5);
assert.equal(div4.lastElementChild, div5);
tearDown();
});
test('Test InsertElementCommand', function () {
expect(20);
QUnit.test('Test InsertElementCommand', function (assert) {
assert.expect(20);
setUp();
let insert = new svgedit.history.InsertElementCommand(div3);
ok(insert.unapply);
ok(insert.apply);
equals(typeof insert.unapply, typeof function () {});
equals(typeof insert.apply, typeof function () {});
let insert = new history.InsertElementCommand(div3);
assert.ok(insert.unapply);
assert.ok(insert.apply);
assert.equal(typeof insert.unapply, typeof function () {});
assert.equal(typeof insert.apply, typeof function () {});
insert.unapply();
equals(divparent.childElementCount, 2);
equals(divparent.firstElementChild, div1);
equals(div1.nextElementSibling, div2);
equals(divparent.lastElementChild, div2);
assert.equal(divparent.childElementCount, 2);
assert.equal(divparent.firstElementChild, div1);
assert.equal(div1.nextElementSibling, div2);
assert.equal(divparent.lastElementChild, div2);
insert.apply();
equals(divparent.childElementCount, 3);
equals(divparent.firstElementChild, div1);
equals(div1.nextElementSibling, div2);
equals(div2.nextElementSibling, div3);
assert.equal(divparent.childElementCount, 3);
assert.equal(divparent.firstElementChild, div1);
assert.equal(div1.nextElementSibling, div2);
assert.equal(div2.nextElementSibling, div3);
insert = new svgedit.history.InsertElementCommand(div2);
insert = new history.InsertElementCommand(div2);
insert.unapply();
equals(divparent.childElementCount, 2);
equals(divparent.firstElementChild, div1);
equals(div1.nextElementSibling, div3);
equals(divparent.lastElementChild, div3);
assert.equal(divparent.childElementCount, 2);
assert.equal(divparent.firstElementChild, div1);
assert.equal(div1.nextElementSibling, div3);
assert.equal(divparent.lastElementChild, div3);
insert.apply();
equals(divparent.childElementCount, 3);
equals(divparent.firstElementChild, div1);
equals(div1.nextElementSibling, div2);
equals(div2.nextElementSibling, div3);
assert.equal(divparent.childElementCount, 3);
assert.equal(divparent.firstElementChild, div1);
assert.equal(div1.nextElementSibling, div2);
assert.equal(div2.nextElementSibling, div3);
tearDown();
});
test('Test RemoveElementCommand', function () {
expect(22);
QUnit.test('Test RemoveElementCommand', function (assert) {
assert.expect(22);
setUp();
const div6 = document.createElement('div');
div6.id = 'div6';
let remove = new svgedit.history.RemoveElementCommand(div6, null, divparent);
ok(remove.unapply);
ok(remove.apply);
equals(typeof remove.unapply, typeof function () {});
equals(typeof remove.apply, typeof function () {});
let remove = new history.RemoveElementCommand(div6, null, divparent);
assert.ok(remove.unapply);
assert.ok(remove.apply);
assert.equal(typeof remove.unapply, typeof function () {});
assert.equal(typeof remove.apply, typeof function () {});
remove.unapply();
equals(divparent.childElementCount, 4);
equals(divparent.firstElementChild, div1);
equals(div1.nextElementSibling, div2);
equals(div2.nextElementSibling, div3);
equals(div3.nextElementSibling, div6);
assert.equal(divparent.childElementCount, 4);
assert.equal(divparent.firstElementChild, div1);
assert.equal(div1.nextElementSibling, div2);
assert.equal(div2.nextElementSibling, div3);
assert.equal(div3.nextElementSibling, div6);
remove.apply();
equals(divparent.childElementCount, 3);
equals(divparent.firstElementChild, div1);
equals(div1.nextElementSibling, div2);
equals(div2.nextElementSibling, div3);
assert.equal(divparent.childElementCount, 3);
assert.equal(divparent.firstElementChild, div1);
assert.equal(div1.nextElementSibling, div2);
assert.equal(div2.nextElementSibling, div3);
remove = new svgedit.history.RemoveElementCommand(div6, div2, divparent);
remove = new history.RemoveElementCommand(div6, div2, divparent);
remove.unapply();
equals(divparent.childElementCount, 4);
equals(divparent.firstElementChild, div1);
equals(div1.nextElementSibling, div6);
equals(div6.nextElementSibling, div2);
equals(div2.nextElementSibling, div3);
assert.equal(divparent.childElementCount, 4);
assert.equal(divparent.firstElementChild, div1);
assert.equal(div1.nextElementSibling, div6);
assert.equal(div6.nextElementSibling, div2);
assert.equal(div2.nextElementSibling, div3);
remove.apply();
equals(divparent.childElementCount, 3);
equals(divparent.firstElementChild, div1);
equals(div1.nextElementSibling, div2);
equals(div2.nextElementSibling, div3);
assert.equal(divparent.childElementCount, 3);
assert.equal(divparent.firstElementChild, div1);
assert.equal(div1.nextElementSibling, div2);
assert.equal(div2.nextElementSibling, div3);
tearDown();
});
test('Test ChangeElementCommand', function () {
expect(26);
QUnit.test('Test ChangeElementCommand', function (assert) {
assert.expect(26);
setUp();
div1.setAttribute('title', 'new title');
let change = new svgedit.history.ChangeElementCommand(div1,
{'title': 'old title', 'class': 'foo'});
ok(change.unapply);
ok(change.apply);
equals(typeof change.unapply, typeof function () {});
equals(typeof change.apply, typeof function () {});
let change = new history.ChangeElementCommand(div1,
{title: 'old title', class: 'foo'});
assert.ok(change.unapply);
assert.ok(change.apply);
assert.equal(typeof change.unapply, typeof function () {});
assert.equal(typeof change.apply, typeof function () {});
change.unapply();
equals(div1.getAttribute('title'), 'old title');
equals(div1.getAttribute('class'), 'foo');
assert.equal(div1.getAttribute('title'), 'old title');
assert.equal(div1.getAttribute('class'), 'foo');
change.apply();
equals(div1.getAttribute('title'), 'new title');
ok(!div1.getAttribute('class'));
assert.equal(div1.getAttribute('title'), 'new title');
assert.ok(!div1.getAttribute('class'));
div1.textContent = 'inner text';
change = new svgedit.history.ChangeElementCommand(div1,
change = new history.ChangeElementCommand(div1,
{'#text': null});
change.unapply();
ok(!div1.textContent);
assert.ok(!div1.textContent);
change.apply();
equals(div1.textContent, 'inner text');
assert.equal(div1.textContent, 'inner text');
div1.textContent = '';
change = new svgedit.history.ChangeElementCommand(div1,
change = new history.ChangeElementCommand(div1,
{'#text': 'old text'});
change.unapply();
equals(div1.textContent, 'old text');
assert.equal(div1.textContent, 'old text');
change.apply();
ok(!div1.textContent);
assert.ok(!div1.textContent);
// TODO(codedread): Refactor this #href stuff in history.js and svgcanvas.js
const rect = document.createElementNS(NS.SVG, 'rect');
let justCalled = null;
let gethrefvalue = null;
let sethrefvalue = null;
svgedit.utilities.getHref = function (elem) {
equals(elem, rect);
justCalled = 'getHref';
return gethrefvalue;
};
svgedit.utilities.setHref = function (elem, val) {
equals(elem, rect);
equals(val, sethrefvalue);
justCalled = 'setHref';
};
utilities.mock({
getHref (elem) {
assert.equal(elem, rect);
justCalled = 'getHref';
return gethrefvalue;
},
setHref (elem, val) {
assert.equal(elem, rect);
assert.equal(val, sethrefvalue);
justCalled = 'setHref';
},
getRotationAngle (elem) { return 0; }
});
gethrefvalue = '#newhref';
change = new svgedit.history.ChangeElementCommand(rect,
change = new history.ChangeElementCommand(rect,
{'#href': '#oldhref'});
equals(justCalled, 'getHref');
assert.equal(justCalled, 'getHref');
justCalled = null;
sethrefvalue = '#oldhref';
change.unapply();
equals(justCalled, 'setHref');
assert.equal(justCalled, 'setHref');
justCalled = null;
sethrefvalue = '#newhref';
change.apply();
equals(justCalled, 'setHref');
assert.equal(justCalled, 'setHref');
const line = document.createElementNS(NS.SVG, 'line');
line.setAttributeNS(null, 'class', 'newClass');
change = new svgedit.history.ChangeElementCommand(line, {class: 'oldClass'});
change = new history.ChangeElementCommand(line, {class: 'oldClass'});
ok(change.unapply);
ok(change.apply);
equals(typeof change.unapply, typeof function () {});
equals(typeof change.apply, typeof function () {});
assert.ok(change.unapply);
assert.ok(change.apply);
assert.equal(typeof change.unapply, typeof function () {});
assert.equal(typeof change.apply, typeof function () {});
change.unapply();
equals(line.getAttributeNS(null, 'class'), 'oldClass');
assert.equal(line.getAttributeNS(null, 'class'), 'oldClass');
change.apply();
equals(line.getAttributeNS(null, 'class'), 'newClass');
assert.equal(line.getAttributeNS(null, 'class'), 'newClass');
tearDown();
});
test('Test BatchCommand', function () {
expect(13);
QUnit.test('Test BatchCommand', function (assert) {
assert.expect(13);
setUp();
let concatResult = '';
MockCommand.prototype.apply = function () { concatResult += this.text_; };
const batch = new svgedit.history.BatchCommand();
ok(batch.unapply);
ok(batch.apply);
ok(batch.addSubCommand);
ok(batch.isEmpty);
equals(typeof batch.unapply, typeof function () {});
equals(typeof batch.apply, typeof function () {});
equals(typeof batch.addSubCommand, typeof function () {});
equals(typeof batch.isEmpty, typeof function () {});
const batch = new history.BatchCommand();
assert.ok(batch.unapply);
assert.ok(batch.apply);
assert.ok(batch.addSubCommand);
assert.ok(batch.isEmpty);
assert.equal(typeof batch.unapply, typeof function () {});
assert.equal(typeof batch.apply, typeof function () {});
assert.equal(typeof batch.addSubCommand, typeof function () {});
assert.equal(typeof batch.isEmpty, typeof function () {});
ok(batch.isEmpty());
assert.ok(batch.isEmpty());
batch.addSubCommand(new MockCommand('a'));
ok(!batch.isEmpty());
assert.ok(!batch.isEmpty());
batch.addSubCommand(new MockCommand('b'));
batch.addSubCommand(new MockCommand('c'));
ok(!concatResult);
assert.ok(!concatResult);
batch.apply();
equals(concatResult, 'abc');
assert.equal(concatResult, 'abc');
MockCommand.prototype.apply = function () {};
MockCommand.prototype.unapply = function () { concatResult += this.text_; };
concatResult = '';
batch.unapply();
equals(concatResult, 'cba');
assert.equal(concatResult, 'cba');
MockCommand.prototype.unapply = function () {};

6
test/jquery-svg_test.html
View File

@@ -4,10 +4,10 @@
<meta charset="utf-8" />
<title>Unit Tests for jquery-svg.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="jquery-svg_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="jquery-svg_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for jquery-svg</h1>

4
test/jquery-svg_test.js vendored
View File

@@ -1,8 +1,8 @@
/* eslint-env qunit */
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});

8
test/math_test.html
View File

@@ -4,12 +4,10 @@
<meta charset="utf-8" />
<title>Unit Tests for math.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/svgedit.js"></script>
<script src="../editor/math.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="math_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="math_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for math.js</h1>

111
test/math_test.js
View File

@@ -1,76 +1,77 @@
/* eslint-env qunit */
/* globals svgedit, equals */
import {NS} from '../editor/svgedit.js';
import * as math from '../editor/math.js';
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
const svg = document.createElementNS(svgedit.NS.SVG, 'svg');
module('svgedit.math');
test('Test svgedit.math package', function () {
expect(7);
ok(svgedit.math);
ok(svgedit.math.transformPoint);
ok(svgedit.math.isIdentity);
ok(svgedit.math.matrixMultiply);
equals(typeof svgedit.math.transformPoint, typeof function () {});
equals(typeof svgedit.math.isIdentity, typeof function () {});
equals(typeof svgedit.math.matrixMultiply, typeof function () {});
});
test('Test svgedit.math.transformPoint() function', function () {
expect(6);
const {transformPoint} = svgedit.math;
const svg = document.createElementNS(NS.SVG, 'svg');
QUnit.module('svgedit.math');
QUnit.test('Test svgedit.math package', function (assert) {
assert.expect(7);
assert.ok(math);
assert.ok(math.transformPoint);
assert.ok(math.isIdentity);
assert.ok(math.matrixMultiply);
assert.equal(typeof math.transformPoint, typeof function () {});
assert.equal(typeof math.isIdentity, typeof function () {});
assert.equal(typeof math.matrixMultiply, typeof function () {});
});
QUnit.test('Test svgedit.math.transformPoint() function', function (assert) {
assert.expect(6);
const {transformPoint} = math;
const m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 0; m.f = 0;
let pt = transformPoint(100, 200, m);
equals(pt.x, 100);
equals(pt.y, 200);
assert.equal(pt.x, 100);
assert.equal(pt.y, 200);
m.e = 300; m.f = 400;
pt = transformPoint(100, 200, m);
equals(pt.x, 400);
equals(pt.y, 600);
assert.equal(pt.x, 400);
assert.equal(pt.y, 600);
m.a = 0.5; m.b = 0.75;
m.c = 1.25; m.d = 2;
pt = transformPoint(100, 200, m);
equals(pt.x, 100 * m.a + 200 * m.c + m.e);
equals(pt.y, 100 * m.b + 200 * m.d + m.f);
assert.equal(pt.x, 100 * m.a + 200 * m.c + m.e);
assert.equal(pt.y, 100 * m.b + 200 * m.d + m.f);
});
test('Test svgedit.math.isIdentity() function', function () {
expect(2);
QUnit.test('Test svgedit.math.isIdentity() function', function (assert) {
assert.expect(2);
ok(svgedit.math.isIdentity(svg.createSVGMatrix()));
assert.ok(math.isIdentity(svg.createSVGMatrix()));
const m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 0; m.f = 0;
ok(svgedit.math.isIdentity(m));
assert.ok(math.isIdentity(m));
});
test('Test svgedit.math.matrixMultiply() function', function () {
expect(5);
const mult = svgedit.math.matrixMultiply;
const {isIdentity} = svgedit.math;
QUnit.test('Test svgedit.math.matrixMultiply() function', function (assert) {
assert.expect(5);
const mult = math.matrixMultiply;
const {isIdentity} = math;
// translate there and back
const tr1 = svg.createSVGMatrix().translate(100, 50),
tr2 = svg.createSVGMatrix().translate(-90, 0),
tr3 = svg.createSVGMatrix().translate(-10, -50);
let I = mult(tr1, tr2, tr3);
ok(isIdentity(I), 'Expected identity matrix when translating there and back');
assert.ok(isIdentity(I), 'Expected identity matrix when translating there and back');
// rotate there and back
// TODO: currently Mozilla fails this when rotating back at -50 and then -40 degrees
@@ -79,25 +80,25 @@ test('Test svgedit.math.matrixMultiply() function', function () {
rotBack = svg.createSVGMatrix().rotate(-90), // TODO: set this to -50
rotBackMore = svg.createSVGMatrix().rotate(0); // TODO: set this to -40
I = mult(rotThere, rotBack, rotBackMore);
ok(isIdentity(I), 'Expected identity matrix when rotating there and back');
assert.ok(isIdentity(I), 'Expected identity matrix when rotating there and back');
// scale up and down
const scaleUp = svg.createSVGMatrix().scale(4),
scaleDown = svg.createSVGMatrix().scaleNonUniform(0.25, 1),
scaleDownMore = svg.createSVGMatrix().scaleNonUniform(1, 0.25);
I = mult(scaleUp, scaleDown, scaleDownMore);
ok(isIdentity(I), 'Expected identity matrix when scaling up and down');
assert.ok(isIdentity(I), 'Expected identity matrix when scaling up and down');
// test multiplication with its inverse
I = mult(rotThere, rotThere.inverse());
ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
assert.ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
I = mult(rotThere.inverse(), rotThere);
ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
assert.ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
});
test('Test svgedit.math.transformBox() function', function () {
expect(12);
const {transformBox} = svgedit.math;
QUnit.test('Test svgedit.math.transformBox() function', function (assert) {
assert.expect(12);
const {transformBox} = math;
const m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
@@ -105,16 +106,16 @@ test('Test svgedit.math.transformBox() function', function () {
m.e = 0; m.f = 0;
const r = transformBox(10, 10, 200, 300, m);
equals(r.tl.x, 10);
equals(r.tl.y, 10);
equals(r.tr.x, 210);
equals(r.tr.y, 10);
equals(r.bl.x, 10);
equals(r.bl.y, 310);
equals(r.br.x, 210);
equals(r.br.y, 310);
equals(r.aabox.x, 10);
equals(r.aabox.y, 10);
equals(r.aabox.width, 200);
equals(r.aabox.height, 300);
assert.equal(r.tl.x, 10);
assert.equal(r.tl.y, 10);
assert.equal(r.tr.x, 210);
assert.equal(r.tr.y, 10);
assert.equal(r.bl.x, 10);
assert.equal(r.bl.y, 310);
assert.equal(r.br.x, 210);
assert.equal(r.br.y, 310);
assert.equal(r.aabox.x, 10);
assert.equal(r.aabox.y, 10);
assert.equal(r.aabox.width, 200);
assert.equal(r.aabox.height, 300);
});

13
test/path_test.html
View File

@@ -4,21 +4,16 @@
<meta charset="utf-8" />
<title>Unit Tests for path.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/svgedit.js"></script>
<script src="../editor/pathseg.js"></script>
<script src="../editor/browser.js"></script>
<script src="../editor/svgutils.js"></script>
<script src="../editor/path.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="path_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="path_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for path.js</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="anchor" style="visibility:hidden"></div>
<div id="anchor" style="visibility: hidden;"></div>
</body>
</html>

233
test/path_test.js
View File

@@ -1,140 +1,159 @@
/* eslint-env qunit */
/* globals svgedit, equals */
// import './pathseg.js';
import '../editor/pathseg.js';
import {NS} from '../editor/svgedit.js';
import * as utilities from '../editor/svgutils.js';
import * as pathModule from '../editor/path.js';
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
test('Test svgedit.path.replacePathSeg', function () {
expect(6);
const path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
svgedit.path.init();
svgedit.path.Path(path);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
equals(path.pathSegList.getItem(1).x, 10);
equals(path.pathSegList.getItem(1).y, 11);
svgedit.path.replacePathSeg(SVGPathSeg.PATHSEG_LINETO_REL, 1, [30, 31], path);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l');
equals(path.pathSegList.getItem(1).x, 30);
equals(path.pathSegList.getItem(1).y, 31);
});
test('Test svgedit.path.Segment.setType simple', function () {
expect(9);
const path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
svgedit.path.init();
svgedit.path.Path(path);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
equals(path.pathSegList.getItem(1).x, 10);
equals(path.pathSegList.getItem(1).y, 11);
const segment = new svgedit.path.Segment(1, path.pathSegList.getItem(1));
segment.setType(SVGPathSeg.PATHSEG_LINETO_REL, [30, 31]);
equals(segment.item.pathSegTypeAsLetter, 'l');
equals(segment.item.x, 30);
equals(segment.item.y, 31);
// Also verify that the actual path changed.
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l');
equals(path.pathSegList.getItem(1).x, 30);
equals(path.pathSegList.getItem(1).y, 31);
});
test('Test svgedit.path.Segment.setType with control points', function () {
expect(14);
// Setup the dom for a mock control group.
const svg = document.createElementNS(svgedit.NS.SVG, 'svg');
const path = document.createElementNS(svgedit.NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z');
svg.appendChild(path);
const selectorParentGroup = document.createElementNS(svgedit.NS.SVG, 'g');
function getMockContext (svg) {
svg = svg || document.createElementNS(NS.SVG, 'svg');
const selectorParentGroup = document.createElementNS(NS.SVG, 'g');
selectorParentGroup.setAttribute('id', 'selectorParentGroup');
svg.appendChild(selectorParentGroup);
const mockContext = {
return {
getDOMDocument () { return svg; },
getDOMContainer () { return svg; },
getSVGRoot () { return svg; },
getCurrentZoom () { return 1; }
};
svgedit.path.init(mockContext);
svgedit.utilities.init(mockContext);
const segment = new svgedit.path.Segment(1, path.pathSegList.getItem(1));
segment.path = new svgedit.path.Path(path);
}
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
equals(path.pathSegList.getItem(1).x1, 11);
equals(path.pathSegList.getItem(1).y1, 12);
equals(path.pathSegList.getItem(1).x2, 13);
equals(path.pathSegList.getItem(1).y2, 14);
equals(path.pathSegList.getItem(1).x, 15);
equals(path.pathSegList.getItem(1).y, 16);
QUnit.test('Test svgedit.path.replacePathSeg', function (assert) {
assert.expect(6);
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
const mockContext = getMockContext();
pathModule.init(mockContext);
utilities.init(mockContext);
new pathModule.Path(path); // eslint-disable-line no-new
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
assert.equal(path.pathSegList.getItem(1).x, 10);
assert.equal(path.pathSegList.getItem(1).y, 11);
pathModule.replacePathSeg(SVGPathSeg.PATHSEG_LINETO_REL, 1, [30, 31], path);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l');
assert.equal(path.pathSegList.getItem(1).x, 30);
assert.equal(path.pathSegList.getItem(1).y, 31);
});
QUnit.test('Test svgedit.path.Segment.setType simple', function (assert) {
assert.expect(9);
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
const mockContext = getMockContext();
pathModule.init(mockContext);
utilities.init(mockContext);
new pathModule.Path(path); // eslint-disable-line no-new
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
assert.equal(path.pathSegList.getItem(1).x, 10);
assert.equal(path.pathSegList.getItem(1).y, 11);
const segment = new pathModule.Segment(1, path.pathSegList.getItem(1));
segment.setType(SVGPathSeg.PATHSEG_LINETO_REL, [30, 31]);
assert.equal(segment.item.pathSegTypeAsLetter, 'l');
assert.equal(segment.item.x, 30);
assert.equal(segment.item.y, 31);
// Also verify that the actual path changed.
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l');
assert.equal(path.pathSegList.getItem(1).x, 30);
assert.equal(path.pathSegList.getItem(1).y, 31);
});
QUnit.test('Test svgedit.path.Segment.setType with control points', function (assert) {
assert.expect(14);
// Setup the dom for a mock control group.
const svg = document.createElementNS(NS.SVG, 'svg');
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z');
svg.appendChild(path);
const mockContext = getMockContext(svg);
pathModule.init(mockContext);
utilities.init(mockContext);
const segment = new pathModule.Segment(1, path.pathSegList.getItem(1));
segment.path = new pathModule.Path(path);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
assert.equal(path.pathSegList.getItem(1).x1, 11);
assert.equal(path.pathSegList.getItem(1).y1, 12);
assert.equal(path.pathSegList.getItem(1).x2, 13);
assert.equal(path.pathSegList.getItem(1).y2, 14);
assert.equal(path.pathSegList.getItem(1).x, 15);
assert.equal(path.pathSegList.getItem(1).y, 16);
segment.setType(SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, [30, 31, 32, 33, 34, 35]);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'c');
equals(path.pathSegList.getItem(1).x1, 32);
equals(path.pathSegList.getItem(1).y1, 33);
equals(path.pathSegList.getItem(1).x2, 34);
equals(path.pathSegList.getItem(1).y2, 35);
equals(path.pathSegList.getItem(1).x, 30);
equals(path.pathSegList.getItem(1).y, 31);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'c');
assert.equal(path.pathSegList.getItem(1).x1, 32);
assert.equal(path.pathSegList.getItem(1).y1, 33);
assert.equal(path.pathSegList.getItem(1).x2, 34);
assert.equal(path.pathSegList.getItem(1).y2, 35);
assert.equal(path.pathSegList.getItem(1).x, 30);
assert.equal(path.pathSegList.getItem(1).y, 31);
});
test('Test svgedit.path.Segment.move', function () {
expect(6);
QUnit.test('Test svgedit.path.Segment.move', function (assert) {
assert.expect(6);
const path = document.createElementNS(svgedit.NS.SVG, 'path');
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 L10,11 L20,21Z');
svgedit.path.init();
svgedit.path.Path(path);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
equals(path.pathSegList.getItem(1).x, 10);
equals(path.pathSegList.getItem(1).y, 11);
const mockContext = getMockContext();
pathModule.init(mockContext);
utilities.init(mockContext);
new pathModule.Path(path); // eslint-disable-line no-new
const segment = new svgedit.path.Segment(1, path.pathSegList.getItem(1));
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
assert.equal(path.pathSegList.getItem(1).x, 10);
assert.equal(path.pathSegList.getItem(1).y, 11);
const segment = new pathModule.Segment(1, path.pathSegList.getItem(1));
segment.move(-3, 4);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
equals(path.pathSegList.getItem(1).x, 7);
equals(path.pathSegList.getItem(1).y, 15);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
assert.equal(path.pathSegList.getItem(1).x, 7);
assert.equal(path.pathSegList.getItem(1).y, 15);
});
test('Test svgedit.path.Segment.moveCtrl', function () {
expect(14);
QUnit.test('Test svgedit.path.Segment.moveCtrl', function (assert) {
assert.expect(14);
const path = document.createElementNS(svgedit.NS.SVG, 'path');
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z');
svgedit.path.init();
svgedit.path.Path(path);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
equals(path.pathSegList.getItem(1).x1, 11);
equals(path.pathSegList.getItem(1).y1, 12);
equals(path.pathSegList.getItem(1).x2, 13);
equals(path.pathSegList.getItem(1).y2, 14);
equals(path.pathSegList.getItem(1).x, 15);
equals(path.pathSegList.getItem(1).y, 16);
const mockContext = getMockContext();
pathModule.init(mockContext);
utilities.init(mockContext);
new pathModule.Path(path); // eslint-disable-line no-new
const segment = new svgedit.path.Segment(1, path.pathSegList.getItem(1));
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
assert.equal(path.pathSegList.getItem(1).x1, 11);
assert.equal(path.pathSegList.getItem(1).y1, 12);
assert.equal(path.pathSegList.getItem(1).x2, 13);
assert.equal(path.pathSegList.getItem(1).y2, 14);
assert.equal(path.pathSegList.getItem(1).x, 15);
assert.equal(path.pathSegList.getItem(1).y, 16);
const segment = new pathModule.Segment(1, path.pathSegList.getItem(1));
segment.moveCtrl(1, 100, -200);
equals(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
equals(path.pathSegList.getItem(1).x1, 111);
equals(path.pathSegList.getItem(1).y1, -188);
equals(path.pathSegList.getItem(1).x2, 13);
equals(path.pathSegList.getItem(1).y2, 14);
equals(path.pathSegList.getItem(1).x, 15);
equals(path.pathSegList.getItem(1).y, 16);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
assert.equal(path.pathSegList.getItem(1).x1, 111);
assert.equal(path.pathSegList.getItem(1).y1, -188);
assert.equal(path.pathSegList.getItem(1).x2, 13);
assert.equal(path.pathSegList.getItem(1).y2, 14);
assert.equal(path.pathSegList.getItem(1).x, 15);
assert.equal(path.pathSegList.getItem(1).y, 16);
});

18
test/qunit/qunit-assert-almostEquals.js Normal file
View File

@@ -0,0 +1,18 @@
const NEAR_ZERO = 5e-6; // 0.000005, Firefox fails at higher levels of precision.
function almostEquals (actual, expected, message) {
message = message || (actual + ' did not equal ' + expected);
this.pushResult({
result: Math.abs(actual - expected) < NEAR_ZERO,
actual,
expected,
message
});
}
export default function extend (QUnit) {
QUnit.extend(QUnit.assert, {
almostEquals
});
return QUnit;
}

69
test/qunit/qunit-assert-close.js
View File

@@ -9,14 +9,13 @@
* @param Number maxDifference (the maximum inclusive difference allowed between the actual and expected numbers)
* @param String message (optional)
*/
function close(actual, expected, maxDifference, message) {
var actualDiff = (actual === expected) ? 0 : Math.abs(actual - expected),
result = actualDiff <= maxDifference;
message = message || (actual + " should be within " + maxDifference + " (inclusive) of " + expected + (result ? "" : ". Actual: " + actualDiff));
QUnit.push(result, actual, expected, message);
function close (actual, expected, maxDifference, message) {
const actualDiff = (actual === expected) ? 0 : Math.abs(actual - expected),
result = actualDiff <= maxDifference;
message = message || (actual + ' should be within ' + maxDifference + ' (inclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff));
this.pushResult({result, actual, expected, message});
}
/**
* Checks that the first two arguments are equal, or are numbers close enough to be considered equal
* based on a specified maximum allowable difference percentage.
@@ -28,26 +27,23 @@ function close(actual, expected, maxDifference, message) {
* @param Number maxPercentDifference (the maximum inclusive difference percentage allowed between the actual and expected numbers)
* @param String message (optional)
*/
close.percent = function closePercent(actual, expected, maxPercentDifference, message) {
var actualDiff, result;
function closePercent (actual, expected, maxPercentDifference, message) {
let actualDiff, result;
if (actual === expected) {
actualDiff = 0;
result = actualDiff <= maxPercentDifference;
}
else if (actual !== 0 && expected !== 0 && expected !== Infinity && expected !== -Infinity) {
} else if (actual !== 0 && expected !== 0 && expected !== Infinity && expected !== -Infinity) {
actualDiff = Math.abs(100 * (actual - expected) / expected);
result = actualDiff <= maxPercentDifference;
}
else {
} else {
// Dividing by zero (0)! Should return `false` unless the max percentage was `Infinity`
actualDiff = Infinity;
result = maxPercentDifference === Infinity;
}
message = message || (actual + " should be within " + maxPercentDifference + "% (inclusive) of " + expected + (result ? "" : ". Actual: " + actualDiff + "%"));
QUnit.push(result, actual, expected, message);
};
message = message || (actual + ' should be within ' + maxPercentDifference + '% (inclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff + '%'));
this.pushResult(result, actual, expected, message);
}
/**
* Checks that the first two arguments are numbers with differences greater than the specified
@@ -60,14 +56,13 @@ close.percent = function closePercent(actual, expected, maxPercentDifference, me
* @param Number minDifference (the minimum exclusive difference allowed between the actual and expected numbers)
* @param String message (optional)
*/
function notClose(actual, expected, minDifference, message) {
var actualDiff = Math.abs(actual - expected),
result = actualDiff > minDifference;
message = message || (actual + " should not be within " + minDifference + " (exclusive) of " + expected + (result ? "" : ". Actual: " + actualDiff));
QUnit.push(result, actual, expected, message);
function notClose (actual, expected, minDifference, message) {
const actualDiff = Math.abs(actual - expected),
result = actualDiff > minDifference;
message = message || (actual + ' should not be within ' + minDifference + ' (exclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff));
this.pushResult(result, actual, expected, message);
}
/**
* Checks that the first two arguments are numbers with differences greater than the specified
* minimum difference percentage.
@@ -79,28 +74,30 @@ function notClose(actual, expected, minDifference, message) {
* @param Number minPercentDifference (the minimum exclusive difference percentage allowed between the actual and expected numbers)
* @param String message (optional)
*/
notClose.percent = function notClosePercent(actual, expected, minPercentDifference, message) {
var actualDiff, result;
function notClosePercent (actual, expected, minPercentDifference, message) {
let actualDiff, result;
if (actual === expected) {
actualDiff = 0;
result = actualDiff > minPercentDifference;
}
else if (actual !== 0 && expected !== 0 && expected !== Infinity && expected !== -Infinity) {
} else if (actual !== 0 && expected !== 0 && expected !== Infinity && expected !== -Infinity) {
actualDiff = Math.abs(100 * (actual - expected) / expected);
result = actualDiff > minPercentDifference;
}
else {
} else {
// Dividing by zero (0)! Should only return `true` if the min percentage was `Infinity`
actualDiff = Infinity;
result = minPercentDifference !== Infinity;
}
message = message || (actual + " should not be within " + minPercentDifference + "% (exclusive) of " + expected + (result ? "" : ". Actual: " + actualDiff + "%"));
message = message || (actual + ' should not be within ' + minPercentDifference + '% (exclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff + '%'));
QUnit.push(result, actual, expected, message);
};
this.pushResult({result, actual, expected, message});
}
//QUnit.extend(QUnit.assert, {
// close,
// notClose
//});
export default function extend (QUnit) {
QUnit.extend(QUnit.assert, {
close,
closePercent,
notClose,
notClosePercent
});
return QUnit;
}

21
test/qunit/qunit-assert-expectOutOfBoundsException.js Normal file
View File

@@ -0,0 +1,21 @@
function expectOutOfBoundsException (obj, fn, arg1) {
const expected = true;
const message = 'Caught an INDEX_SIZE_ERR exception';
let result = false;
try {
obj[fn](arg1);
} catch (e) {
if (e.code === 1) {
result = true;
}
}
const actual = result;
console.log('aaa', result, actual, expected);
this.pushResult({result, actual, expected, message});
}
export default function extend (QUnit) {
QUnit.extend(QUnit.assert, {
expectOutOfBoundsException
});
return QUnit;
}

197
test/qunit/qunit.css
View File

@@ -1,197 +0,0 @@
/** Font Family and Sizes */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
}
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
#qunit-tests { font-size: smaller; }
/** Resets */
#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
margin: 0;
padding: 0;
}
/** Header */
#qunit-header {
padding: 0.5em 0 0.5em 1em;
color: #8699a4;
background-color: #0d3349;
font-size: 1.5em;
line-height: 1em;
font-weight: normal;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
}
#qunit-header a {
text-decoration: none;
color: #c2ccd1;
}
#qunit-header a:hover,
#qunit-header a:focus {
color: #fff;
}
#qunit-banner {
height: 5px;
}
#qunit-testrunner-toolbar {
padding: 0.5em 0 0.5em 2em;
color: #5E740B;
background-color: #eee;
}
#qunit-userAgent {
padding: 0.5em 0 0.5em 2.5em;
background-color: #2b81af;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
/** Tests: Pass/Fail */
#qunit-tests {
list-style-position: inside;
}
#qunit-tests li {
padding: 0.4em 0.5em 0.4em 2.5em;
border-bottom: 1px solid #fff;
list-style-position: inside;
}
#qunit-tests li strong {
cursor: pointer;
}
#qunit-tests ol {
margin-top: 0.5em;
padding: 0.5em;
background-color: #fff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: inset 0px 2px 13px #999;
-moz-box-shadow: inset 0px 2px 13px #999;
-webkit-box-shadow: inset 0px 2px 13px #999;
}
#qunit-tests table {
border-collapse: collapse;
margin-top: .2em;
}
#qunit-tests th {
text-align: right;
vertical-align: top;
padding: 0 .5em 0 0;
}
#qunit-tests td {
vertical-align: top;
}
#qunit-tests pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
#qunit-tests del {
background-color: #e0f2be;
color: #374e0c;
text-decoration: none;
}
#qunit-tests ins {
background-color: #ffcaca;
color: #500;
text-decoration: none;
}
/*** Test Counts */
#qunit-tests b.counts { color: black; }
#qunit-tests b.passed { color: #5E740B; }
#qunit-tests b.failed { color: #710909; }
#qunit-tests li li {
margin: 0.5em;
padding: 0.4em 0.5em 0.4em 0.5em;
background-color: #fff;
border-bottom: none;
list-style-position: inside;
}
/*** Passing Styles */
#qunit-tests li li.pass {
color: #5E740B;
background-color: #fff;
border-left: 26px solid #C6E746;
}
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
#qunit-tests .pass .test-name { color: #366097; }
#qunit-tests .pass .test-actual,
#qunit-tests .pass .test-expected { color: #999999; }
#qunit-banner.qunit-pass { background-color: #C6E746; }
/*** Failing Styles */
#qunit-tests li li.fail {
color: #710909;
background-color: #fff;
border-left: 26px solid #EE5757;
}
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
#qunit-tests .fail .test-name,
#qunit-tests .fail .module-name { color: #000000; }
#qunit-tests .fail .test-actual { color: #EE5757; }
#qunit-tests .fail .test-expected { color: green; }
#qunit-banner.qunit-fail { background-color: #EE5757; }
/** Footer */
#qunit-testresult {
padding: 0.5em 0.5em 0.5em 2.5em;
color: #2b81af;
background-color: #D2E0E6;
border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
}
/** Fixture */
#qunit-fixture {
position: absolute;
top: -10000px;
left: -10000px;
}

1415
test/qunit/qunit.js
View File

File diff suppressed because it is too large Load Diff

19
test/recalculate_test.html
View File

@@ -4,27 +4,16 @@
<meta charset="utf-8" />
<title>Unit Tests for recalculate.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/jquery-svg.js"></script>
<script src="../editor/svgedit.js"></script>
<script src="../editor/pathseg.js"></script>
<script src="../editor/browser.js"></script>
<script src="../editor/math.js"></script>
<script src="../editor/history.js"></script>
<script src="../editor/units.js"></script>
<script src="../editor/svgtransformlist.js"></script>
<script src="../editor/svgutils.js"></script>
<script src="../editor/coords.js"></script>
<script src="../editor/recalculate.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="recalculate_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="recalculate_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for svgedit.recalculate</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="root" style="visibility:hidden"></div>
<div id="root" style="visibility: hidden;"></div>
</body>
</html>

66
test/recalculate_test.js
View File

@@ -1,28 +1,32 @@
/* eslint-env qunit */
/* globals svgedit */
import {NS} from '../editor/svgedit.js';
import * as utilities from '../editor/svgutils.js';
import * as coords from '../editor/coords.js';
import * as recalculate from '../editor/recalculate.js';
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});
const root = document.getElementById('root');
const svgroot = document.createElementNS(svgedit.NS.SVG, 'svg');
const svgroot = document.createElementNS(NS.SVG, 'svg');
svgroot.id = 'svgroot';
root.appendChild(svgroot);
const svg = document.createElementNS(svgedit.NS.SVG, 'svg');
const svg = document.createElementNS(NS.SVG, 'svg');
svgroot.appendChild(svg);
let elemId = 1;
function setUp () {
svgedit.utilities.init({
utilities.init({
getSVGRoot () { return svg; },
getDOMDocument () { return null; },
getDOMContainer () { return null; }
});
svgedit.coords.init({
coords.init({
getGridSnapping () { return false; },
getDrawing () {
return {
@@ -30,7 +34,7 @@ function setUp () {
};
}
});
svgedit.recalculate.init({
recalculate.init({
getSVGRoot () { return svg; },
getStartTransform () { return ''; },
setStartTransform () {}
@@ -41,7 +45,7 @@ let elem;
function setUpRect () {
setUp();
elem = document.createElementNS(svgedit.NS.SVG, 'rect');
elem = document.createElementNS(NS.SVG, 'rect');
elem.setAttribute('x', '200');
elem.setAttribute('y', '150');
elem.setAttribute('width', '250');
@@ -51,11 +55,11 @@ function setUpRect () {
function setUpTextWithTspan () {
setUp();
elem = document.createElementNS(svgedit.NS.SVG, 'text');
elem = document.createElementNS(NS.SVG, 'text');
elem.setAttribute('x', '200');
elem.setAttribute('y', '150');
const tspan = document.createElementNS(svgedit.NS.SVG, 'tspan');
const tspan = document.createElementNS(NS.SVG, 'tspan');
tspan.setAttribute('x', '200');
tspan.setAttribute('y', '150');
@@ -71,54 +75,54 @@ function tearDown () {
}
}
test('Test recalculateDimensions() on rect with identity matrix', function () {
expect(1);
QUnit.test('Test recalculateDimensions() on rect with identity matrix', function (assert) {
assert.expect(1);
setUpRect();
elem.setAttribute('transform', 'matrix(1,0,0,1,0,0)');
svgedit.recalculate.recalculateDimensions(elem);
recalculate.recalculateDimensions(elem);
// Ensure that the identity matrix is swallowed and the element has no
// transform on it.
equal(false, elem.hasAttribute('transform'));
assert.equal(elem.hasAttribute('transform'), false);
tearDown();
});
test('Test recalculateDimensions() on rect with simple translate', function () {
expect(5);
QUnit.test('Test recalculateDimensions() on rect with simple translate', function (assert) {
assert.expect(5);
setUpRect();
elem.setAttribute('transform', 'translate(100,50)');
svgedit.recalculate.recalculateDimensions(elem);
recalculate.recalculateDimensions(elem);
equal(false, elem.hasAttribute('transform'));
equal('300', elem.getAttribute('x'));
equal('200', elem.getAttribute('y'));
equal('250', elem.getAttribute('width'));
equal('120', elem.getAttribute('height'));
assert.equal(elem.hasAttribute('transform'), false);
assert.equal(elem.getAttribute('x'), '300');
assert.equal(elem.getAttribute('y'), '200');
assert.equal(elem.getAttribute('width'), '250');
assert.equal(elem.getAttribute('height'), '120');
tearDown();
});
test('Test recalculateDimensions() on text w/tspan with simple translate', function () {
expect(5);
QUnit.test('Test recalculateDimensions() on text w/tspan with simple translate', function (assert) {
assert.expect(5);
setUpTextWithTspan();
elem.setAttribute('transform', 'translate(100,50)');
svgedit.recalculate.recalculateDimensions(elem);
recalculate.recalculateDimensions(elem);
// Ensure that the identity matrix is swallowed and the element has no
// transform on it.
equal(false, elem.hasAttribute('transform'));
equal('300', elem.getAttribute('x'));
equal('200', elem.getAttribute('y'));
assert.equal(elem.hasAttribute('transform'), false);
assert.equal(elem.getAttribute('x'), '300');
assert.equal(elem.getAttribute('y'), '200');
const tspan = elem.firstElementChild;
equal('300', tspan.getAttribute('x'));
equal('200', tspan.getAttribute('y'));
assert.equal(tspan.getAttribute('x'), '300');
assert.equal(tspan.getAttribute('y'), '200');
tearDown();
});

13
test/sanitize_test.html
View File

@@ -4,21 +4,16 @@
<meta charset="utf-8" />
<title>Unit Tests for sanitize.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/svgedit.js"></script>
<script src="../editor/pathseg.js"></script>
<script src="../editor/browser.js"></script>
<script src="../editor/svgutils.js"></script>
<script src="../editor/sanitize.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="sanitize_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="sanitize_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for sanitize.js</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="anchor" style="visibility:hidden"></div>
<div id="anchor" style="visibility: hidden;"></div>
</body>
</html>

21
test/sanitize_test.js
View File

@@ -1,24 +1,25 @@
/* eslint-env qunit */
/* globals svgedit, equals */
import {NS} from '../editor/svgedit.js';
import * as sanitize from '../editor/sanitize.js';
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});
const svg = document.createElementNS(svgedit.NS.SVG, 'svg');
const svg = document.createElementNS(NS.SVG, 'svg');
test('Test sanitizeSvg() strips ws from style attr', function () {
expect(2);
QUnit.test('Test sanitizeSvg() strips ws from style attr', function (assert) {
assert.expect(2);
const rect = document.createElementNS(svgedit.NS.SVG, 'rect');
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('style', 'stroke: blue ; stroke-width : 40;');
// sanitizeSvg() requires the node to have a parent and a document.
svg.appendChild(rect);
svgedit.sanitize.sanitizeSvg(rect);
sanitize.sanitizeSvg(rect);
equals(rect.getAttribute('stroke'), 'blue');
equals(rect.getAttribute('stroke-width'), '40');
assert.equal(rect.getAttribute('stroke'), 'blue');
assert.equal(rect.getAttribute('stroke-width'), '40');
});

12
test/select_test.html
View File

@@ -4,16 +4,10 @@
<meta charset="utf-8" />
<title>Unit Tests for select.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/svgedit.js"></script>
<script src="../editor/pathseg.js"></script>
<script src="../editor/browser.js"></script>
<script src="../editor/math.js"></script>
<script src="../editor/svgutils.js"></script>
<script src="../editor/select.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="select_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="select_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for select.js</h1>

91
test/select_test.js
View File

@@ -1,14 +1,15 @@
/* eslint-env qunit */
/* globals svgedit, equals */
import {NS} from '../editor/svgedit.js';
import * as select from '../editor/select.js';
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});
module('svgedit.select');
QUnit.module('svgedit.select');
const sandbox = document.getElementById('sandbox');
let svgroot;
@@ -18,7 +19,7 @@ const mockConfig = {
};
const mockFactory = {
createSVGElement (jsonMap) {
const elem = document.createElementNS(svgedit.NS.SVG, jsonMap['element']);
const elem = document.createElementNS(NS.SVG, jsonMap['element']);
for (const attr in jsonMap.attr) {
elem.setAttribute(attr, jsonMap.attr[attr]);
}
@@ -57,7 +58,7 @@ function setUp () {
/*
function setUpWithInit () {
setUp();
svgedit.select.init(mockConfig, mockFactory);
select.init(mockConfig, mockFactory);
}
*/
@@ -67,64 +68,64 @@ function tearDown () {
}
}
test('Test svgedit.select package', function () {
expect(10);
QUnit.test('Test svgedit.select package', function (assert) {
assert.expect(10);
ok(svgedit.select);
ok(svgedit.select.Selector);
ok(svgedit.select.SelectorManager);
ok(svgedit.select.init);
ok(svgedit.select.getSelectorManager);
equals(typeof svgedit.select, typeof {});
equals(typeof svgedit.select.Selector, typeof function () {});
equals(typeof svgedit.select.SelectorManager, typeof function () {});
equals(typeof svgedit.select.init, typeof function () {});
equals(typeof svgedit.select.getSelectorManager, typeof function () {});
assert.ok(select);
assert.ok(select.Selector);
assert.ok(select.SelectorManager);
assert.ok(select.init);
assert.ok(select.getSelectorManager);
assert.equal(typeof select, typeof {});
assert.equal(typeof select.Selector, typeof function () {});
assert.equal(typeof select.SelectorManager, typeof function () {});
assert.equal(typeof select.init, typeof function () {});
assert.equal(typeof select.getSelectorManager, typeof function () {});
});
test('Test Selector DOM structure', function () {
expect(24);
QUnit.test('Test Selector DOM structure', function (assert) {
assert.expect(24);
setUp();
ok(svgroot);
ok(svgroot.hasChildNodes());
assert.ok(svgroot);
assert.ok(svgroot.hasChildNodes());
// Verify non-existence of Selector DOM nodes
equals(svgroot.childNodes.length, 1);
equals(svgroot.childNodes.item(0), svgcontent);
ok(!svgroot.querySelector('#selectorParentGroup'));
assert.equal(svgroot.childNodes.length, 1);
assert.equal(svgroot.childNodes.item(0), svgcontent);
assert.ok(!svgroot.querySelector('#selectorParentGroup'));
svgedit.select.init(mockConfig, mockFactory);
select.init(mockConfig, mockFactory);
equals(svgroot.childNodes.length, 3);
assert.equal(svgroot.childNodes.length, 3);
// Verify existence of canvas background.
const cb = svgroot.childNodes.item(0);
ok(cb);
equals(cb.id, 'canvasBackground');
assert.ok(cb);
assert.equal(cb.id, 'canvasBackground');
ok(svgroot.childNodes.item(1));
equals(svgroot.childNodes.item(1), svgcontent);
assert.ok(svgroot.childNodes.item(1));
assert.equal(svgroot.childNodes.item(1), svgcontent);
// Verify existence of selectorParentGroup.
const spg = svgroot.childNodes.item(2);
ok(spg);
equals(svgroot.querySelector('#selectorParentGroup'), spg);
equals(spg.id, 'selectorParentGroup');
equals(spg.tagName, 'g');
assert.ok(spg);
assert.equal(svgroot.querySelector('#selectorParentGroup'), spg);
assert.equal(spg.id, 'selectorParentGroup');
assert.equal(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'));
assert.ok(spg.querySelector('#selectorGrip_resize_nw'));
assert.ok(spg.querySelector('#selectorGrip_resize_n'));
assert.ok(spg.querySelector('#selectorGrip_resize_ne'));
assert.ok(spg.querySelector('#selectorGrip_resize_e'));
assert.ok(spg.querySelector('#selectorGrip_resize_se'));
assert.ok(spg.querySelector('#selectorGrip_resize_s'));
assert.ok(spg.querySelector('#selectorGrip_resize_sw'));
assert.ok(spg.querySelector('#selectorGrip_resize_w'));
assert.ok(spg.querySelector('#selectorGrip_rotateconnector'));
assert.ok(spg.querySelector('#selectorGrip_rotate'));
tearDown();
});

6437
test/sinon/sinon-1.17.3.js
View File

File diff suppressed because it is too large Load Diff

62
test/sinon/sinon-qunit-1.0.0.js
View File

@@ -1,62 +0,0 @@
/**
* sinon-qunit 1.0.0, 2010/12/09
*
* @author Christian Johansen (christian@cjohansen.no)
*
* (The BSD License)
*
* Copyright (c) 2010-2011, Christian Johansen, christian@cjohansen.no
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* * Redistributions of source code must retain the above copyright notice,
* this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation
* and/or other materials provided with the distribution.
* * Neither the name of Christian Johansen nor the names of his contributors
* may be used to endorse or promote products derived from this software
* without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
* FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
* DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
* SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
* CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
* OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/*global sinon, QUnit, test*/
sinon.assert.fail = function (msg) {
QUnit.ok(false, msg);
};
sinon.assert.pass = function (assertion) {
QUnit.ok(true, assertion);
};
sinon.config = {
injectIntoThis: true,
injectInto: null,
properties: ["spy", "stub", "mock", "clock", "sandbox"],
useFakeTimers: true,
useFakeServer: false
};
(function (global) {
var qTest = QUnit.test;
QUnit.test = global.test = function (testName, expected, callback, async) {
if (arguments.length === 2) {
callback = expected;
expected = null;
}
return qTest(testName, expected, sinon.test(callback), async);
};
}(this));

16
test/sinon/sinon-qunit.js Normal file
View File

@@ -0,0 +1,16 @@
// Adapted from https://www.npmjs.com/package/sinon-test
export default function ({sinon, QUnit}) {
sinon.assert.fail = function (msg) {
QUnit.ok(false, msg);
};
sinon.assert.pass = function (assertion) {
QUnit.ok(true, assertion);
};
const qTest = QUnit.test;
QUnit.test = function (testName, callback) {
return qTest(testName, sinon.test(callback));
};
}

15
test/svgtransformlist_test.html
View File

@@ -4,23 +4,16 @@
<meta charset="utf-8" />
<title>Unit Tests for svgtransformlist.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/svgedit.js"></script>
<script>
// Mock for browser.js
svgedit.browser = {};
svgedit.browser.supportsNativeTransformLists = function () { return false; }
</script>
<script src="../editor/svgtransformlist.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="svgtransformlist_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="svgtransformlist_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for svgtransformlist.js</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="svgroot" style="visibility:hidden"></div>
<div id="svgroot" style="visibility: hidden;"></div>
</body>
</html>

350
test/svgtransformlist_test.js
View File

@@ -1,34 +1,26 @@
/* eslint-env qunit */
/* globals svgedit, equals */
import {NS} from '../editor/svgedit.js';
import * as transformlist from '../editor/svgtransformlist.js';
import {disableSupportsNativeTransformLists} from '../editor/browser.js';
import almostEqualsPlugin from './qunit/qunit-assert-almostEquals.js';
import expectOutOfBoundsExceptionPlugin from './qunit/qunit-assert-expectOutOfBoundsException.js';
almostEqualsPlugin(QUnit);
expectOutOfBoundsExceptionPlugin(QUnit);
disableSupportsNativeTransformLists();
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
const {NS} = svgedit;
});
const svgroot = document.querySelector('#svgroot');
let svgcontent, rect, circle;
const NEAR_ZERO = 5e-6; // 0.000005, Firefox fails at higher levels of precision.
function almostEquals (a, b, msg) {
msg = msg || (a + ' did not equal ' + b);
ok(Math.abs(a - b) < NEAR_ZERO, msg);
}
function checkOutOfBoundsException (obj, fn, arg1) {
let caughtException = false;
try {
obj[fn](arg1);
} catch (e) {
if (e.code === 1) {
caughtException = true;
}
}
ok(caughtException, 'Caugh an INDEX_SIZE_ERR exception');
}
function setUp () {
svgcontent = svgroot.appendChild(document.createElementNS(NS.SVG, 'svg'));
rect = svgcontent.appendChild(document.createElementNS(NS.SVG, 'rect'));
@@ -38,145 +30,145 @@ function setUp () {
}
function tearDown () {
svgedit.transformlist.resetListMap();
transformlist.resetListMap();
while (svgroot.hasChildNodes()) {
svgroot.removeChild(svgroot.firstChild);
}
}
module('svgedit.svgtransformlist');
QUnit.module('svgedit.svgtransformlist');
test('Test svgedit.transformlist package', function () {
expect(2);
QUnit.test('Test svgedit.transformlist package', function (assert) {
assert.expect(2);
ok(svgedit.transformlist);
ok(svgedit.transformlist.getTransformList);
assert.ok(transformlist);
assert.ok(transformlist.getTransformList);
});
test('Test svgedit.transformlist.getTransformList() function', function () {
expect(4);
QUnit.test('Test svgedit.transformlist.getTransformList() function', function (assert) {
assert.expect(4);
setUp();
const rxform = svgedit.transformlist.getTransformList(rect);
const cxform = svgedit.transformlist.getTransformList(circle);
const rxform = transformlist.getTransformList(rect);
const cxform = transformlist.getTransformList(circle);
ok(rxform);
ok(cxform);
equals(typeof rxform, typeof {});
equals(typeof cxform, typeof {});
assert.ok(rxform);
assert.ok(cxform);
assert.equal(typeof rxform, typeof {});
assert.equal(typeof cxform, typeof {});
tearDown();
});
test('Test SVGTransformList.numberOfItems property', function () {
expect(2);
QUnit.test('Test SVGTransformList.numberOfItems property', function (assert) {
assert.expect(2);
setUp();
const rxform = svgedit.transformlist.getTransformList(rect);
const rxform = transformlist.getTransformList(rect);
equals(typeof rxform.numberOfItems, typeof 0);
equals(rxform.numberOfItems, 0);
assert.equal(typeof rxform.numberOfItems, typeof 0);
assert.equal(rxform.numberOfItems, 0);
tearDown();
});
test('Test SVGTransformList.initialize()', function () {
expect(6);
QUnit.test('Test SVGTransformList.initialize()', function (assert) {
assert.expect(6);
setUp();
const rxform = svgedit.transformlist.getTransformList(rect);
const cxform = svgedit.transformlist.getTransformList(circle);
const rxform = transformlist.getTransformList(rect);
const cxform = transformlist.getTransformList(circle);
const t = svgcontent.createSVGTransform();
ok(t);
ok(rxform.initialize);
equals(typeof rxform.initialize, typeof function () {});
assert.ok(t);
assert.ok(rxform.initialize);
assert.equal(typeof rxform.initialize, typeof function () {});
rxform.initialize(t);
equals(rxform.numberOfItems, 1);
equals(cxform.numberOfItems, 0);
assert.equal(rxform.numberOfItems, 1);
assert.equal(cxform.numberOfItems, 0);
// If a transform was already in a transform list, this should
// remove it from its old list and add it to this list.
cxform.initialize(t);
// This also fails in Firefox native.
// equals(rxform.numberOfItems, 0, 'Did not remove transform from list before initializing another transformlist');
equals(cxform.numberOfItems, 1);
// assert.equal(rxform.numberOfItems, 0, 'Did not remove transform from list before initializing another transformlist');
assert.equal(cxform.numberOfItems, 1);
tearDown();
});
test('Test SVGTransformList.appendItem() and getItem()', function () {
expect(12);
QUnit.test('Test SVGTransformList.appendItem() and getItem()', function (assert) {
assert.expect(12);
setUp();
const rxform = svgedit.transformlist.getTransformList(rect);
const cxform = svgedit.transformlist.getTransformList(circle);
const rxform = transformlist.getTransformList(rect);
const cxform = transformlist.getTransformList(circle);
const t1 = svgcontent.createSVGTransform(),
t2 = svgcontent.createSVGTransform(),
t3 = svgcontent.createSVGTransform();
ok(rxform.appendItem);
ok(rxform.getItem);
equals(typeof rxform.appendItem, typeof function () {});
equals(typeof rxform.getItem, typeof function () {});
assert.ok(rxform.appendItem);
assert.ok(rxform.getItem);
assert.equal(typeof rxform.appendItem, typeof function () {});
assert.equal(typeof rxform.getItem, typeof function () {});
rxform.appendItem(t1);
rxform.appendItem(t2);
rxform.appendItem(t3);
equals(rxform.numberOfItems, 3);
assert.equal(rxform.numberOfItems, 3);
const rxf = rxform.getItem(0);
equals(rxf, t1);
equals(rxform.getItem(1), t2);
equals(rxform.getItem(2), t3);
assert.equal(rxf, t1);
assert.equal(rxform.getItem(1), t2);
assert.equal(rxform.getItem(2), t3);
checkOutOfBoundsException(rxform, 'getItem', -1);
checkOutOfBoundsException(rxform, 'getItem', 3);
assert.expectOutOfBoundsException(rxform, 'getItem', -1);
assert.expectOutOfBoundsException(rxform, 'getItem', 3);
cxform.appendItem(t1);
// These also fail in Firefox native.
// equals(rxform.numberOfItems, 2, 'Did not remove a transform from a list before appending it to a new transformlist');
// equals(rxform.getItem(0), t2, 'Found the wrong transform in a transformlist');
// equals(rxform.getItem(1), t3, 'Found the wrong transform in a transformlist');
// assert.equal(rxform.numberOfItems, 2, 'Did not remove a transform from a list before appending it to a new transformlist');
// assert.equal(rxform.getItem(0), t2, 'Found the wrong transform in a transformlist');
// assert.equal(rxform.getItem(1), t3, 'Found the wrong transform in a transformlist');
equals(cxform.numberOfItems, 1);
equals(cxform.getItem(0), t1);
assert.equal(cxform.numberOfItems, 1);
assert.equal(cxform.getItem(0), t1);
tearDown();
});
test('Test SVGTransformList.removeItem()', function () {
expect(7);
QUnit.test('Test SVGTransformList.removeItem()', function (assert) {
assert.expect(7);
setUp();
const rxform = svgedit.transformlist.getTransformList(rect);
const rxform = transformlist.getTransformList(rect);
const t1 = svgcontent.createSVGTransform(),
t2 = svgcontent.createSVGTransform();
ok(rxform.removeItem);
equals(typeof rxform.removeItem, typeof function () {});
assert.ok(rxform.removeItem);
assert.equal(typeof rxform.removeItem, typeof function () {});
rxform.appendItem(t1);
rxform.appendItem(t2);
const removedTransform = rxform.removeItem(0);
equals(rxform.numberOfItems, 1);
equals(removedTransform, t1);
equals(rxform.getItem(0), t2);
assert.equal(rxform.numberOfItems, 1);
assert.equal(removedTransform, t1);
assert.equal(rxform.getItem(0), t2);
checkOutOfBoundsException(rxform, 'removeItem', -1);
checkOutOfBoundsException(rxform, 'removeItem', 1);
assert.expectOutOfBoundsException(rxform, 'removeItem', -1);
assert.expectOutOfBoundsException(rxform, 'removeItem', 1);
tearDown();
});
test('Test SVGTransformList.replaceItem()', function () {
expect(8);
QUnit.test('Test SVGTransformList.replaceItem()', function (assert) {
assert.expect(8);
setUp();
const rxform = svgedit.transformlist.getTransformList(rect);
const cxform = svgedit.transformlist.getTransformList(circle);
const rxform = transformlist.getTransformList(rect);
const cxform = transformlist.getTransformList(circle);
ok(rxform.replaceItem);
equals(typeof rxform.replaceItem, typeof function () {});
assert.ok(rxform.replaceItem);
assert.equal(typeof rxform.replaceItem, typeof function () {});
const t1 = svgcontent.createSVGTransform(),
t2 = svgcontent.createSVGTransform(),
@@ -187,33 +179,33 @@ test('Test SVGTransformList.replaceItem()', function () {
cxform.appendItem(t3);
const newItem = rxform.replaceItem(t3, 0);
equals(rxform.numberOfItems, 2);
equals(newItem, t3);
equals(rxform.getItem(0), t3);
equals(rxform.getItem(1), t2);
assert.equal(rxform.numberOfItems, 2);
assert.equal(newItem, t3);
assert.equal(rxform.getItem(0), t3);
assert.equal(rxform.getItem(1), t2);
// Fails in Firefox native
// equals(cxform.numberOfItems, 0);
// assert.equal(cxform.numberOfItems, 0);
// test replaceItem within a list
rxform.appendItem(t1);
rxform.replaceItem(t1, 0);
// Fails in Firefox native
// equals(rxform.numberOfItems, 2);
equals(rxform.getItem(0), t1);
equals(rxform.getItem(1), t2);
// assert.equal(rxform.numberOfItems, 2);
assert.equal(rxform.getItem(0), t1);
assert.equal(rxform.getItem(1), t2);
tearDown();
});
test('Test SVGTransformList.insertItemBefore()', function () {
expect(10);
QUnit.test('Test SVGTransformList.insertItemBefore()', function (assert) {
assert.expect(10);
setUp();
const rxform = svgedit.transformlist.getTransformList(rect);
const cxform = svgedit.transformlist.getTransformList(circle);
const rxform = transformlist.getTransformList(rect);
const cxform = transformlist.getTransformList(circle);
ok(rxform.insertItemBefore);
equals(typeof rxform.insertItemBefore, typeof function () {});
assert.ok(rxform.insertItemBefore);
assert.equal(typeof rxform.insertItemBefore, typeof function () {});
const t1 = svgcontent.createSVGTransform(),
t2 = svgcontent.createSVGTransform(),
@@ -224,129 +216,129 @@ test('Test SVGTransformList.insertItemBefore()', function () {
cxform.appendItem(t3);
const newItem = rxform.insertItemBefore(t3, 0);
equals(rxform.numberOfItems, 3);
equals(newItem, t3);
equals(rxform.getItem(0), t3);
equals(rxform.getItem(1), t1);
equals(rxform.getItem(2), t2);
assert.equal(rxform.numberOfItems, 3);
assert.equal(newItem, t3);
assert.equal(rxform.getItem(0), t3);
assert.equal(rxform.getItem(1), t1);
assert.equal(rxform.getItem(2), t2);
// Fails in Firefox native
// equals(cxform.numberOfItems, 0);
// assert.equal(cxform.numberOfItems, 0);
rxform.insertItemBefore(t2, 1);
// Fails in Firefox native (they make copies of the transforms)
// equals(rxform.numberOfItems, 3);
equals(rxform.getItem(0), t3);
equals(rxform.getItem(1), t2);
equals(rxform.getItem(2), t1);
// assert.equal(rxform.numberOfItems, 3);
assert.equal(rxform.getItem(0), t3);
assert.equal(rxform.getItem(1), t2);
assert.equal(rxform.getItem(2), t1);
tearDown();
});
test('Test SVGTransformList.init() for translate(200,100)', function () {
expect(8);
QUnit.test('Test SVGTransformList.init() for translate(200,100)', function (assert) {
assert.expect(8);
setUp();
rect.setAttribute('transform', 'translate(200,100)');
const rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
const rxform = transformlist.getTransformList(rect);
assert.equal(rxform.numberOfItems, 1);
const translate = rxform.getItem(0);
equals(translate.type, 2);
assert.equal(translate.type, 2);
const m = translate.matrix;
equals(m.a, 1);
equals(m.b, 0);
equals(m.c, 0);
equals(m.d, 1);
equals(m.e, 200);
equals(m.f, 100);
assert.equal(m.a, 1);
assert.equal(m.b, 0);
assert.equal(m.c, 0);
assert.equal(m.d, 1);
assert.equal(m.e, 200);
assert.equal(m.f, 100);
tearDown();
});
test('Test SVGTransformList.init() for scale(4)', function () {
expect(8);
QUnit.test('Test SVGTransformList.init() for scale(4)', function (assert) {
assert.expect(8);
setUp();
rect.setAttribute('transform', 'scale(4)');
const rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
const rxform = transformlist.getTransformList(rect);
assert.equal(rxform.numberOfItems, 1);
const scale = rxform.getItem(0);
equals(3, scale.type);
assert.equal(scale.type, 3);
const m = scale.matrix;
equals(m.a, 4);
equals(m.b, 0);
equals(m.c, 0);
equals(m.d, 4);
equals(m.e, 0);
equals(m.f, 0);
assert.equal(m.a, 4);
assert.equal(m.b, 0);
assert.equal(m.c, 0);
assert.equal(m.d, 4);
assert.equal(m.e, 0);
assert.equal(m.f, 0);
tearDown();
});
test('Test SVGTransformList.init() for scale(4,3)', function () {
expect(8);
QUnit.test('Test SVGTransformList.init() for scale(4,3)', function (assert) {
assert.expect(8);
setUp();
rect.setAttribute('transform', 'scale(4,3)');
const rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
const rxform = transformlist.getTransformList(rect);
assert.equal(rxform.numberOfItems, 1);
const scale = rxform.getItem(0);
equals(3, scale.type);
assert.equal(scale.type, 3);
const m = scale.matrix;
equals(m.a, 4);
equals(m.b, 0);
equals(m.c, 0);
equals(m.d, 3);
equals(m.e, 0);
equals(m.f, 0);
assert.equal(m.a, 4);
assert.equal(m.b, 0);
assert.equal(m.c, 0);
assert.equal(m.d, 3);
assert.equal(m.e, 0);
assert.equal(m.f, 0);
tearDown();
});
test('Test SVGTransformList.init() for rotate(45)', function () {
expect(9);
QUnit.test('Test SVGTransformList.init() for rotate(45)', function (assert) {
assert.expect(9);
setUp();
rect.setAttribute('transform', 'rotate(45)');
const rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
const rxform = transformlist.getTransformList(rect);
assert.equal(rxform.numberOfItems, 1);
const rotate = rxform.getItem(0);
equals(4, rotate.type);
equals(45, rotate.angle);
assert.equal(rotate.type, 4);
assert.equal(rotate.angle, 45);
const m = rotate.matrix;
almostEquals(m.a, 1 / Math.sqrt(2));
almostEquals(m.b, 1 / Math.sqrt(2));
almostEquals(m.c, -1 / Math.sqrt(2));
almostEquals(m.d, 1 / Math.sqrt(2));
equals(m.e, 0);
equals(m.f, 0);
assert.almostEquals(1 / Math.sqrt(2), m.a);
assert.almostEquals(1 / Math.sqrt(2), m.b);
assert.almostEquals(-1 / Math.sqrt(2), m.c);
assert.almostEquals(1 / Math.sqrt(2), m.d);
assert.equal(m.e, 0);
assert.equal(m.f, 0);
tearDown();
});
test('Test SVGTransformList.init() for rotate(45, 100, 200)', function () {
expect(9);
QUnit.test('Test SVGTransformList.init() for rotate(45, 100, 200)', function (assert) {
assert.expect(9);
setUp();
rect.setAttribute('transform', 'rotate(45, 100, 200)');
const rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
const rxform = transformlist.getTransformList(rect);
assert.equal(rxform.numberOfItems, 1);
const rotate = rxform.getItem(0);
equals(4, rotate.type);
equals(45, rotate.angle);
assert.equal(rotate.type, 4);
assert.equal(rotate.angle, 45);
const m = rotate.matrix;
almostEquals(m.a, 1 / Math.sqrt(2));
almostEquals(m.b, 1 / Math.sqrt(2));
almostEquals(m.c, -1 / Math.sqrt(2));
almostEquals(m.d, 1 / Math.sqrt(2));
assert.almostEquals(m.a, 1 / Math.sqrt(2));
assert.almostEquals(m.b, 1 / Math.sqrt(2));
assert.almostEquals(m.c, -1 / Math.sqrt(2));
assert.almostEquals(m.d, 1 / Math.sqrt(2));
const r = svgcontent.createSVGMatrix();
r.a = 1 / Math.sqrt(2); r.b = 1 / Math.sqrt(2);
@@ -360,30 +352,30 @@ test('Test SVGTransformList.init() for rotate(45, 100, 200)', function () {
const result = t_.multiply(r).multiply(t);
almostEquals(m.e, result.e);
almostEquals(m.f, result.f);
assert.almostEquals(m.e, result.e);
assert.almostEquals(m.f, result.f);
tearDown();
});
test('Test SVGTransformList.init() for matrix(1, 2, 3, 4, 5, 6)', function () {
expect(8);
QUnit.test('Test SVGTransformList.init() for matrix(1, 2, 3, 4, 5, 6)', function (assert) {
assert.expect(8);
setUp();
rect.setAttribute('transform', 'matrix(1,2,3,4,5,6)');
const rxform = svgedit.transformlist.getTransformList(rect);
equals(1, rxform.numberOfItems);
const rxform = transformlist.getTransformList(rect);
assert.equal(rxform.numberOfItems, 1);
const mt = rxform.getItem(0);
equals(1, mt.type);
assert.equal(mt.type, 1);
const m = mt.matrix;
equals(m.a, 1);
equals(m.b, 2);
equals(m.c, 3);
equals(m.d, 4);
equals(m.e, 5);
equals(m.f, 6);
assert.equal(m.a, 1);
assert.equal(m.b, 2);
assert.equal(m.c, 3);
assert.equal(m.d, 4);
assert.equal(m.e, 5);
assert.equal(m.f, 6);
tearDown();
});

16
test/svgutils_bbox_test.html
View File

@@ -4,20 +4,10 @@
<meta charset="utf-8" />
<title>Unit Tests for svgutils.js BBox functions</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/svgedit.js"></script>
<!-- svgutils.js depends on these three... mock out? -->
<script src="../editor/pathseg.js"></script>
<script src="../editor/browser.js"></script>
<script src="../editor/math.js"></script>
<script src="../editor/svgtransformlist.js"></script>
<script src="../editor/jquery-svg.js"></script> <!-- has $.attr() that takes an array . Used by svgedit.utilities.getPathDFromElement -->
<script src="../editor/path.js"></script>
<script src="../editor/svgutils.js"></script>
<script src="qunit/qunit.js"></script>
<script src="qunit/qunit-assert-close.js"></script>
<script defer="defer" src="svgutils_bbox_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="svgutils_bbox_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for svgutils.js BBox functions</h1>

342
test/svgutils_bbox_test.js
View File

@@ -1,17 +1,23 @@
/* eslint-env qunit */
/* globals svgedit */
import '../editor/pathseg.js';
import {NS} from '../editor/svgedit.js';
import * as utilities from '../editor/svgutils.js';
import * as transformlist from '../editor/svgtransformlist.js';
import * as math from '../editor/math.js';
import * as path from '../editor/path.js';
import closePlugin from './qunit/qunit-assert-close.js';
// import './pathseg.js';
closePlugin(QUnit);
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});
function mockCreateSVGElement (jsonMap) {
const elem = document.createElementNS(svgedit.NS.SVG, jsonMap['element']);
const elem = document.createElementNS(NS.SVG, jsonMap['element']);
for (const attr in jsonMap['attr']) {
elem.setAttribute(attr, jsonMap['attr'][attr]);
}
@@ -25,13 +31,13 @@ function mockAddSvgElementFromJson (json) {
return elem;
}
const mockPathActions = {
resetOrientation (path) {
if (path == null || path.nodeName !== 'path') { return false; }
const tlist = svgedit.transformlist.getTransformList(path);
const m = svgedit.math.transformListToTransform(tlist).matrix;
resetOrientation (pth) {
if (pth == null || pth.nodeName !== 'path') { return false; }
const tlist = transformlist.getTransformList(pth);
const m = math.transformListToTransform(tlist).matrix;
tlist.clear();
path.removeAttribute('transform');
const segList = path.pathSegList;
pth.removeAttribute('transform');
const segList = pth.pathSegList;
const len = segList.numberOfItems;
// let lastX, lastY;
@@ -44,177 +50,177 @@ const mockPathActions = {
['', 1, 2].forEach(function (n, j) {
const x = seg['x' + n], y = seg['y' + n];
if (x !== undefined && y !== undefined) {
const pt = svgedit.math.transformPoint(x, y, m);
const pt = math.transformPoint(x, y, m);
pts.splice(pts.length, 0, pt.x, pt.y);
}
});
svgedit.path.replacePathSeg(type, i, pts, path);
path.replacePathSeg(type, i, pts, pth);
}
// svgedit.utilities.reorientGrads(path, m);
// path.reorientGrads(pth, m);
}
};
const EPSILON = 0.001;
// const svg = document.createElementNS(svgedit.NS.SVG, 'svg');
// const svg = document.createElementNS(NS.SVG, 'svg');
const sandbox = document.getElementById('sandbox');
const svgroot = mockCreateSVGElement({
'element': 'svg',
'attr': {'id': 'svgroot'}
element: 'svg',
attr: {id: 'svgroot'}
});
sandbox.appendChild(svgroot);
module('svgedit.utilities_bbox', {
setup () {
QUnit.module('svgedit.utilities_bbox', {
beforeEach () {
// We're reusing ID's so we need to do this for transforms.
svgedit.transformlist.resetListMap();
svgedit.path.init(null);
transformlist.resetListMap();
path.init(null);
mockAddSvgElementFromJsonCallCount = 0;
},
teardown () {
afterEach () {
}
});
test('Test svgedit.utilities package', function () {
ok(svgedit.utilities);
ok(svgedit.utilities.getBBoxWithTransform);
ok(svgedit.utilities.getStrokedBBox);
ok(svgedit.utilities.getRotationAngleFromTransformList);
ok(svgedit.utilities.getRotationAngle);
QUnit.test('Test svgedit.utilities package', function (assert) {
assert.ok(utilities);
assert.ok(utilities.getBBoxWithTransform);
assert.ok(utilities.getStrokedBBox);
assert.ok(utilities.getRotationAngleFromTransformList);
assert.ok(utilities.getRotationAngle);
});
test('Test getBBoxWithTransform and no transform', function () {
const {getBBoxWithTransform} = svgedit.utilities;
QUnit.test('Test getBBoxWithTransform and no transform', function (assert) {
const {getBBoxWithTransform} = utilities;
let elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 L2,3'}
element: 'path',
attr: {id: 'path', d: 'M0,1 L2,3'}
});
svgroot.appendChild(elem);
let bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
equal(mockAddSvgElementFromJsonCallCount, 0);
assert.deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
assert.equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
equal(mockAddSvgElementFromJsonCallCount, 0);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
assert.equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, 'height': 5});
equal(mockAddSvgElementFromJsonCallCount, 0);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
assert.equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'}
});
const g = mockCreateSVGElement({
'element': 'g',
'attr': {}
element: 'g',
attr: {}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
equal(mockAddSvgElementFromJsonCallCount, 0);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
assert.equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(g);
});
test('Test getBBoxWithTransform and a rotation transform', function () {
const {getBBoxWithTransform} = svgedit.utilities;
QUnit.test('Test getBBoxWithTransform and a rotation transform', function (assert) {
const {getBBoxWithTransform} = utilities;
let elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M10,10 L20,20', 'transform': 'rotate(45 10,10)'}
element: 'path',
attr: {id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10)'}
});
svgroot.appendChild(elem);
let bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, 10, EPSILON);
close(bbox.y, 10, EPSILON);
close(bbox.width, 0, EPSILON);
close(bbox.height, Math.sqrt(100 + 100), EPSILON);
assert.close(bbox.x, 10, EPSILON);
assert.close(bbox.y, 10, EPSILON);
assert.close(bbox.width, 0, EPSILON);
assert.close(bbox.height, Math.sqrt(100 + 100), EPSILON);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '10', 'y': '10', 'width': '10', 'height': '20', 'transform': 'rotate(90 15,20)'}
element: 'rect',
attr: {id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20)'}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, 5, EPSILON);
close(bbox.y, 15, EPSILON);
close(bbox.width, 20, EPSILON);
close(bbox.height, 10, EPSILON);
equal(mockAddSvgElementFromJsonCallCount, 1);
assert.close(bbox.x, 5, EPSILON);
assert.close(bbox.y, 15, EPSILON);
assert.close(bbox.width, 20, EPSILON);
assert.close(bbox.height, 10, EPSILON);
assert.equal(mockAddSvgElementFromJsonCallCount, 1);
svgroot.removeChild(elem);
const rect = {x: 10, y: 10, width: 10, height: 20};
const angle = 45;
const origin = {x: 15, y: 20};
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect2', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height, 'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
element: 'rect',
attr: {id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
});
svgroot.appendChild(elem);
mockAddSvgElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
const r2 = rotateRect(rect, angle, origin);
close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
equal(mockAddSvgElementFromJsonCallCount, 0);
assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
assert.close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
assert.equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
// Same as previous but wrapped with g and the transform is with the g.
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect3', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height}
element: 'rect',
attr: {id: 'rect3', x: rect.x, y: rect.y, width: rect.width, height: rect.height}
});
const g = mockCreateSVGElement({
'element': 'g',
'attr': {'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
element: 'g',
attr: {transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
});
g.appendChild(elem);
svgroot.appendChild(g);
mockAddSvgElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(g, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
equal(mockAddSvgElementFromJsonCallCount, 0);
assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
assert.close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
assert.equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(g);
elem = mockCreateSVGElement({
'element': 'ellipse',
'attr': {'id': 'ellipse1', 'cx': '100', 'cy': '100', 'rx': '50', 'ry': '50', 'transform': 'rotate(45 100,100)'}
element: 'ellipse',
attr: {id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100)'}
});
svgroot.appendChild(elem);
mockAddSvgElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
// TODO: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100.
ok(bbox.x > 45 && bbox.x <= 50);
ok(bbox.y > 45 && bbox.y <= 50);
ok(bbox.width >= 100 && bbox.width < 110);
ok(bbox.height >= 100 && bbox.height < 110);
equal(mockAddSvgElementFromJsonCallCount, 1);
assert.ok(bbox.x > 45 && bbox.x <= 50);
assert.ok(bbox.y > 45 && bbox.y <= 50);
assert.ok(bbox.width >= 100 && bbox.width < 110);
assert.ok(bbox.height >= 100 && bbox.height < 110);
assert.equal(mockAddSvgElementFromJsonCallCount, 1);
svgroot.removeChild(elem);
});
test('Test getBBoxWithTransform with rotation and matrix transforms', function () {
const {getBBoxWithTransform} = svgedit.utilities;
QUnit.test('Test getBBoxWithTransform with rotation and matrix transforms', function (assert) {
const {getBBoxWithTransform} = utilities;
let tx = 10; // tx right
let ty = 10; // tx down
@@ -222,30 +228,30 @@ test('Test getBBoxWithTransform with rotation and matrix transforms', function (
let tyInRotatedSpace = 0;
let matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
let elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M10,10 L20,20', 'transform': 'rotate(45 10,10) ' + matrix}
element: 'path',
attr: {id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10) ' + matrix}
});
svgroot.appendChild(elem);
let bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, 10 + tx, EPSILON);
close(bbox.y, 10 + ty, EPSILON);
close(bbox.width, 0, EPSILON);
close(bbox.height, Math.sqrt(100 + 100), EPSILON);
assert.close(bbox.x, 10 + tx, EPSILON);
assert.close(bbox.y, 10 + ty, EPSILON);
assert.close(bbox.width, 0, EPSILON);
assert.close(bbox.height, Math.sqrt(100 + 100), EPSILON);
svgroot.removeChild(elem);
txInRotatedSpace = tx; // translate in rotated 90 space.
tyInRotatedSpace = -ty;
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '10', 'y': '10', 'width': '10', 'height': '20', 'transform': 'rotate(90 15,20) ' + matrix}
element: 'rect',
attr: {id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20) ' + matrix}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, 5 + tx, EPSILON);
close(bbox.y, 15 + ty, EPSILON);
close(bbox.width, 20, EPSILON);
close(bbox.height, 10, EPSILON);
assert.close(bbox.x, 5 + tx, EPSILON);
assert.close(bbox.y, 15 + ty, EPSILON);
assert.close(bbox.width, 20, EPSILON);
assert.close(bbox.height, 10, EPSILON);
svgroot.removeChild(elem);
const rect = {x: 10, y: 10, width: 10, height: 20};
@@ -257,183 +263,183 @@ test('Test getBBoxWithTransform with rotation and matrix transforms', function (
tyInRotatedSpace = 0;
matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')';
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect2', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height, 'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
element: 'rect',
attr: {id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
const r2 = rotateRect(rect, angle, origin);
close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
assert.close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
assert.close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
svgroot.removeChild(elem);
// Same as previous but wrapped with g and the transform is with the g.
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect3', 'x': rect.x, 'y': rect.y, 'width': rect.width, 'height': rect.height}
element: 'rect',
attr: {id: 'rect3', x: rect.x, y: rect.y, width: rect.width, height: rect.height}
});
const g = mockCreateSVGElement({
'element': 'g',
'attr': {'transform': 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
element: 'g',
attr: {transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getBBoxWithTransform(g, mockAddSvgElementFromJson, mockPathActions);
close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
assert.close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
assert.close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
svgroot.removeChild(g);
elem = mockCreateSVGElement({
'element': 'ellipse',
'attr': {'id': 'ellipse1', 'cx': '100', 'cy': '100', 'rx': '50', 'ry': '50', 'transform': 'rotate(45 100,100) ' + matrix}
element: 'ellipse',
attr: {id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100) ' + matrix}
});
svgroot.appendChild(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
// TODO: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100.
ok(bbox.x > 45 + tx && bbox.x <= 50 + tx);
ok(bbox.y > 45 + ty && bbox.y <= 50 + ty);
ok(bbox.width >= 100 && bbox.width < 110);
ok(bbox.height >= 100 && bbox.height < 110);
assert.ok(bbox.x > 45 + tx && bbox.x <= 50 + tx);
assert.ok(bbox.y > 45 + ty && bbox.y <= 50 + ty);
assert.ok(bbox.width >= 100 && bbox.width < 110);
assert.ok(bbox.height >= 100 && bbox.height < 110);
svgroot.removeChild(elem);
});
test('Test getStrokedBBox with stroke-width 10', function () {
const {getStrokedBBox} = svgedit.utilities;
QUnit.test('Test getStrokedBBox with stroke-width 10', function (assert) {
const {getStrokedBBox} = utilities;
const strokeWidth = 10;
let elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 L2,3', 'stroke-width': strokeWidth}
element: 'path',
attr: {id: 'path', d: 'M0,1 L2,3', 'stroke-width': strokeWidth}
});
svgroot.appendChild(elem);
let bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth});
assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': strokeWidth}
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth});
assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6', 'stroke-width': strokeWidth}
element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': strokeWidth}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth});
assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': strokeWidth}
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth}
});
const g = mockCreateSVGElement({
'element': 'g',
'attr': {}
element: 'g',
attr: {}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth});
assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth});
svgroot.removeChild(g);
});
test("Test getStrokedBBox with stroke-width 'none'", function () {
const {getStrokedBBox} = svgedit.utilities;
QUnit.test("Test getStrokedBBox with stroke-width 'none'", function (assert) {
const {getStrokedBBox} = utilities;
let elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 L2,3', 'stroke-width': 'none'}
element: 'path',
attr: {id: 'path', d: 'M0,1 L2,3', 'stroke-width': 'none'}
});
svgroot.appendChild(elem);
let bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
assert.deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': 'none'}
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6', 'stroke-width': 'none'}
element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': 'none'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10', 'stroke-width': 'none'}
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none'}
});
const g = mockCreateSVGElement({
'element': 'g',
'attr': {}
element: 'g',
attr: {}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(g);
});
test('Test getStrokedBBox with no stroke-width attribute', function () {
const {getStrokedBBox} = svgedit.utilities;
QUnit.test('Test getStrokedBBox with no stroke-width attribute', function (assert) {
const {getStrokedBBox} = utilities;
let elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 L2,3'}
element: 'path',
attr: {id: 'path', d: 'M0,1 L2,3'}
});
svgroot.appendChild(elem);
let bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
assert.deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'}
});
svgroot.appendChild(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'}
});
const g = mockCreateSVGElement({
'element': 'g',
'attr': {}
element: 'g',
attr: {}
});
g.appendChild(elem);
svgroot.appendChild(g);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(g);
});

15
test/svgutils_performance_test.html
View File

@@ -7,7 +7,7 @@
<title>Performance Unit Tests for svgutils.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<style id="styleoverrides" media="screen">
#svgcanvas svg * {
cursor: move;
@@ -18,17 +18,8 @@
}
</style>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/svgedit.js"></script>
<!-- svgutils.js depends on these three... mock out? -->
<script src="../editor/pathseg.js"></script>
<script src="../editor/browser.js"></script>
<script src="../editor/svgtransformlist.js"></script>
<script src="../editor/math.js"></script>
<script src="../editor/jquery-svg.js"></script> <!-- has $.attr() that takes an array . Used jby svgedit.utilities.getPathDFromElement -->
<script src="../editor/units.js"></script>
<script src="../editor/svgutils.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="svgutils_performance_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="svgutils_performance_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Performance Unit Tests for svgutils.js</h1>

49
test/svgutils_performance_test.js
View File

@@ -1,19 +1,21 @@
/* eslint-env qunit */
/* globals svgedit */
// import './pathseg.js';
import '../editor/pathseg.js';
import {NS} from '../editor/svgedit.js';
import * as utilities from '../editor/svgutils.js';
import * as transformlist from '../editor/svgtransformlist.js';
import * as math from '../editor/math.js';
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});
const currentLayer = document.getElementById('layer1');
function mockCreateSVGElement (jsonMap) {
const elem = document.createElementNS(svgedit.NS.SVG, jsonMap['element']);
const elem = document.createElementNS(NS.SVG, jsonMap['element']);
for (const attr in jsonMap['attr']) {
elem.setAttribute(attr, jsonMap['attr'][attr]);
}
@@ -25,7 +27,7 @@ function mockAddSvgElementFromJson (json) {
return elem;
}
// const svg = document.createElementNS(svgedit.NS.SVG, 'svg');
// const svg = document.createElementNS(NS.SVG, 'svg');
const groupWithMatrixTransform = document.getElementById('svg_group_with_matrix_transform');
const textWithMatrixTransform = document.getElementById('svg_text_with_matrix_transform');
@@ -40,18 +42,18 @@ function fillDocumentByCloningElement (elem, count) {
}
}
module('svgedit.utilities_performance', {
setup () {
QUnit.module('svgedit.utilities_performance', {
beforeEach () {
},
teardown () {
afterEach () {
}
});
const mockPathActions = {
resetOrientation (path) {
if (path == null || path.nodeName !== 'path') { return false; }
const tlist = svgedit.transformlist.getTransformList(path);
const m = svgedit.math.transformListToTransform(tlist).matrix;
const tlist = transformlist.getTransformList(path);
const m = math.transformListToTransform(tlist).matrix;
tlist.clear();
path.removeAttribute('transform');
const segList = path.pathSegList;
@@ -67,14 +69,14 @@ const mockPathActions = {
['', 1, 2].forEach(function (n, j) {
const x = seg['x' + n], y = seg['y' + n];
if (x !== undefined && y !== undefined) {
const pt = svgedit.math.transformPoint(x, y, m);
const pt = math.transformPoint(x, y, m);
pts.splice(pts.length, 0, pt.x, pt.y);
}
});
// svgedit.path.replacePathSeg(type, i, pts, path);
// path.replacePathSeg(type, i, pts, path);
}
// svgedit.utilities.reorientGrads(path, m);
// utilities.reorientGrads(path, m);
}
};
@@ -82,8 +84,8 @@ const mockPathActions = {
// Performance times with various browsers on Macbook 2011 8MB RAM OS X El Capitan 10.11.4
//
// To see 'Before Optimization' performance, making the following two edits.
// 1. svgedit.utilities.getStrokedBBox - change if( elems.length === 1) to if( false && elems.length === 1)
// 2. svgedit.utilities.getBBoxWithTransform - uncomment 'Old technique that was very slow'
// 1. utilities.getStrokedBBox - change if( elems.length === 1) to if( false && elems.length === 1)
// 2. utilities.getBBoxWithTransform - uncomment 'Old technique that was very slow'
// Chrome
// Before Optimization
@@ -109,9 +111,10 @@ const mockPathActions = {
// Pass1 svgCanvas.getStrokedBBox total ms 42, ave ms 0.4, min/max 0 23
// Pass2 svgCanvas.getStrokedBBox total ms 17, ave ms 0.2, min/max 0 23
asyncTest('Test svgCanvas.getStrokedBBox() performance with matrix transforms', function () {
expect(2);
const {getStrokedBBox} = svgedit.utilities;
QUnit.test('Test svgCanvas.getStrokedBBox() performance with matrix transforms', function (assert) {
const done = assert.async();
assert.expect(2);
const {getStrokedBBox} = utilities;
const {children} = currentLayer;
let lastTime, now,
@@ -136,7 +139,7 @@ asyncTest('Test svgCanvas.getStrokedBBox() performance with matrix transforms',
}
total = lastTime - start;
const ave = total / count;
ok(ave < 20, 'svgedit.utilities.getStrokedBBox average execution time is less than 20 ms');
assert.ok(ave < 20, 'svgedit.utilities.getStrokedBBox average execution time is less than 20 ms');
console.log('Pass1 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + ave.toFixed(1) + ',\t min/max ' + min + ' ' + max);
// The second pass is two to ten times faster.
@@ -156,9 +159,9 @@ asyncTest('Test svgCanvas.getStrokedBBox() performance with matrix transforms',
total = lastTime - start;
const ave = total / count;
ok(ave < 2, 'svgedit.utilities.getStrokedBBox average execution time is less than 1 ms');
assert.ok(ave < 2, 'svgedit.utilities.getStrokedBBox average execution time is less than 1 ms');
console.log('Pass2 svgCanvas.getStrokedBBox total ms ' + total + ', ave ms ' + ave.toFixed(1) + ',\t min/max ' + min + ' ' + max);
QUnit.start();
done();
});
});

13
test/svgutils_test.html
View File

@@ -4,17 +4,10 @@
<meta charset="utf-8" />
<title>Unit Tests for svgutils.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/svgedit.js"></script>
<!-- svgutils.js depends on these three... mock out? -->
<script src="../editor/pathseg.js"></script>
<script src="../editor/browser.js"></script>
<script src="../editor/svgtransformlist.js"></script>
<script src="../editor/jquery-svg.js"></script> <!-- has $.attr() that takes an array . Used by svgedit.utilities.getPathDFromElement -->
<script src="../editor/svgutils.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="svgutils_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="svgutils_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for svgutils.js</h1>

315
test/svgutils_test.js
View File

@@ -1,15 +1,18 @@
/* eslint-env qunit */
/* globals svgedit, equals */
import {NS} from '../editor/svgedit.js';
import * as utilities from '../editor/svgutils.js';
import * as browser from '../editor/browser.js';
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});
function mockCreateSVGElement (jsonMap) {
const elem = document.createElementNS(svgedit.NS.SVG, jsonMap['element']);
const elem = document.createElementNS(NS.SVG, jsonMap['element']);
for (const attr in jsonMap['attr']) {
elem.setAttribute(attr, jsonMap['attr'][attr]);
}
@@ -23,18 +26,24 @@ function mockAddSvgElementFromJson (json) {
const mockPathActions = {resetOrientation () {}};
let mockHistorySubCommands = [];
const mockHistory = {
BatchCommand () {
return {
addSubCommand (cmd) { mockHistorySubCommands.push(cmd); }
};
BatchCommand: class {
constructor () {
return {
addSubCommand (cmd) { mockHistorySubCommands.push(cmd); }
};
}
},
RemoveElementCommand (elem, nextSibling, parent) {
this.elem = elem;
this.nextSibling = nextSibling;
this.parent = parent;
RemoveElementCommand: class {
constructor (elem, nextSibling, parent) { // Longhand needed since used as a constructor
this.elem = elem;
this.nextSibling = nextSibling;
this.parent = parent;
}
},
InsertElementCommand (path) {
this.path = path;
InsertElementCommand: class {
constructor (path) { // Longhand needed since used as a constructor
this.path = path;
}
}
};
const mockCount = {
@@ -46,88 +55,88 @@ function mockClearSelection () { mockCount.clearSelection++; }
function mockAddToSelection () { mockCount.addToSelection++; }
function mockAddCommandToHistory () { mockCount.addCommandToHistory++; }
const svg = document.createElementNS(svgedit.NS.SVG, 'svg');
const svg = document.createElementNS(NS.SVG, 'svg');
const sandbox = document.getElementById('sandbox');
const svgroot = mockCreateSVGElement({
'element': 'svg',
'attr': {'id': 'svgroot'}
element: 'svg',
attr: {id: 'svgroot'}
});
sandbox.appendChild(svgroot);
module('svgedit.utilities', {
setup () {
QUnit.module('svgedit.utilities', {
beforeEach () {
mockHistorySubCommands = [];
mockCount.clearSelection = 0;
mockCount.addToSelection = 0;
mockCount.addCommandToHistory = 0;
},
teardown () {
afterEach () {
}
});
test('Test svgedit.utilities package', function () {
expect(3);
QUnit.test('Test svgedit.utilities package', function (assert) {
assert.expect(3);
ok(svgedit.utilities);
ok(svgedit.utilities.toXml);
equals(typeof svgedit.utilities.toXml, typeof function () {});
assert.ok(utilities);
assert.ok(utilities.toXml);
assert.equal(typeof utilities.toXml, typeof function () {});
});
test('Test svgedit.utilities.toXml() function', function () {
expect(6);
const {toXml} = svgedit.utilities;
QUnit.test('Test svgedit.utilities.toXml() function', function (assert) {
assert.expect(6);
const {toXml} = utilities;
equals(toXml('a'), 'a');
equals(toXml('ABC_'), 'ABC_');
equals(toXml('PB&J'), 'PB&amp;J');
equals(toXml('2 < 5'), '2 &lt; 5');
equals(toXml('5 > 2'), '5 &gt; 2');
equals(toXml('\'<&>"'), '&#x27;&lt;&amp;&gt;&quot;');
assert.equal(toXml('a'), 'a');
assert.equal(toXml('ABC_'), 'ABC_');
assert.equal(toXml('PB&J'), 'PB&amp;J');
assert.equal(toXml('2 < 5'), '2 &lt; 5');
assert.equal(toXml('5 > 2'), '5 &gt; 2');
assert.equal(toXml('\'<&>"'), '&#x27;&lt;&amp;&gt;&quot;');
});
test('Test svgedit.utilities.fromXml() function', function () {
expect(6);
const {fromXml} = svgedit.utilities;
QUnit.test('Test svgedit.utilities.fromXml() function', function (assert) {
assert.expect(6);
const {fromXml} = utilities;
equals(fromXml('a'), 'a');
equals(fromXml('ABC_'), 'ABC_');
equals(fromXml('PB&amp;J'), 'PB&J');
equals(fromXml('2 &lt; 5'), '2 < 5');
equals(fromXml('5 &gt; 2'), '5 > 2');
equals(fromXml('&lt;&amp;&gt;'), '<&>');
assert.equal(fromXml('a'), 'a');
assert.equal(fromXml('ABC_'), 'ABC_');
assert.equal(fromXml('PB&amp;J'), 'PB&J');
assert.equal(fromXml('2 &lt; 5'), '2 < 5');
assert.equal(fromXml('5 &gt; 2'), '5 > 2');
assert.equal(fromXml('&lt;&amp;&gt;'), '<&>');
});
test('Test svgedit.utilities.encode64() function', function () {
expect(4);
const {encode64} = svgedit.utilities;
QUnit.test('Test svgedit.utilities.encode64() function', function (assert) {
assert.expect(4);
const {encode64} = utilities;
equals(encode64('abcdef'), 'YWJjZGVm');
equals(encode64('12345'), 'MTIzNDU=');
equals(encode64(' '), 'IA==');
equals(encode64('`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?'), 'YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8=');
assert.equal(encode64('abcdef'), 'YWJjZGVm');
assert.equal(encode64('12345'), 'MTIzNDU=');
assert.equal(encode64(' '), 'IA==');
assert.equal(encode64('`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?'), 'YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8=');
});
test('Test svgedit.utilities.decode64() function', function () {
expect(4);
const {decode64} = svgedit.utilities;
QUnit.test('Test svgedit.utilities.decode64() function', function (assert) {
assert.expect(4);
const {decode64} = utilities;
equals(decode64('YWJjZGVm'), 'abcdef');
equals(decode64('MTIzNDU='), '12345');
equals(decode64('IA=='), ' ');
equals(decode64('YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8='), '`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?');
assert.equal(decode64('YWJjZGVm'), 'abcdef');
assert.equal(decode64('MTIzNDU='), '12345');
assert.equal(decode64('IA=='), ' ');
assert.equal(decode64('YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8='), '`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?');
});
test('Test svgedit.utilities.convertToXMLReferences() function', function () {
expect(1);
QUnit.test('Test svgedit.utilities.convertToXMLReferences() function', function (assert) {
assert.expect(1);
const convert = svgedit.utilities.convertToXMLReferences;
equals(convert('ABC'), 'ABC');
// equals(convert('<27>BC'), '&#192;BC');
const convert = utilities.convertToXMLReferences;
assert.equal(convert('ABC'), 'ABC');
// assert.equal(convert('<27>BC'), '&#192;BC');
});
test('Test svgedit.utilities.bboxToObj() function', function () {
expect(5);
const {bboxToObj} = svgedit.utilities;
QUnit.test('Test svgedit.utilities.bboxToObj() function', function (assert) {
assert.expect(5);
const {bboxToObj} = utilities;
const rect = svg.createSVGRect();
rect.x = 1;
@@ -136,185 +145,189 @@ test('Test svgedit.utilities.bboxToObj() function', function () {
rect.height = 4;
const obj = bboxToObj(rect);
equals(typeof obj, typeof {});
equals(obj.x, 1);
equals(obj.y, 2);
equals(obj.width, 3);
equals(obj.height, 4);
assert.equal(typeof obj, typeof {});
assert.equal(obj.x, 1);
assert.equal(obj.y, 2);
assert.equal(obj.width, 3);
assert.equal(obj.height, 4);
});
test('Test getUrlFromAttr', function () {
expect(4);
QUnit.test('Test getUrlFromAttr', function (assert) {
assert.expect(4);
equal(svgedit.utilities.getUrlFromAttr('url(#foo)'), '#foo');
equal(svgedit.utilities.getUrlFromAttr('url(somefile.svg#foo)'), 'somefile.svg#foo');
equal(svgedit.utilities.getUrlFromAttr('url("#foo")'), '#foo');
equal(svgedit.utilities.getUrlFromAttr('url("#foo")'), '#foo');
assert.equal(utilities.getUrlFromAttr('url(#foo)'), '#foo');
assert.equal(utilities.getUrlFromAttr('url(somefile.svg#foo)'), 'somefile.svg#foo');
assert.equal(utilities.getUrlFromAttr('url("#foo")'), '#foo');
assert.equal(utilities.getUrlFromAttr('url("#foo")'), '#foo');
});
test('Test getPathBBox', function () {
if (svgedit.browser.supportsPathBBox()) return;
const doc = svgedit.utilities.text2xml('<svg></svg>');
const path = doc.createElementNS(svgedit.NS.SVG, 'path');
QUnit.test('Test getPathBBox', function (assert) {
if (browser.supportsPathBBox()) {
assert.expect(0);
return;
}
assert.expect(3);
const doc = utilities.text2xml('<svg></svg>');
const path = doc.createElementNS(NS.SVG, 'path');
path.setAttributeNS(null, 'd', 'm0,0l5,0l0,5l-5,0l0,-5z');
const bb = svgedit.utilities.getPathBBox(path);
equals(typeof bb, 'object', 'BBox returned object');
ok(bb.x && !isNaN(bb.x));
ok(bb.y && !isNaN(bb.y));
const bb = utilities.getPathBBox(path);
assert.equal(typeof bb, 'object', 'BBox returned object');
assert.ok(bb.x && !isNaN(bb.x));
assert.ok(bb.y && !isNaN(bb.y));
});
test('Test getPathDFromSegments', function () {
const {getPathDFromSegments} = svgedit.utilities;
QUnit.test('Test getPathDFromSegments', function (assert) {
const {getPathDFromSegments} = utilities;
const doc = svgedit.utilities.text2xml('<svg></svg>');
const path = doc.createElementNS(svgedit.NS.SVG, 'path');
const doc = utilities.text2xml('<svg></svg>');
const path = doc.createElementNS(NS.SVG, 'path');
path.setAttributeNS(null, 'd', 'm0,0l5,0l0,5l-5,0l0,-5z');
let d = getPathDFromSegments([
['M', [1, 2]],
['Z', []]
]);
equal(d, 'M1,2 Z');
assert.equal(d, 'M1,2 Z');
d = getPathDFromSegments([
['M', [1, 2]],
['M', [3, 4]],
['Z', []]
]);
equal(d, 'M1,2 M3,4 Z');
assert.equal(d, 'M1,2 M3,4 Z');
d = getPathDFromSegments([
['M', [1, 2]],
['C', [3, 4, 5, 6]],
['Z', []]
]);
equal(d, 'M1,2 C3,4 5,6 Z');
assert.equal(d, 'M1,2 C3,4 5,6 Z');
});
test('Test getPathDFromElement', function () {
const {getPathDFromElement} = svgedit.utilities;
QUnit.test('Test getPathDFromElement', function (assert) {
const {getPathDFromElement} = utilities;
let elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 Z'}
element: 'path',
attr: {id: 'path', d: 'M0,1 Z'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M0,1 Z');
assert.equal(getPathDFromElement(elem), 'M0,1 Z');
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
assert.equal(getPathDFromElement(elem), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'roundrect', 'x': '0', 'y': '1', 'rx': '2', 'ry': '3', 'width': '10', 'height': '11'}
element: 'rect',
attr: {id: 'roundrect', x: '0', y: '1', rx: '2', ry: '3', width: '10', height: '11'}
});
svgroot.appendChild(elem);
const closeEnough = new RegExp('M0,4 C0,2.3[0-9]* 0.9[0-9]*,1 2,1 L8,1 C9.0[0-9]*,1 10,2.3[0-9]* 10,4 L10,9 C10,10.6[0-9]* 9.08675799086758,12 8,12 L2,12 C0.9[0-9]*,12 0,10.6[0-9]* 0,9 L0,4 Z');
equal(closeEnough.test(getPathDFromElement(elem)), true);
assert.equal(closeEnough.test(getPathDFromElement(elem)), true);
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M0,1L5,6');
assert.equal(getPathDFromElement(elem), 'M0,1L5,6');
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'circle',
'attr': {'id': 'circle', 'cx': '10', 'cy': '11', 'rx': '5', 'ry': '10'}
element: 'circle',
attr: {id: 'circle', cx: '10', cy: '11', rx: '5', ry: '10'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 Z');
assert.equal(getPathDFromElement(elem), 'M10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 Z');
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'polyline',
'attr': {'id': 'polyline', 'points': '0,1 5,1 5,11 0,11'}
element: 'polyline',
attr: {id: 'polyline', points: '0,1 5,1 5,11 0,11'}
});
svgroot.appendChild(elem);
equal(getPathDFromElement(elem), 'M0,1 5,1 5,11 0,11');
assert.equal(getPathDFromElement(elem), 'M0,1 5,1 5,11 0,11');
svgroot.removeChild(elem);
equal(getPathDFromElement({tagName: 'something unknown'}), undefined);
assert.equal(getPathDFromElement({tagName: 'something unknown'}), undefined);
});
test('Test getBBoxOfElementAsPath', function () {
QUnit.test('Test getBBoxOfElementAsPath', function (assert) {
function getBBoxOfElementAsPath (elem, addSvgElementFromJson, pathActions) {
const bbox = svgedit.utilities.getBBoxOfElementAsPath(elem, addSvgElementFromJson, pathActions);
return svgedit.utilities.bboxToObj(bbox); // need this for QUnit equal() to work.
const bbox = utilities.getBBoxOfElementAsPath(elem, addSvgElementFromJson, pathActions);
return utilities.bboxToObj(bbox); // need this for assert.equal() to work.
}
let elem = mockCreateSVGElement({
'element': 'path',
'attr': {'id': 'path', 'd': 'M0,1 Z'}
element: 'path',
attr: {id: 'path', d: 'M0,1 Z'}
});
svgroot.appendChild(elem);
let bbox = getBBoxOfElementAsPath(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 0, height: 0});
assert.deepEqual(bbox, {x: 0, y: 1, width: 0, height: 0});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'}
});
svgroot.appendChild(elem);
bbox = getBBoxOfElementAsPath(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(elem);
elem = mockCreateSVGElement({
'element': 'line',
'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'}
});
svgroot.appendChild(elem);
bbox = getBBoxOfElementAsPath(elem, mockAddSvgElementFromJson, mockPathActions);
deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
svgroot.removeChild(elem);
// TODO: test element with transform. Need resetOrientation above to be working or mock it.
});
test('Test convertToPath rect', function () {
const {convertToPath} = svgedit.utilities;
QUnit.test('Test convertToPath rect', function (assert) {
const {convertToPath} = utilities;
const attrs = {
'fill': 'red',
'stroke': 'white',
fill: 'red',
stroke: 'white',
'stroke-width': '1',
'visibility': 'hidden'
visibility: 'hidden'
};
const elem = mockCreateSVGElement({
'element': 'rect',
'attr': {'id': 'rect', 'x': '0', 'y': '1', 'width': '5', 'height': '10'}
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'}
});
svgroot.appendChild(elem);
const path = convertToPath(elem, attrs, mockAddSvgElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory);
equal(path.getAttribute('d'), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
equal(path.getAttribute('visibilituy'), null);
equal(path.id, 'rect');
equal(path.parentNode, svgroot);
equal(elem.parentNode, null);
equal(mockHistorySubCommands.length, 2);
equal(mockCount.clearSelection, 1);
equal(mockCount.addToSelection, 1);
equal(mockCount.addCommandToHistory, 1);
assert.equal(path.getAttribute('d'), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
assert.equal(path.getAttribute('visibilituy'), null);
assert.equal(path.id, 'rect');
assert.equal(path.parentNode, svgroot);
assert.equal(elem.parentNode, null);
assert.equal(mockHistorySubCommands.length, 2);
assert.equal(mockCount.clearSelection, 1);
assert.equal(mockCount.addToSelection, 1);
assert.equal(mockCount.addCommandToHistory, 1);
svgroot.removeChild(path);
});
test('Test convertToPath unknown element', function () {
const {convertToPath} = svgedit.utilities;
QUnit.test('Test convertToPath unknown element', function (assert) {
const {convertToPath} = utilities;
const attrs = {
'fill': 'red',
'stroke': 'white',
fill: 'red',
stroke: 'white',
'stroke-width': '1',
'visibility': 'hidden'
visibility: 'hidden'
};
const elem = {
@@ -324,10 +337,10 @@ test('Test convertToPath unknown element', function () {
parentNode: svgroot
};
const path = convertToPath(elem, attrs, mockAddSvgElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory);
equal(path, null);
equal(elem.parentNode, svgroot);
equal(mockHistorySubCommands.length, 0);
equal(mockCount.clearSelection, 0);
equal(mockCount.addToSelection, 0);
equal(mockCount.addCommandToHistory, 0);
assert.equal(path, null);
assert.equal(elem.parentNode, svgroot);
assert.equal(mockHistorySubCommands.length, 0);
assert.equal(mockCount.clearSelection, 0);
assert.equal(mockCount.addToSelection, 0);
assert.equal(mockCount.addCommandToHistory, 0);
});

27
test/test1.html
View File

@@ -4,30 +4,11 @@
<meta charset="utf-8" />
<title>Unit Tests for SvgCanvas</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/jquerybbq/jquery.bbq.min.js"></script>
<script src="../editor/jquery-ui/jquery-ui-1.8.custom.min.js"></script>
<script src="../editor/svgedit.js"></script>
<script src="../editor/svgicons/jquery.svgicons.js"></script>
<script src="../editor/pathseg.js"></script>
<script src="../editor/browser.js"></script>
<script src="../editor/svgtransformlist.js"></script>
<script src="../editor/math.js"></script>
<script src="../editor/units.js"></script>
<script src="../editor/svgutils.js"></script>
<script src="../editor/sanitize.js"></script>
<script src="../editor/history.js"></script>
<script src="../editor/coords.js"></script>
<script src="../editor/recalculate.js"></script>
<script src="../editor/select.js"></script>
<script src="../editor/draw.js"></script>
<script src="../editor/path.js"></script>
<script src="../editor/svgcanvas.js"></script>
<script src="../editor/svg-editor.js"></script>
<script src="../editor/locale/locale.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="test1.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="test1.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for SvgCanvas</h1>
@@ -36,7 +17,7 @@
<ol id="qunit-tests"></ol>
<div id="svg_editor">
<div id="workarea">
<div id="svgcanvas" style="visibility:hidden"></div>
<div id="svgcanvas" style="visibility: hidden;"></div>
</div>
<div id="tools_left"></div>
<div class="tools_flyout"></div>

116
test/test1.js
View File

@@ -1,14 +1,14 @@
/* eslint-env qunit */
/* globals jQuery */
// import './pathseg.js';
import '../editor/pathseg.js';
import SvgCanvas from '../editor/svgcanvas.js';
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});
// helper functions
/*
@@ -20,7 +20,7 @@ const matrixString = function (m) {
};
*/
const svgCanvas = new jQuery.SvgCanvas(
const svgCanvas = new SvgCanvas(
document.getElementById('svgcanvas'), {
canvas_expansion: 3,
dimensions: [640, 480],
@@ -34,7 +34,7 @@ const svgCanvas = new jQuery.SvgCanvas(
opacity: 1
},
initOpacity: 1,
imgPath: 'images/',
imgPath: '../editor/images/',
langPath: 'locale/',
extPath: 'extensions/',
extensions: ['ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js'],
@@ -48,17 +48,17 @@ const
svgns = 'http://www.w3.org/2000/svg',
xlinkns = 'http://www.w3.org/1999/xlink';
module('Basic Module');
QUnit.module('Basic Module');
test('Test existence of SvgCanvas object', function () {
expect(1);
equal(typeof {}, typeof svgCanvas);
QUnit.test('Test existence of SvgCanvas object', function (assert) {
assert.expect(1);
assert.equal(typeof {}, typeof svgCanvas);
});
module('Path Module');
QUnit.module('Path Module');
test('Test path conversion from absolute to relative', function () {
expect(6);
QUnit.test('Test path conversion from absolute to relative', function (assert) {
assert.expect(6);
const convert = svgCanvas.pathActions.convertPath;
// TODO: Test these paths:
@@ -78,33 +78,33 @@ test('Test path conversion from absolute to relative', function () {
dAbs = p1.getAttribute('d'),
seglist = p1.pathSegList;
equal(p1.nodeName, 'path', "Expected 'path', got");
assert.equal(p1.nodeName, 'path', "Expected 'path', got");
equal(seglist.numberOfItems, 4, 'Number of segments before conversion');
assert.equal(seglist.numberOfItems, 4, 'Number of segments before conversion');
// verify segments before conversion
let curseg = seglist.getItem(0);
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'M', 'Before conversion, segment #1 type');
assert.equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'M', 'Before conversion, segment #1 type');
curseg = seglist.getItem(1);
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'L', 'Before conversion, segment #2 type');
assert.equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'L', 'Before conversion, segment #2 type');
curseg = seglist.getItem(3);
equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'Z', 'Before conversion, segment #3 type' + dAbs);
assert.equal(curseg.pathSegTypeAsLetter.toUpperCase(), 'Z', 'Before conversion, segment #3 type' + dAbs);
// convert and verify segments
let d = convert(p1, true);
equal(d, 'm100,100l100,0l-100,0z', 'Converted path to relative string');
assert.equal(d, 'm100,100l100,0l-100,0z', 'Converted path to relative string');
// TODO: see why this isn't working in SVG-edit
d = convert(p2, true);
QUnit.log({result: d});
console.log('Convert true', d);
d = convert(p2, false);
QUnit.log({result: d});
console.log('Convert false', d);
});
module('Import Module');
QUnit.module('Import Module');
test('Test import use', function () {
expect(3);
QUnit.test('Test import use', function (assert) {
assert.expect(3);
svgCanvas.setSvgString(
"<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='400' x='300'>" +
@@ -119,15 +119,15 @@ test('Test import use', function () {
fu = document.getElementById('foreign-use'),
nfu = document.getElementById('no-use');
equal((u && u.nodeName === 'use'), true, 'Did not import <use> element');
equal(fu, null, 'Removed <use> element that had a foreign href');
equal(nfu, null, 'Removed <use> element that had no href');
assert.equal((u && u.nodeName === 'use'), true, 'Did not import <use> element');
assert.equal(fu, null, 'Removed <use> element that had a foreign href');
assert.equal(nfu, null, 'Removed <use> element that had no href');
});
// This test shows that an element with an invalid attribute is still parsed in properly
// and only the attribute is not imported
test('Test invalid attribute', function () {
expect(2);
QUnit.test('Test invalid attribute', function (assert) {
assert.expect(2);
svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
@@ -137,13 +137,13 @@ test('Test invalid attribute', function () {
const t = document.getElementById('the-text');
equal(true, (t && t.nodeName === 'text'), 'Did not import <text> element');
equal(null, t.getAttribute('d'), 'Imported a <text> with a d attribute');
assert.equal((t && t.nodeName === 'text'), true, 'Did not import <text> element');
assert.equal(t.getAttribute('d'), null, 'Imported a <text> with a d attribute');
});
// This test makes sure import/export properly handles namespaced attributes
test('Test importing/exporting namespaced attributes', function () {
expect(5);
QUnit.test('Test importing/exporting namespaced attributes', function (assert) {
assert.expect(5);
/* const setStr = */ svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com" xmlns:foo="http://example.com">' +
'<image xlink:href="../editor/images/logo.png"/>' +
@@ -152,7 +152,7 @@ test('Test importing/exporting namespaced attributes', function () {
);
const attrVal = document.getElementById('se_test_elem').getAttributeNS('http://svg-edit.googlecode.com', 'foo');
equal(attrVal === 'bar', true, 'Preserved namespaced attribute on import');
assert.equal(attrVal === 'bar', true, 'Preserved namespaced attribute on import');
//
// console.log('getSvgString' in svgCanvas)
@@ -164,14 +164,14 @@ test('Test importing/exporting namespaced attributes', function () {
const hasFoo = output.includes('xmlns:foo=');
const hasAttr = output.includes('se:foo="bar"');
equal(hasAttr, true, 'Preserved namespaced attribute on export');
equal(hasXlink, true, 'Included xlink: xmlns');
equal(hasSe, true, 'Included se: xmlns');
equal(hasFoo, false, 'Did not include foo: xmlns');
assert.equal(hasAttr, true, 'Preserved namespaced attribute on export');
assert.equal(hasXlink, true, 'Included xlink: xmlns');
assert.equal(hasSe, true, 'Included se: xmlns');
assert.equal(hasFoo, false, 'Did not include foo: xmlns');
});
test('Test import math elements inside a foreignObject', function () {
expect(4);
QUnit.test('Test import math elements inside a foreignObject', function (assert) {
assert.expect(4);
/* const set = */ svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<foreignObject id="fo" width="24" height="26" font-size="24"><math id="m" display="inline" xmlns="http://www.w3.org/1998/Math/MathML">' +
@@ -188,14 +188,14 @@ test('Test import math elements inside a foreignObject', function () {
// see Bug https://bugs.webkit.org/show_bug.cgi?id=35042
const math = fo.firstChild;
equal(!!math, true, 'Math element exists');
equal(math.nodeName, 'math', 'Math element has the proper nodeName');
equal(math.getAttribute('id'), 'm', 'Math element has an id');
equal(math.namespaceURI, 'http://www.w3.org/1998/Math/MathML', 'Preserved MathML namespace');
assert.equal(!!math, true, 'Math element exists');
assert.equal(math.nodeName, 'math', 'Math element has the proper nodeName');
assert.equal(math.getAttribute('id'), 'm', 'Math element has an id');
assert.equal(math.namespaceURI, 'http://www.w3.org/1998/Math/MathML', 'Preserved MathML namespace');
});
test('Test importing SVG into existing drawing', function () {
expect(3);
QUnit.test('Test importing SVG into existing drawing', function (assert) {
assert.expect(3);
/* const doc = */ svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
@@ -217,13 +217,13 @@ test('Test importing SVG into existing drawing', function () {
circles = svgcontent.getElementsByTagNameNS(svgns, 'circle'),
rects = svgcontent.getElementsByTagNameNS(svgns, 'rect'),
ellipses = svgcontent.getElementsByTagNameNS(svgns, 'ellipse');
equal(circles.length, 2, 'Found two circles upon importing');
equal(rects.length, 1, 'Found one rectangle upon importing');
equal(ellipses.length, 1, 'Found one ellipse upon importing');
assert.equal(circles.length, 2, 'Found two circles upon importing');
assert.equal(rects.length, 1, 'Found one rectangle upon importing');
assert.equal(ellipses.length, 1, 'Found one ellipse upon importing');
});
test('Test importing SVG remaps IDs', function () {
expect(6);
QUnit.test('Test importing SVG remaps IDs', function (assert) {
assert.expect(6);
/* const doc = */ svgCanvas.setSvgString(
'<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">' +
@@ -255,13 +255,13 @@ test('Test importing SVG remaps IDs', function () {
defs = svgcontent.getElementsByTagNameNS(svgns, 'defs'),
// grads = svgcontent.getElementsByTagNameNS(svgns, 'linearGradient'),
uses = svgcontent.getElementsByTagNameNS(svgns, 'use');
notEqual(circles.item(0).id, 'svg_1', 'Circle not re-identified');
notEqual(rects.item(0).id, 'svg_3', 'Rectangle not re-identified');
assert.notEqual(circles.item(0).id, 'svg_1', 'Circle not re-identified');
assert.notEqual(rects.item(0).id, 'svg_3', 'Rectangle not re-identified');
// TODO: determine why this test fails in WebKit browsers
// equal(grads.length, 1, 'Linear gradient imported');
// assert.equal(grads.length, 1, 'Linear gradient imported');
const grad = defs.item(0).firstChild;
notEqual(grad.id, 'svg_2', 'Linear gradient not re-identified');
notEqual(circles.item(0).getAttribute('fill'), 'url(#svg_2)', 'Circle fill value not remapped');
notEqual(rects.item(0).getAttribute('stroke'), 'url(#svg_2)', 'Rectangle stroke value not remapped');
notEqual(uses.item(0).getAttributeNS(xlinkns, 'href'), '#svg_3');
assert.notEqual(grad.id, 'svg_2', 'Linear gradient not re-identified');
assert.notEqual(circles.item(0).getAttribute('fill'), 'url(#svg_2)', 'Circle fill value not remapped');
assert.notEqual(rects.item(0).getAttribute('stroke'), 'url(#svg_2)', 'Rectangle stroke value not remapped');
assert.notEqual(uses.item(0).getAttributeNS(xlinkns, 'href'), '#svg_3');
});

14
test/units_test.html
View File

@@ -4,22 +4,20 @@
<meta charset="utf-8" />
<title>Unit Tests for units.js</title>
<link rel="icon" type="image/png" href="../editor/images/logo.png"/>
<link rel="stylesheet" href="qunit/qunit.css"/>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"/>
<script src="../editor/jquery.min.js"></script>
<script src="../editor/svgedit.js"></script>
<script src="../editor/units.js"></script>
<script src="qunit/qunit.js"></script>
<script defer="defer" src="units_test.js"></script>
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<script type="module" src="units_test.js"></script>
</head>
<body>
<h1 id="qunit-header">Unit Tests for units.js</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="anchor" style="visibility:hidden"></div>
<div id="anchor" style="visibility: hidden;"></div>
<div id="elementsContainer">
<div id="uniqueId" style="visibility:hidden"></div>
<div id="nonUniqueId" style="visibility:hidden"></div>
<div id="uniqueId" style="visibility: hidden;"></div>
<div id="nonUniqueId" style="visibility: hidden;"></div>
</div>
</body>
</html>

90
test/units_test.js
View File

@@ -1,15 +1,15 @@
/* eslint-env qunit */
/* globals svgedit, equals */
import * as units from '../editor/units.js';
// log function
QUnit.log = function (details) {
QUnit.log(function (details) {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
};
});
function setUp () {
svgedit.units.init({
units.init({
getBaseUnit () { return 'cm'; },
getHeight () { return 600; },
getWidth () { return 800; },
@@ -18,64 +18,64 @@ function setUp () {
});
}
test('Test svgedit.units package', function () {
expect(2);
ok(svgedit.units);
equals(typeof svgedit.units, typeof {});
QUnit.test('Test svgedit.units package', function (assert) {
assert.expect(2);
assert.ok(units);
assert.equal(typeof units, typeof {});
});
test('Test svgedit.units.shortFloat()', function () {
expect(7);
QUnit.test('Test svgedit.units.shortFloat()', function (assert) {
assert.expect(7);
setUp();
ok(svgedit.units.shortFloat);
equals(typeof svgedit.units.shortFloat, typeof function () {});
assert.ok(units.shortFloat);
assert.equal(typeof units.shortFloat, typeof function () {});
const {shortFloat} = svgedit.units;
equals(shortFloat(0.00000001), 0);
equals(shortFloat(1), 1);
equals(shortFloat(3.45678), 3.4568);
equals(shortFloat(1.23443), 1.2344);
equals(shortFloat(1.23455), 1.2346);
const {shortFloat} = units;
assert.equal(shortFloat(0.00000001), 0);
assert.equal(shortFloat(1), 1);
assert.equal(shortFloat(3.45678), 3.4568);
assert.equal(shortFloat(1.23443), 1.2344);
assert.equal(shortFloat(1.23455), 1.2346);
});
test('Test svgedit.units.isValidUnit()', function () {
expect(18);
QUnit.test('Test svgedit.units.isValidUnit()', function (assert) {
assert.expect(18);
setUp();
ok(svgedit.units.isValidUnit);
equals(typeof svgedit.units.isValidUnit, typeof function () {});
assert.ok(units.isValidUnit);
assert.equal(typeof units.isValidUnit, typeof function () {});
const {isValidUnit} = svgedit.units;
ok(isValidUnit('0'));
ok(isValidUnit('1'));
ok(isValidUnit('1.1'));
ok(isValidUnit('-1.1'));
ok(isValidUnit('.6mm'));
ok(isValidUnit('-.6cm'));
ok(isValidUnit('6000in'));
ok(isValidUnit('6px'));
ok(isValidUnit('6.3pc'));
ok(isValidUnit('-0.4em'));
ok(isValidUnit('-0.ex'));
ok(isValidUnit('40.123%'));
const {isValidUnit} = units;
assert.ok(isValidUnit('0'));
assert.ok(isValidUnit('1'));
assert.ok(isValidUnit('1.1'));
assert.ok(isValidUnit('-1.1'));
assert.ok(isValidUnit('.6mm'));
assert.ok(isValidUnit('-.6cm'));
assert.ok(isValidUnit('6000in'));
assert.ok(isValidUnit('6px'));
assert.ok(isValidUnit('6.3pc'));
assert.ok(isValidUnit('-0.4em'));
assert.ok(isValidUnit('-0.ex'));
assert.ok(isValidUnit('40.123%'));
equals(isValidUnit('id', 'uniqueId', document.getElementById('uniqueId')), true);
equals(isValidUnit('id', 'newId', document.getElementById('uniqueId')), true);
equals(isValidUnit('id', 'uniqueId'), false);
equals(isValidUnit('id', 'uniqueId', document.getElementById('nonUniqueId')), false);
assert.equal(isValidUnit('id', 'uniqueId', document.getElementById('uniqueId')), true);
assert.equal(isValidUnit('id', 'newId', document.getElementById('uniqueId')), true);
assert.equal(isValidUnit('id', 'uniqueId'), false);
assert.equal(isValidUnit('id', 'uniqueId', document.getElementById('nonUniqueId')), false);
});
test('Test svgedit.units.convertUnit()', function () {
expect(4);
QUnit.test('Test svgedit.units.convertUnit()', function (assert) {
assert.expect(4);
setUp();
ok(svgedit.units.convertUnit);
equals(typeof svgedit.units.convertUnit, typeof function () {});
assert.ok(units.convertUnit);
assert.equal(typeof units.convertUnit, typeof function () {});
// cm in default setup
equals(svgedit.units.convertUnit(42), 1.1113);
equals(svgedit.units.convertUnit(42, 'px'), 42);
assert.equal(units.convertUnit(42), 1.1113);
assert.equal(units.convertUnit(42, 'px'), 42);
});