svgedit/test/svgutils_test.js

/* eslint-env qunit */
/* globals svgedit, equals */

// log function
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']);
  for (const attr in jsonMap['attr']) {
    elem.setAttribute(attr, jsonMap['attr'][attr]);
  }
  return elem;
}
function mockAddSvgElementFromJson (json) {
  const elem = mockCreateSVGElement(json);
  svgroot.appendChild(elem);
  return elem;
}
const mockPathActions = {resetOrientation () {}};
let mockHistorySubCommands = [];
const mockHistory = {
  BatchCommand () {
    return {
      addSubCommand (cmd) { mockHistorySubCommands.push(cmd); }
    };
  },
  RemoveElementCommand (elem, nextSibling, parent) {
    this.elem = elem;
    this.nextSibling = nextSibling;
    this.parent = parent;
  },
  InsertElementCommand (path) {
    this.path = path;
  }
};
const mockCount = {
  clearSelection: 0,
  addToSelection: 0,
  addCommandToHistory: 0
};
function mockClearSelection () { mockCount.clearSelection++; }
function mockAddToSelection () { mockCount.addToSelection++; }
function mockAddCommandToHistory () { mockCount.addCommandToHistory++; }

const svg = document.createElementNS(svgedit.NS.SVG, 'svg');
const sandbox = document.getElementById('sandbox');
const svgroot = mockCreateSVGElement({
  'element': 'svg',
  'attr': {'id': 'svgroot'}
});
sandbox.appendChild(svgroot);

module('svgedit.utilities', {
  setup () {
    mockHistorySubCommands = [];
    mockCount.clearSelection = 0;
    mockCount.addToSelection = 0;
    mockCount.addCommandToHistory = 0;
  },
  teardown () {
  }
});

test('Test svgedit.utilities package', function () {
  expect(3);

  ok(svgedit.utilities);
  ok(svgedit.utilities.toXml);
  equals(typeof svgedit.utilities.toXml, typeof function () {});
});

test('Test svgedit.utilities.toXml() function', function () {
  expect(6);
  const {toXml} = svgedit.utilities;

  equals(toXml('a'), 'a');
  equals(toXml('ABC_'), 'ABC_');
  equals(toXml('PB&J'), 'PB&J');
  equals(toXml('2 < 5'), '2 &lt; 5');
  equals(toXml('5 > 2'), '5 &gt; 2');
  equals(toXml('\'<&>"'), '&#x27;&lt;&amp;&gt;&quot;');
});

test('Test svgedit.utilities.fromXml() function', function () {
  expect(6);
  const {fromXml} = svgedit.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;'), '<&>');
});

test('Test svgedit.utilities.encode64() function', function () {
  expect(4);
  const {encode64} = svgedit.utilities;

  equals(encode64('abcdef'), 'YWJjZGVm');
  equals(encode64('12345'), 'MTIzNDU=');
  equals(encode64(' '), 'IA==');
  equals(encode64('`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?'), 'YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8=');
});

test('Test svgedit.utilities.decode64() function', function () {
  expect(4);
  const {decode64} = svgedit.utilities;

  equals(decode64('YWJjZGVm'), 'abcdef');
  equals(decode64('MTIzNDU='), '12345');
  equals(decode64('IA=='), ' ');
  equals(decode64('YH4hQCMkJV4mKigpLV89K1t7XX1cfDs6JyIsPC4+Lz8='), '`~!@#$%^&*()-_=+[{]}\\|;:\'",<.>/?');
});

test('Test svgedit.utilities.convertToXMLReferences() function', function () {
  expect(1);

  const convert = svgedit.utilities.convertToXMLReferences;
  equals(convert('ABC'), 'ABC');
  // equals(convert('<27>BC'), '&#192;BC');
});

test('Test svgedit.utilities.bboxToObj() function', function () {
  expect(5);
  const {bboxToObj} = svgedit.utilities;

  const rect = svg.createSVGRect();
  rect.x = 1;
  rect.y = 2;
  rect.width = 3;
  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);
});

test('Test getUrlFromAttr', function () {
  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');
});

test('Test getPathBBox', function () {
  if (svgedit.browser.supportsPathBBox()) return;
  const doc = svgedit.utilities.text2xml('<svg></svg>');
  const path = doc.createElementNS(svgedit.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));
});

test('Test getPathDFromSegments', function () {
  const {getPathDFromSegments} = svgedit.utilities;

  const doc = svgedit.utilities.text2xml('<svg></svg>');
  const path = doc.createElementNS(svgedit.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');

  d = getPathDFromSegments([
    ['M', [1, 2]],
    ['M', [3, 4]],
    ['Z', []]
  ]);
  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');
});

test('Test getPathDFromElement', function () {
  const {getPathDFromElement} = svgedit.utilities;

  let elem = mockCreateSVGElement({
    'element': 'path',
    'attr': {'id': 'path', 'd': 'M0,1 Z'}
  });
  svgroot.appendChild(elem);
  equal(getPathDFromElement(elem), 'M0,1 Z');
  svgroot.removeChild(elem);

  elem = mockCreateSVGElement({
    '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');
  svgroot.removeChild(elem);

  elem = mockCreateSVGElement({
    '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);
  svgroot.removeChild(elem);

  elem = mockCreateSVGElement({
    'element': 'line',
    'attr': {'id': 'line', 'x1': '0', 'y1': '1', 'x2': '5', 'y2': '6'}
  });
  svgroot.appendChild(elem);
  equal(getPathDFromElement(elem), 'M0,1L5,6');
  svgroot.removeChild(elem);

  elem = mockCreateSVGElement({
    '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');
  svgroot.removeChild(elem);

  elem = mockCreateSVGElement({
    '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');
  svgroot.removeChild(elem);

  equal(getPathDFromElement({tagName: 'something unknown'}), undefined);
});

test('Test getBBoxOfElementAsPath', function () {
  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.
  }

  let elem = mockCreateSVGElement({
    '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});
  svgroot.removeChild(elem);

  elem = mockCreateSVGElement({
    '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});
  svgroot.removeChild(elem);

  elem = mockCreateSVGElement({
    '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});
  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;
  const attrs = {
    'fill': 'red',
    'stroke': 'white',
    'stroke-width': '1',
    'visibility': 'hidden'
  };

  const elem = mockCreateSVGElement({
    '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);
  svgroot.removeChild(path);
});

test('Test convertToPath unknown element', function () {
  const {convertToPath} = svgedit.utilities;
  const attrs = {
    'fill': 'red',
    'stroke': 'white',
    'stroke-width': '1',
    'visibility': 'hidden'
  };

  const elem = {
    tagName: 'something unknown',
    id: 'something-unknown',
    getAttribute (attr) { return ''; },
    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);
});