cypress 10 migration (#777)

* cypress 10 migration

* fix lint

cypress/e2e/ui/issues/issue-359.cy.js

@@ -0,0 +1,26 @@
+import {
+  visitAndApproveStorage
+} from '../../../support/ui-test-helper.js'
+
+// See https://github.com/SVG-Edit/svgedit/issues/359
+describe('Fix issue 359', function () {
+  beforeEach(() => {
+    visitAndApproveStorage()
+  })
+
+  it('can undo without throwing', function () {
+    cy.get('#tool_source').click()
+    cy.get('#svg_source_textarea')
+      .type('{selectall}', { force: true })
+      .type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
+      <g class="layer">
+       <title>Layer 1</title>
+        <rect fill="#ffff00" height="70" width="165" x="179.5" y="146.5"/>
+      </g>
+     </svg>`, { parseSpecialCharSequences: false, force: true })
+    cy.get('#tool_source_save').click()
+    cy.get('#tool_undo').click()
+    cy.get('#tool_redo').click() // test also redo to make the test more comprehensive
+    // if the undo throws an error to the console, the test will fail
+  })
+})

cypress/e2e/ui/issues/issue-407.cy.js

@@ -0,0 +1,35 @@
+import {
+  visitAndApproveStorage
+} from '../../../support/ui-test-helper.js'
+
+// See https://github.com/SVG-Edit/svgedit/issues/407
+describe('Fix issue 407', function () {
+  beforeEach(() => {
+    visitAndApproveStorage()
+  })
+
+  it('can enter edit on text child', function () {
+    cy.get('#tool_source').click()
+    cy.get('#svg_source_textarea')
+      .type('{selectall}', { force: true })
+      .type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
+      <g class="layer">
+       <title>Layer 1</title>
+       <g>
+        <rect fill="#ffff00" height="70" width="165" x="179.5" y="146.5"/>
+        <text fill="#000000" id="a_text" text-anchor="middle" x="260.5" xml:space="preserve" y="192.5">hello</text>
+       </g>
+      </g>
+     </svg>`, { force: true, parseSpecialCharSequences: false })
+    cy.get('#tool_source_save').click()
+    cy.get('#svg_1').click().dblclick()
+    cy.get('#a_text').should('exist')
+    cy.get('#a_text')
+      .trigger('mousedown', { which: 1, force: true })
+      .trigger('mouseup', { force: true })
+      .dblclick({ force: true })
+    // svgedit use the #text text field to capture the text
+    cy.get('#text').type('1234', { force: true })
+    cy.get('#a_text').should('have.text', 'he1234llo')
+  })
+})

cypress/e2e/ui/issues/issue-408.cy.js

@@ -0,0 +1,29 @@
+import {
+  visitAndApproveStorage
+} from '../../../support/ui-test-helper.js'
+
+// See https://github.com/SVG-Edit/svgedit/issues/408
+describe('Fix issue 408', function () {
+  beforeEach(() => {
+    visitAndApproveStorage()
+  })
+
+  it('should not throw when showing/saving svg content', function () {
+    cy.get('#tool_source').click()
+    cy.get('#svg_source_textarea')
+      .type('{selectall}', { force: true })
+      .type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+      <g class="layer">
+       <title>Layer 1</title>
+       <g id="svg_6">
+        <rect fill="#FF0000" height="71" stroke="#000000" stroke-width="5" width="94" x="69.5" y="51.5"/>
+        <circle cx="117.5" cy="87.5" fill="#ffff00" r="19.84943" stroke="#000000" />
+       </g>
+      </g>
+     </svg>`, { force: true, parseSpecialCharSequences: false })
+    cy.get('#tool_source_save').click()
+    cy.get('#svg_6').click().dblclick() // change context
+    cy.get('#tool_source').click() // reopen tool_source
+    cy.get('#tool_source_save').should('exist') // The save button should be here if it does not throw
+  })
+})

cypress/e2e/ui/issues/issue-423.cy.js

@@ -0,0 +1,33 @@
+import {
+  visitAndApproveStorage
+} from '../../../support/ui-test-helper.js'
+
+// See https://github.com/SVG-Edit/svgedit/issues/423
+describe('Fix issue 423', function () {
+  beforeEach(() => {
+    visitAndApproveStorage()
+  })
+
+  it('should not throw when undoing the move', function () {
+    cy.get('#tool_source').click()
+    cy.get('#svg_source_textarea')
+      .type('{selectall}', { force: true })
+      .type(`<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+      <g class="layer">
+       <title>Layer 1</title>
+       <g class="layer" id="svg_1">
+        <clipPath id="svg_2">
+         <rect height="150" id="svg_3" width="50" x="50" y="50"/>
+        </clipPath>
+        <rect clip-path="url(#svg_2)" fill="#0033b5" height="174.9" id="TANK1" width="78" x="77.5" y="29"/>
+       </g>
+      </g>
+     </svg>`, { parseSpecialCharSequences: false, force: true })
+    cy.get('#tool_source_save').click({ force: true })
+    cy.get('#TANK1')
+      .trigger('mousedown', { force: true })
+      .trigger('mousemove', 50, 0, { force: true })
+      .trigger('mouseup', { force: true })
+    cy.get('#tool_undo').click({ force: true })
+  })
+})

cypress/e2e/ui/issues/issue-660.cy.js

@@ -0,0 +1,35 @@
+import {
+  visitAndApproveStorage
+} from '../../../support/ui-test-helper.js'
+
+// See https://github.com/SVG-Edit/svgedit/issues/660
+describe('Fix issue 660', function () {
+  beforeEach(() => {
+    visitAndApproveStorage()
+    cy.viewport(512, 512)
+  })
+  /** @todo: reenable this test when we understand why it is passing locally but not on ci */
+  it.skip('can resize text', function () {
+    cy.get('#tool_source').click()
+    cy.get('#svg_source_textarea')
+      .type('{selectall}', { force: true })
+      .type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
+      <g class="layer">
+       <title>Layer 1</title>
+       <text fill="#000000" id="a_text" text-anchor="middle" x="260.5" xml:space="preserve" y="192.5" font-size="40">hello</text>
+      </g>
+     </svg>`, { force: true, parseSpecialCharSequences: false })
+    cy.get('#tool_source_save').click({ force: true })
+    cy.get('#a_text').should('exist')
+    cy.get('#a_text')
+      .trigger('mousedown', { which: 1, force: true })
+      .trigger('mouseup', { force: true })
+    cy.get('#selectorGrip_resize_s')
+      .trigger('mousedown', { which: 1, force: true })
+      .trigger('mousemove', { clientX: 0, clientY: 600 })
+      .trigger('mouseup', { force: true })
+    // svgedit use the #text text field to capture the text
+    cy.get('#a_text').should('have.attr', 'transform')
+      .and('equal', 'matrix(1 0 0 4.54639 0 -540.825)') // Chrome 96 is matrix(1 0 0 4.17431 0 -325.367)
+  })
+})

