migration to vite/playwright

tests/unit/path.test.js

@@ -0,0 +1,182 @@
+/* globals SVGPathSeg */
+import 'pathseg'
+import { NS } from '../../packages/svgcanvas/core/namespaces.js'
+import * as utilities from '../../packages/svgcanvas/core/utilities.js'
+import * as pathModule from '../../packages/svgcanvas/core/path.js'
+import { Path, Segment } from '../../packages/svgcanvas/core/path-method.js'
+import { init as unitsInit } from '../../packages/svgcanvas/core/units.js'
+
+describe('path', function () {
+  /**
+  * @typedef {GenericArray} EditorContexts
+  * @property {module:path.EditorContext} 0
+  * @property {module:path.EditorContext} 1
+  */
+
+  /**
+  * @param {SVGSVGElement} [svg]
+  * @returns {EditorContexts}
+  */
+  function getMockContexts (svg) {
+    svg = svg || document.createElementNS(NS.SVG, 'svg')
+    const selectorParentGroup = document.createElementNS(NS.SVG, 'g')
+    selectorParentGroup.setAttribute('id', 'selectorParentGroup')
+    svg.append(selectorParentGroup)
+    return [
+      /**
+      * @implements {module:path.EditorContext}
+      */
+      {
+        getSvgRoot () { return svg },
+        getZoom () { return 1 }
+      },
+      /**
+      * @implements {module:utilities.EditorContext}
+      */
+      {
+        getDOMDocument () { return svg },
+        getDOMContainer () { return svg },
+        getSvgRoot () { return svg }
+      }
+    ]
+  }
+
+  it('Test svgedit.path.replacePathSeg', function () {
+    const path = document.createElementNS(NS.SVG, 'path')
+    path.setAttribute('d', 'M0,0 L10,11 L20,21Z')
+
+    const [mockPathContext, mockUtilitiesContext] = getMockContexts()
+    pathModule.init(mockPathContext)
+    utilities.init(mockUtilitiesContext)
+    new 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)
+  })
+
+  it('Test svgedit.path.Segment.setType simple', function () {
+    const path = document.createElementNS(NS.SVG, 'path')
+    path.setAttribute('d', 'M0,0 L10,11 L20,21Z')
+
+    const [mockPathContext, mockUtilitiesContext] = getMockContexts()
+    pathModule.init(mockPathContext)
+    utilities.init(mockUtilitiesContext)
+    new 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 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)
+  })
+
+  it('Test svgedit.path.Segment.setType with control points', function () {
+    // 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.append(path)
+
+    const [mockPathContext, mockUtilitiesContext] = getMockContexts(svg)
+    pathModule.init(mockPathContext)
+    utilities.init(mockUtilitiesContext)
+    const segment = new Segment(1, path.pathSegList.getItem(1))
+    segment.path = new 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])
+    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)
+  })
+
+  it('Test svgedit.path.Segment.move', function () {
+    const path = document.createElementNS(NS.SVG, 'path')
+    path.setAttribute('d', 'M0,0 L10,11 L20,21Z')
+
+    const [mockPathContext, mockUtilitiesContext] = getMockContexts()
+    pathModule.init(mockPathContext)
+    utilities.init(mockUtilitiesContext)
+    new 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 Segment(1, path.pathSegList.getItem(1))
+    segment.move(-3, 4)
+    assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L')
+    assert.equal(path.pathSegList.getItem(1).x, 7)
+    assert.equal(path.pathSegList.getItem(1).y, 15)
+  })
+
+  it('Test svgedit.path.Segment.moveCtrl', function () {
+    const path = document.createElementNS(NS.SVG, 'path')
+    path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z')
+
+    const [mockPathContext, mockUtilitiesContext] = getMockContexts()
+    pathModule.init(mockPathContext)
+    utilities.init(mockUtilitiesContext)
+    new Path(path) // eslint-disable-line no-new
+
+    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 Segment(1, path.pathSegList.getItem(1))
+    segment.moveCtrl(1, 100, -200)
+    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)
+  })
+
+  it('Test svgedit.path.convertPath', function () {
+    unitsInit({
+      getRoundDigits () { return 5 }
+    })
+
+    const path = document.createElementNS(NS.SVG, 'path')
+    path.setAttribute('d', 'M40,55h20v20')
+
+    const abs = pathModule.convertPath(path)
+    assert.equal(abs, 'M40,55L60,55L60,75')
+
+    const rel = pathModule.convertPath(path, true)
+    assert.equal(rel, 'm40,55l20,0l0,20')
+  })
+})