svgedit/cypress/integration/unit/recalculate.js

import $ from 'jquery';
window.$ = $;
import { NS } from '../../../instrumented/common/namespaces.js';
import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
import * as coords from '../../../instrumented/svgcanvas/coords.js';
import * as recalculate from '../../../instrumented/svgcanvas/recalculate.js';


describe('recalculate', function () {
  // eslint-disable-next-line no-shadow
  const root = document.createElement('div');
  root.id = 'root';
  root.style.visibility = 'hidden';

  const svgroot = document.createElementNS(NS.SVG, 'svg');
  svgroot.id = 'svgroot';
  root.append(svgroot);
  const svg = document.createElementNS(NS.SVG, 'svg');
  svgroot.append(svg);

  const dataStorage = {
    _storage: new WeakMap(),
    put: function (element, key, obj) {
      if (!this._storage.has(element)) {
        this._storage.set(element, new Map());
      }
      this._storage.get(element).set(key, obj);
    },
    get: function (element, key) {
      return this._storage.get(element).get(key);
    },
    has: function (element, key) {
      return this._storage.has(element) && this._storage.get(element).has(key);
    },
    remove: function (element, key) {
      var ret = this._storage.get(element).delete(key);
      if (!this._storage.get(element).size === 0) {
        this._storage.delete(element);
      }
      return ret;
    }
  };

  let elemId = 1;

  /**
   * Initilize modules to set up the tests.
   * @returns {void}
   */
  function setUp() {
    utilities.init(
      /**
      * @implements {module:utilities.EditorContext}
      */
      {
        getSVGRoot() { return svg; },
        getDOMDocument() { return null; },
        getDOMContainer() { return null; },
        getDataStorage() { return dataStorage; }
      }
    );
    coords.init(
      /**
      * @implements {module:coords.EditorContext}
      */
      {
        getGridSnapping() { return false; },
        getDrawing() {
          return {
            getNextId() { return String(elemId++); }
          };
        },
        getDataStorage() { return dataStorage; }
      }
    );
    recalculate.init(
      /**
      * @implements {module:recalculate.EditorContext}
      */
      {
        getSVGRoot() { return svg; },
        getStartTransform() { return ''; },
        setStartTransform() { /* empty fn */ },
        getDataStorage() { return dataStorage; }
      }
    );
  }

  let elem;

  /**
   * Initialize for tests and set up `rect` element.
   * @returns {void}
   */
  function setUpRect() {
    setUp();
    elem = document.createElementNS(NS.SVG, 'rect');
    elem.setAttribute('x', '200');
    elem.setAttribute('y', '150');
    elem.setAttribute('width', '250');
    elem.setAttribute('height', '120');
    svg.append(elem);
  }

  /**
   * Initialize for tests and set up `text` element with `tspan` child.
   * @returns {void}
   */
  function setUpTextWithTspan() {
    setUp();
    elem = document.createElementNS(NS.SVG, 'text');
    elem.setAttribute('x', '200');
    elem.setAttribute('y', '150');

    const tspan = document.createElementNS(NS.SVG, 'tspan');
    tspan.setAttribute('x', '200');
    tspan.setAttribute('y', '150');

    const theText = 'Foo bar';
    tspan.append(theText);
    elem.append(tspan);
    svg.append(elem);
  }

  /**
   * Tear down the tests (empty the svg element).
   * @returns {void}
   */
  afterEach(() => {
    while (svg.hasChildNodes()) {
      svg.firstChild.remove();
    }
  });

  it('Test recalculateDimensions() on rect with identity matrix', function () {
    setUpRect();
    elem.setAttribute('transform', 'matrix(1,0,0,1,0,0)');

    recalculate.recalculateDimensions(elem);

    // Ensure that the identity matrix is swallowed and the element has no
    // transform on it.
    assert.equal(elem.hasAttribute('transform'), false);
  });

  it('Test recalculateDimensions() on rect with simple translate', function () {
    setUpRect();
    elem.setAttribute('transform', 'translate(100,50)');

    recalculate.recalculateDimensions(elem);

    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');
  });

  it('Test recalculateDimensions() on text w/tspan with simple translate', function () {
    setUpTextWithTspan();
    elem.setAttribute('transform', 'translate(100,50)');

    recalculate.recalculateDimensions(elem);

    // Ensure that the identity matrix is swallowed and the element has no
    // transform on it.
    assert.equal(elem.hasAttribute('transform'), false);
    assert.equal(elem.getAttribute('x'), '300');
    assert.equal(elem.getAttribute('y'), '200');

    const tspan = elem.firstElementChild;
    assert.equal(tspan.getAttribute('x'), '300');
    assert.equal(tspan.getAttribute('y'), '200');
  });

  // TODO: Since recalculateDimensions() and surrounding code is
  // probably the largest, most complicated and strange piece of
  // code in SVG-edit, we need to write a whole lot of unit tests
  // for it here.
});