cypress/e2e/ui/issues/issue-699.cy.js

@@ -0,0 +1,29 @@
+import {
+  visitAndApproveStorage
+} from '../../../support/ui-test-helper.js'
+
+// See https://github.com/SVG-Edit/svgedit/issues/699
+describe('Fix issue 699', function () {
+  beforeEach(() => {
+    visitAndApproveStorage()
+  })
+
+  it('should not throw error when undoing and redoing convert to path for a rectangle', function () {
+    cy.get('#tool_rect')
+      .click({ force: true })
+    cy.get('#svgcontent')
+      .trigger('mousedown', 150, 150, { force: true })
+      .trigger('mousemove', 250, 200, { force: true })
+      .trigger('mouseup', { force: true })
+    cy.get('#tool_topath') // Check if undo redo is correct for tool_topath with tool_rect
+      .click({ force: true })
+    cy.get('#tool_undo')
+      .click({ force: true })
+    cy.get('#tool_redo')
+      .click({ force: true })
+    cy.get('#tool_undo') // Do twice just to make sure
+      .click({ force: true })
+    cy.get('#tool_redo')
+      .click({ force: true })
+  })
+})

cypress/e2e/ui/issues/issue-726.cy.js

@@ -0,0 +1,41 @@
+import {
+  visitAndApproveStorage
+} from '../../../support/ui-test-helper.js'
+
+// See https://github.com/SVG-Edit/svgedit/issues/726
+describe('Fix issue 726', function () {
+  beforeEach(() => {
+    visitAndApproveStorage()
+  })
+
+  it('Send forward and send backward should move one layer at a time', function () {
+    cy.get('#tool_rect')
+      .click({ force: true })
+    cy.get('#svgcontent')
+      .trigger('mousedown', 250, 250, { force: true })
+      .trigger('mousemove', 350, 350, { force: true })
+      .trigger('mouseup', { force: true })
+    cy.wait(300)
+    cy.get('#tool_rect')
+      .click({ force: true })
+    cy.get('#svgcontent')
+      .trigger('mousedown', 10, 0, { force: true })
+      .trigger('mousemove', 100, 100, { force: true })
+      .trigger('mouseup', { force: true })
+    cy.wait(300)
+    cy.get('#tool_rect')
+      .click({ force: true })
+    cy.get('#svgcontent')
+      .trigger('mousedown', 10, 10, { force: true })
+      .trigger('mousemove', 100, 100, { force: true })
+      .trigger('mouseup', { force: true })
+    cy.wait(300)
+    cy.get('#svg_3')
+      .rightclick(0, 0, { force: true })
+    cy.get('a:contains("Send Backward")').click({ force: true })
+    cy.get('#svg_2').should(($div) => {
+      const id = $div[0].previousElementSibling.id
+      assert.equal(id, 'svg_3')
+    })
+  })
+})

cypress/e2e/ui/issues/issue-752.cy.js

@@ -0,0 +1,39 @@
+import {
+  visitAndApproveStorage
+} from '../../../support/ui-test-helper.js'
+
+// See https://github.com/SVG-Edit/svgedit/issues/752
+describe('Fix issue 752', function () {
+  beforeEach(() => {
+    visitAndApproveStorage()
+  })
+
+  it('Moving an unsnapped shape will not cause selector box misalignment', function () {
+    cy.get('#tool_rect')
+      .click({ force: true })
+    cy.get('#svgcontent')
+      .trigger('mousedown', 12, 12, { force: true })
+      .trigger('mousemove', 99, 99, { force: true })
+      .trigger('mouseup', { force: true })
+    cy.wait(300)
+    cy.get('#svg_1')
+      .click({ force: true })
+    cy.get('#tool_editor_prefs')
+      .click({ force: true })
+    cy.get('#grid_snapping_step')
+      .then(elem => {
+        elem.val('35')
+      })
+    cy.wait(300)
+    cy.get('#grid_snapping_on')
+      .click({ force: true })
+    cy.get('#tool_prefs_save')
+      .click({ force: true })
+    cy.get('#svg_1')
+      .trigger('mousedown', 20, 20, { force: true })
+      .trigger('mousemove', 203, 205, { force: true })
+      .trigger('mouseup', { force: true })
+
+    cy.get('#selectedBox0').should('have.attr', 'd', 'M174,174 L246,174 246,246 174,246z')
+  })
+})