From 33c5546186e96463b234a5dec5c66ad03979f21a Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Wed, 25 Aug 2021 13:52:26 +0530
Subject: [PATCH 1/4] #623 cypress new test cases added

---
 .../ui/__snapshots__/scenario2.js.snap        | 433 ++++++++++++++++++
 cypress/integration/ui/scenario2.js           |  93 ++++
 2 files changed, 526 insertions(+)
 create mode 100644 cypress/integration/ui/__snapshots__/scenario2.js.snap
 create mode 100644 cypress/integration/ui/scenario2.js

diff --git a/cypress/integration/ui/__snapshots__/scenario2.js.snap b/cypress/integration/ui/__snapshots__/scenario2.js.snap
new file mode 100644
index 00000000..334820ff
--- /dev/null
+++ b/cypress/integration/ui/__snapshots__/scenario2.js.snap
@@ -0,0 +1,433 @@
+exports[`use all parts of svg-edit > check tool_source_set #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer"><title>Layer 1</title></g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_path #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.5"
+      style="pointer-events:inherit"
+      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      id="svg_1"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="1"
+      ></animate>
+    </path>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_fhellipse #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      id="svg_1"
+    ></path>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.5"
+      style="pointer-events:inherit"
+      cx="310"
+      cy="180"
+      rx="60"
+      ry="50"
+      id="svg_2"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="1"
+      ></animate>
+    </ellipse>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_ellipse_circle #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      id="svg_1"
+    ></path>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="310"
+      cy="180"
+      rx="60"
+      ry="50"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></ellipse>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.5"
+      style="pointer-events:inherit"
+      cx="125"
+      cy="200"
+      rx="55"
+      ry="25"
+      id="svg_3"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="1"
+      ></animate>
+    </ellipse>
+    <circle
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.5"
+      style="pointer-events:inherit"
+      cx="200"
+      cy="100"
+      r="30"
+      id="svg_4"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="1"
+      ></animate>
+    </circle>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_circle_change_fill_color #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      id="svg_1"
+    ></path>
+    <ellipse
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="5"
+      cx="310"
+      cy="180"
+      rx="60"
+      ry="50"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></ellipse>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="125"
+      cy="200"
+      rx="55"
+      ry="25"
+      id="svg_3"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></ellipse>
+    <circle
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="200"
+      cy="100"
+      r="30"
+      id="svg_4"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_circle_change_opacity #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      id="svg_1"
+    ></path>
+    <ellipse
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="5"
+      cx="310"
+      cy="180"
+      rx="60"
+      ry="50"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+      opacity="0.5"
+    ></ellipse>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="125"
+      cy="200"
+      rx="55"
+      ry="25"
+      id="svg_3"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></ellipse>
+    <circle
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="200"
+      cy="100"
+      r="30"
+      id="svg_4"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_circle_change_rotation #0`] = `
+<svg
+  id="svgcontent"
+  width="640"
+  height="480"
+  x="640"
+  y="480"
+  overflow="visible"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:se="http://svg-edit.googlecode.com"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="0 0 640 480"
+>
+  <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      id="svg_1"
+    ></path>
+    <ellipse
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="5"
+      cx="310"
+      cy="180"
+      rx="60"
+      ry="50"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+      opacity="0.5"
+      transform="rotate(10 310 180)"
+    ></ellipse>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="125"
+      cy="200"
+      rx="55"
+      ry="25"
+      id="svg_3"
+      fill-opacity="1"
+      stroke-opacity="1"
+      transform="rotate(15 125 200)"
+    ></ellipse>
+    <circle
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="200"
+      cy="100"
+      r="30"
+      id="svg_4"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_ellipse_change_rotation #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      id="svg_1"
+    ></path>
+    <ellipse
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="5"
+      cx="310"
+      cy="180"
+      rx="60"
+      ry="50"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+      opacity="0.5"
+    ></ellipse>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      cx="125"
+      cy="200"
+      rx="55"
+      ry="25"
+      id="svg_3"
+      fill-opacity="1"
+      stroke-opacity="1"
+      transform="rotate(25 125 200)"
+    ></ellipse>
+    <circle
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="200"
+      cy="100"
+      r="30"
+      id="svg_4"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
+  </g>
+</svg>
+`;
diff --git a/cypress/integration/ui/scenario2.js b/cypress/integration/ui/scenario2.js
new file mode 100644
index 00000000..c5003e8a
--- /dev/null
+++ b/cypress/integration/ui/scenario2.js
@@ -0,0 +1,93 @@
+import {
+  visitAndApproveStorage
+} from '../../support/ui-test-helper.js';
+
+const testSnapshot = () => {
+  cy.get('#svgcontent').cleanSnapshot();
+};
+
+describe('use all parts of svg-edit', function () {
+  before(() => {
+    visitAndApproveStorage();
+  });
+
+  it('check tool_source_set', function () {
+    cy.get('#tool_source').click({ force: true });
+    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>
+     </svg>`, { force: true, parseSpecialCharSequences: false });
+    cy.get('#tool_source_save').click({ force: true });
+    testSnapshot();
+  });
+  it('check tool_path', function () {
+    cy.get('#tool_path')
+      .click({ force: true });
+    cy.get('#svgcontent')
+      .trigger('mousedown', 50, 50, { force: true })
+      .trigger('mouseup', { force: true })
+      .trigger('mousemove', 100, 50, { force: true })
+      .trigger('mousedown', 100, 50, { force: true })
+      .trigger('mouseup', { force: true })
+      .trigger('mousemove', 75, 150, { force: true })
+      .trigger('mousedown', 75, 150, { force: true })
+      .trigger('mouseup', { force: true })
+      .trigger('mousemove', 0, 0, { force: true })
+      .trigger('mousedown', 0, 0, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_fhellipse', function () {
+    cy.get('#tool_fhellipse')
+      .click({ force: true });
+    cy.get('#svgcontent')
+      .trigger('mousedown', 200, 80, { force: true })
+      .trigger('mousemove', 320, 80, { force: true })
+      .trigger('mousemove', 320, 180, { force: true })
+      .trigger('mousemove', 200, 180, { force: true })
+      .trigger('mousemove', 200, 80, { force: true })
+      .trigger('mouseup', 200, 80, { force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_ellipse_circle', function () {
+    cy.get('#tool_ellipse').click({ force: true });
+    cy.get('#svgcontent')
+      .trigger('mousedown', 75, 150, { force: true })
+      .trigger('mousemove', 130, 175, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.get('#tool_circle').click({ force: true });
+    cy.get('#svgcontent')
+      .trigger('mousedown', 150, 50, { force: true })
+      .trigger('mousemove', 150, 80, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_circle_change_fill_color', function () {
+    cy.get('#svg_2').click({ force: true });
+    cy.get('#js-se-palette').find('.square').eq(8)
+      .click({ force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_circle_change_opacity', function () {
+    cy.get('#svg_2').click({ force: true });
+    // cy.get('#opacity').trigger('click', 'bottomRight');
+    for(let n = 0; n < 10; n ++){
+      cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
+        .click({ force: true });
+    }
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_ellipse_change_rotation', function () {
+    cy.get('#svg_3').click({ force: true });
+    // cy.get('#opacity').trigger('click', 'bottomRight');
+    for(let n = 0; n < 5; n ++){
+      cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+
+});

From ae4610edfb5341c028f3f737e08041bc9eef6e44 Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Wed, 25 Aug 2021 16:24:38 +0530
Subject: [PATCH 2/4] #623 circle, fhellipse and ellipse cypress test case
 added

---
 .../ui/__snapshots__/scenario2.js.snap        | 592 +++++++++++++-----
 cypress/integration/ui/scenario2.js           |  73 ++-
 2 files changed, 490 insertions(+), 175 deletions(-)

diff --git a/cypress/integration/ui/__snapshots__/scenario2.js.snap b/cypress/integration/ui/__snapshots__/scenario2.js.snap
index 334820ff..241be924 100644
--- a/cypress/integration/ui/__snapshots__/scenario2.js.snap
+++ b/cypress/integration/ui/__snapshots__/scenario2.js.snap
@@ -14,7 +14,7 @@ exports[`use all parts of svg-edit > check tool_source_set #0`] = `
 </svg>
 `;
 
-exports[`use all parts of svg-edit > check tool_path #0`] = `
+exports[`use all parts of svg-edit > check tool_circle #0`] = `
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
@@ -28,13 +28,15 @@ exports[`use all parts of svg-edit > check tool_path #0`] = `
 >
   <g class="layer" style="pointer-events:all">
     <title style="pointer-events:inherit">Layer 1</title>
-    <path
+    <circle
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       opacity="0.5"
       style="pointer-events:inherit"
-      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      cx="150"
+      cy="150"
+      r="111.80339887498948"
       id="svg_1"
     >
       <animate
@@ -44,7 +46,7 @@ exports[`use all parts of svg-edit > check tool_path #0`] = `
         fill="freeze"
         to="1"
       ></animate>
-    </path>
+    </circle>
   </g>
 </svg>
 `;
@@ -63,22 +65,26 @@ exports[`use all parts of svg-edit > check tool_fhellipse #0`] = `
 >
   <g class="layer" style="pointer-events:all">
     <title style="pointer-events:inherit">Layer 1</title>
-    <path
+    <circle
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       style="pointer-events:inherit"
-      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      cx="150"
+      cy="150"
+      r="111.80339887498948"
       id="svg_1"
-    ></path>
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
     <ellipse
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       opacity="0.5"
       style="pointer-events:inherit"
-      cx="310"
-      cy="180"
+      cx="299"
+      cy="169"
       rx="60"
       ry="50"
       id="svg_2"
@@ -95,7 +101,7 @@ exports[`use all parts of svg-edit > check tool_fhellipse #0`] = `
 </svg>
 `;
 
-exports[`use all parts of svg-edit > check tool_ellipse_circle #0`] = `
+exports[`use all parts of svg-edit > check tool_ellipse #0`] = `
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
@@ -109,21 +115,25 @@ exports[`use all parts of svg-edit > check tool_ellipse_circle #0`] = `
 >
   <g class="layer" style="pointer-events:all">
     <title style="pointer-events:inherit">Layer 1</title>
-    <path
+    <circle
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       style="pointer-events:inherit"
-      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      cx="150"
+      cy="150"
+      r="111.80339887498948"
       id="svg_1"
-    ></path>
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
     <ellipse
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       style="pointer-events:inherit"
-      cx="310"
-      cy="180"
+      cx="299"
+      cy="169"
       rx="60"
       ry="50"
       id="svg_2"
@@ -136,8 +146,8 @@ exports[`use all parts of svg-edit > check tool_ellipse_circle #0`] = `
       stroke-width="5"
       opacity="0.5"
       style="pointer-events:inherit"
-      cx="125"
-      cy="200"
+      cx="114"
+      cy="189"
       rx="55"
       ry="25"
       id="svg_3"
@@ -150,25 +160,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_circle #0`] = `
         to="1"
       ></animate>
     </ellipse>
-    <circle
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      opacity="0.5"
-      style="pointer-events:inherit"
-      cx="200"
-      cy="100"
-      r="30"
-      id="svg_4"
-    >
-      <animate
-        attributeName="opacity"
-        begin="indefinite"
-        dur="0.2"
-        fill="freeze"
-        to="1"
-      ></animate>
-    </circle>
   </g>
 </svg>
 `;
@@ -187,20 +178,24 @@ exports[`use all parts of svg-edit > check tool_circle_change_fill_color #0`] =
 >
   <g class="layer" style="pointer-events:all">
     <title style="pointer-events:inherit">Layer 1</title>
-    <path
+    <circle
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       style="pointer-events:inherit"
-      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      cx="150"
+      cy="150"
+      r="111.80339887498948"
       id="svg_1"
-    ></path>
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
     <ellipse
       fill="#ffff00"
       stroke="#000000"
       stroke-width="5"
-      cx="310"
-      cy="180"
+      cx="299"
+      cy="169"
       rx="60"
       ry="50"
       id="svg_2"
@@ -212,26 +207,14 @@ exports[`use all parts of svg-edit > check tool_circle_change_fill_color #0`] =
       stroke="#000000"
       stroke-width="5"
       style="pointer-events:inherit"
-      cx="125"
-      cy="200"
+      cx="114"
+      cy="189"
       rx="55"
       ry="25"
       id="svg_3"
       fill-opacity="1"
       stroke-opacity="1"
     ></ellipse>
-    <circle
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      style="pointer-events:inherit"
-      cx="200"
-      cy="100"
-      r="30"
-      id="svg_4"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></circle>
   </g>
 </svg>
 `;
@@ -250,20 +233,24 @@ exports[`use all parts of svg-edit > check tool_circle_change_opacity #0`] = `
 >
   <g class="layer" style="pointer-events:all">
     <title style="pointer-events:inherit">Layer 1</title>
-    <path
+    <circle
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       style="pointer-events:inherit"
-      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      cx="150"
+      cy="150"
+      r="111.80339887498948"
       id="svg_1"
-    ></path>
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
     <ellipse
       fill="#ffff00"
       stroke="#000000"
       stroke-width="5"
-      cx="310"
-      cy="180"
+      cx="299"
+      cy="169"
       rx="60"
       ry="50"
       id="svg_2"
@@ -276,94 +263,14 @@ exports[`use all parts of svg-edit > check tool_circle_change_opacity #0`] = `
       stroke="#000000"
       stroke-width="5"
       style="pointer-events:inherit"
-      cx="125"
-      cy="200"
+      cx="114"
+      cy="189"
       rx="55"
       ry="25"
       id="svg_3"
       fill-opacity="1"
       stroke-opacity="1"
     ></ellipse>
-    <circle
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      style="pointer-events:inherit"
-      cx="200"
-      cy="100"
-      r="30"
-      id="svg_4"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></circle>
-  </g>
-</svg>
-`;
-
-exports[`use all parts of svg-edit > check tool_circle_change_rotation #0`] = `
-<svg
-  id="svgcontent"
-  width="640"
-  height="480"
-  x="640"
-  y="480"
-  overflow="visible"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:se="http://svg-edit.googlecode.com"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  viewBox="0 0 640 480"
->
-  <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
-  <g class="layer" style="pointer-events:all">
-    <title style="pointer-events:inherit">Layer 1</title>
-    <path
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      style="pointer-events:inherit"
-      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
-      id="svg_1"
-    ></path>
-    <ellipse
-      fill="#ffff00"
-      stroke="#000000"
-      stroke-width="5"
-      cx="310"
-      cy="180"
-      rx="60"
-      ry="50"
-      id="svg_2"
-      fill-opacity="1"
-      stroke-opacity="1"
-      opacity="0.5"
-      transform="rotate(10 310 180)"
-    ></ellipse>
-    <ellipse
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      style="pointer-events:inherit"
-      cx="125"
-      cy="200"
-      rx="55"
-      ry="25"
-      id="svg_3"
-      fill-opacity="1"
-      stroke-opacity="1"
-      transform="rotate(15 125 200)"
-    ></ellipse>
-    <circle
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      style="pointer-events:inherit"
-      cx="200"
-      cy="100"
-      r="30"
-      id="svg_4"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></circle>
   </g>
 </svg>
 `;
@@ -382,20 +289,24 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_rotation #0`] = `
 >
   <g class="layer" style="pointer-events:all">
     <title style="pointer-events:inherit">Layer 1</title>
-    <path
+    <circle
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       style="pointer-events:inherit"
-      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      cx="150"
+      cy="150"
+      r="111.80339887498948"
       id="svg_1"
-    ></path>
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
     <ellipse
       fill="#ffff00"
       stroke="#000000"
       stroke-width="5"
-      cx="310"
-      cy="180"
+      cx="299"
+      cy="169"
       rx="60"
       ry="50"
       id="svg_2"
@@ -407,27 +318,400 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_rotation #0`] = `
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
-      cx="125"
-      cy="200"
+      cx="114"
+      cy="189"
       rx="55"
       ry="25"
       id="svg_3"
       fill-opacity="1"
       stroke-opacity="1"
-      transform="rotate(25 125 200)"
+      transform="rotate(25 114 189)"
+    ></ellipse>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_ellipse_change_blur #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <circle
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="150"
+      cy="150"
+      r="111.80339887498948"
+      id="svg_1"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
+    <ellipse
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="5"
+      cx="299"
+      cy="169"
+      rx="60"
+      ry="50"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+      opacity="0.5"
+    ></ellipse>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      cx="114"
+      cy="189"
+      rx="55"
+      ry="25"
+      id="svg_3"
+      fill-opacity="1"
+      stroke-opacity="1"
+      transform="rotate(25 114 189)"
+      filter="url(#svg_3_blur)"
+    ></ellipse>
+  </g>
+  <defs>
+    <filter id="svg_3_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_ellipse_change_cx_cy_coordinate #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <circle
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="150"
+      cy="150"
+      r="111.80339887498948"
+      id="svg_1"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
+    <ellipse
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="5"
+      cx="299"
+      cy="169"
+      rx="60"
+      ry="50"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+      opacity="0.5"
+    ></ellipse>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      cx="139"
+      cy="214"
+      rx="55"
+      ry="25"
+      id="svg_3"
+      fill-opacity="1"
+      stroke-opacity="1"
+      filter="url(#svg_3_blur)"
+      transform="rotate(25 139 214)"
+    ></ellipse>
+  </g>
+  <defs>
+    <filter id="svg_3_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_ellipse_change_rx_ry_radius #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <circle
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="150"
+      cy="150"
+      r="111.80339887498948"
+      id="svg_1"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
+    <ellipse
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="5"
+      cx="299"
+      cy="169"
+      rx="60"
+      ry="50"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+      opacity="0.5"
+    ></ellipse>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      cx="139"
+      cy="214"
+      rx="80"
+      ry="50"
+      id="svg_3"
+      fill-opacity="1"
+      stroke-opacity="1"
+      filter="url(#svg_3_blur)"
+      transform="rotate(25 139 214)"
+    ></ellipse>
+  </g>
+  <defs>
+    <filter id="svg_3_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_ellipse_bring_to_back #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <ellipse
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="5"
+      cx="299"
+      cy="169"
+      rx="60"
+      ry="50"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+      opacity="0.5"
     ></ellipse>
     <circle
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       style="pointer-events:inherit"
-      cx="200"
-      cy="100"
-      r="30"
-      id="svg_4"
+      cx="150"
+      cy="150"
+      r="111.80339887498948"
+      id="svg_1"
       fill-opacity="1"
       stroke-opacity="1"
     ></circle>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      cx="139"
+      cy="214"
+      rx="80"
+      ry="50"
+      id="svg_3"
+      fill-opacity="1"
+      stroke-opacity="1"
+      filter="url(#svg_3_blur)"
+      transform="rotate(25 139 214)"
+    ></ellipse>
   </g>
+  <defs>
+    <filter id="svg_3_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_ellipse_bring_to_front #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <circle
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="150"
+      cy="150"
+      r="111.80339887498948"
+      id="svg_1"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      cx="139"
+      cy="214"
+      rx="80"
+      ry="50"
+      id="svg_3"
+      fill-opacity="1"
+      stroke-opacity="1"
+      filter="url(#svg_3_blur)"
+      transform="rotate(25 139 214)"
+    ></ellipse>
+    <ellipse
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="5"
+      cx="299"
+      cy="169"
+      rx="60"
+      ry="50"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+      opacity="0.5"
+    ></ellipse>
+  </g>
+  <defs>
+    <filter id="svg_3_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_ellipse_clone #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <circle
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      cx="150"
+      cy="150"
+      r="111.80339887498948"
+      id="svg_1"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></circle>
+    <ellipse
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      cx="139"
+      cy="214"
+      rx="80"
+      ry="50"
+      id="svg_3"
+      fill-opacity="1"
+      stroke-opacity="1"
+      filter="url(#svg_3_blur)"
+      transform="rotate(25 139 214)"
+    ></ellipse>
+    <ellipse
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="5"
+      cx="299"
+      cy="169"
+      rx="60"
+      ry="50"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+      opacity="0.5"
+    ></ellipse>
+    <ellipse
+      fill="#ffff00"
+      stroke="#000000"
+      stroke-width="5"
+      cx="319"
+      cy="189"
+      rx="60"
+      ry="50"
+      fill-opacity="1"
+      stroke-opacity="1"
+      opacity="0.5"
+      id="svg_4"
+    ></ellipse>
+  </g>
+  <defs>
+    <filter id="svg_3_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
 </svg>
 `;
diff --git a/cypress/integration/ui/scenario2.js b/cypress/integration/ui/scenario2.js
index c5003e8a..c16a71be 100644
--- a/cypress/integration/ui/scenario2.js
+++ b/cypress/integration/ui/scenario2.js
@@ -23,20 +23,12 @@ describe('use all parts of svg-edit', function () {
     cy.get('#tool_source_save').click({ force: true });
     testSnapshot();
   });
-  it('check tool_path', function () {
-    cy.get('#tool_path')
+  it('check tool_circle', function () {
+    cy.get('#tool_circle')
       .click({ force: true });
     cy.get('#svgcontent')
-      .trigger('mousedown', 50, 50, { force: true })
-      .trigger('mouseup', { force: true })
-      .trigger('mousemove', 100, 50, { force: true })
-      .trigger('mousedown', 100, 50, { force: true })
-      .trigger('mouseup', { force: true })
-      .trigger('mousemove', 75, 150, { force: true })
-      .trigger('mousedown', 75, 150, { force: true })
-      .trigger('mouseup', { force: true })
-      .trigger('mousemove', 0, 0, { force: true })
-      .trigger('mousedown', 0, 0, { force: true })
+      .trigger('mousedown', 150, 150, { force: true })
+      .trigger('mousemove', 250, 200, { force: true })
       .trigger('mouseup', { force: true });
     cy.get('#svgcontent').toMatchSnapshot();
   });
@@ -52,17 +44,12 @@ describe('use all parts of svg-edit', function () {
       .trigger('mouseup', 200, 80, { force: true });
     cy.get('#svgcontent').toMatchSnapshot();
   });
-  it('check tool_ellipse_circle', function () {
+  it('check tool_ellipse', function () {
     cy.get('#tool_ellipse').click({ force: true });
     cy.get('#svgcontent')
       .trigger('mousedown', 75, 150, { force: true })
       .trigger('mousemove', 130, 175, { force: true })
       .trigger('mouseup', { force: true });
-    cy.get('#tool_circle').click({ force: true });
-    cy.get('#svgcontent')
-      .trigger('mousedown', 150, 50, { force: true })
-      .trigger('mousemove', 150, 80, { force: true })
-      .trigger('mouseup', { force: true });
     cy.get('#svgcontent').toMatchSnapshot();
   });
   it('check tool_circle_change_fill_color', function () {
@@ -73,7 +60,6 @@ describe('use all parts of svg-edit', function () {
   });
   it('check tool_circle_change_opacity', function () {
     cy.get('#svg_2').click({ force: true });
-    // cy.get('#opacity').trigger('click', 'bottomRight');
     for(let n = 0; n < 10; n ++){
       cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
         .click({ force: true });
@@ -82,12 +68,57 @@ describe('use all parts of svg-edit', function () {
   });
   it('check tool_ellipse_change_rotation', function () {
     cy.get('#svg_3').click({ force: true });
-    // cy.get('#opacity').trigger('click', 'bottomRight');
     for(let n = 0; n < 5; n ++){
       cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
         .click({ force: true });
     }
     cy.get('#svgcontent').toMatchSnapshot();
   });
-
+  it('check tool_ellipse_change_blur', function () {
+    cy.get('#svg_3').click({ force: true });
+    for(let n = 0; n < 10; n ++){
+      cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_ellipse_change_cx_cy_coordinate', function () {
+    cy.get('#svg_3').click({ force: true });
+    for(let n = 0; n < 25; n ++){
+      cy.get('#ellipse_cx').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    for(let n = 0; n < 25; n ++){
+      cy.get('#ellipse_cy').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_ellipse_change_rx_ry_radius', function () {
+    cy.get('#svg_3').click({ force: true });
+    for(let n = 0; n < 25; n ++){
+      cy.get('#ellipse_rx').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    for(let n = 0; n < 25; n ++){
+      cy.get('#ellipse_ry').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_ellipse_bring_to_back', function () {
+    cy.get('#svg_2').click({ force: true });
+    cy.get('#tool_move_bottom').click({ force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_ellipse_bring_to_front', function () {
+    cy.get('#svg_2').click({ force: true });
+    cy.get('#tool_move_top').click({ force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_ellipse_clone', function () {
+    cy.get('#svg_2').click({ force: true });
+    cy.get('#tool_clone').click({ force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
 });

From fcca6c46f5ca51747f39c78c4f31949ef5345ac8 Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Wed, 25 Aug 2021 20:26:30 +0530
Subject: [PATCH 3/4] #623 path cypress test cases

---
 .../ui/__snapshots__/scenario3.js.snap        | 158 ++++++++++++++++++
 cypress/integration/ui/scenario3.js           | 100 +++++++++++
 2 files changed, 258 insertions(+)
 create mode 100644 cypress/integration/ui/__snapshots__/scenario3.js.snap
 create mode 100644 cypress/integration/ui/scenario3.js

diff --git a/cypress/integration/ui/__snapshots__/scenario3.js.snap b/cypress/integration/ui/__snapshots__/scenario3.js.snap
new file mode 100644
index 00000000..597286a4
--- /dev/null
+++ b/cypress/integration/ui/__snapshots__/scenario3.js.snap
@@ -0,0 +1,158 @@
+exports[`use all parts of svg-edit > check tool_source_set #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer"><title>Layer 1</title></g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_path #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.5"
+      style="pointer-events:inherit"
+      d="M 50 50 L 150 100 L 125 200 L 50 50 z"
+      id="svg_1"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="1"
+      ></animate>
+    </path>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_path_change_node_xy #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      d="M75,75L150,100L125,200L75,75z"
+      id="svg_1"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></path>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_path_change_seg_type #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      d="M75,75L150,100L125,200C235.33333,330.33333 91.66667,116.66667 75,75z"
+      id="svg_1"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></path>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_path_change_clone_node #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      d="M201,246L150,100L125,200C180.16666,265.16666 297.83333,415.33333 273.625,373C249.41667,330.66667 209.33334,266.83334 201,246z"
+      id="svg_1"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></path>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_path_openclose #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      d="M201,246L150,100L125,200C180.16666,265.16666 297.83333,415.33333 273.625,373C249.41667,330.66667 209.33334,266.83334 201,246z"
+      id="svg_1"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></path>
+  </g>
+</svg>
+`;
diff --git a/cypress/integration/ui/scenario3.js b/cypress/integration/ui/scenario3.js
new file mode 100644
index 00000000..ca548f87
--- /dev/null
+++ b/cypress/integration/ui/scenario3.js
@@ -0,0 +1,100 @@
+import {
+  visitAndApproveStorage
+} from '../../support/ui-test-helper.js';
+
+const testSnapshot = () => {
+  cy.get('#svgcontent').cleanSnapshot();
+};
+
+describe('use all parts of svg-edit', function () {
+  before(() => {
+    visitAndApproveStorage();
+  });
+
+  it('check tool_source_set', function () {
+    cy.get('#tool_source').click({ force: true });
+    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>
+     </svg>`, { force: true, parseSpecialCharSequences: false });
+    cy.get('#tool_source_save').click({ force: true });
+    testSnapshot();
+  });
+  it('check tool_path', function () {
+    cy.get('#tool_path')
+      .click({ force: true });
+    cy.get('#svgcontent')
+      .trigger('mousedown', 50, 50, { force: true })
+      .trigger('mouseup', { force: true })
+      .trigger('mousemove', 100, 50, { force: true })
+      .trigger('mousedown', 100, 50, { force: true })
+      .trigger('mouseup', { force: true })
+      .trigger('mousemove', 75, 150, { force: true })
+      .trigger('mousedown', 75, 150, { force: true })
+      .trigger('mouseup', { force: true })
+      .trigger('mousemove', 0, 0, { force: true })
+      .trigger('mousedown', 0, 0, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_path_change_node_xy', function () {
+    cy.get('#svg_1').click({ force: true });
+    cy.get('#svg_1').dblclick({ force: true });
+    for(let n = 0; n < 25; n ++){
+      cy.get('#path_node_x').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    for(let n = 0; n < 25; n ++){
+      cy.get('#path_node_y').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_path_change_seg_type', function () {
+    cy.get('#svg_1').click({ force: true });
+    cy.get('#svg_1').dblclick({ force: true });
+    cy.get('#seg_type').select('6').should('have.value', '6');
+    cy.get('#ctrlpointgrip_3c1')
+      .trigger('mousedown', { force: true })
+      .trigger('mousemove', 130, 175, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_path_change_clone_node', function () {
+    cy.get('#svg_1').click({ force: true });
+    cy.get('#svg_1').dblclick({ force: true });
+    cy.get('#tool_node_clone').click({ force: true });
+    cy.get('#pathpointgrip_4')
+      .trigger('mousedown', { force: true })
+      .trigger('mousemove', 130, 175, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_path_openclose', function () {
+    cy.get('#tool_select').click({ force: true });
+    cy.get('#svg_1').click({ force: true });
+    cy.get('#svg_1').dblclick({ force: true });
+    cy.get('#tool_openclose_path').click({ force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  /* it('check tool_path_add_subpath', function () {
+    cy.get('#tool_add_subpath').click({ force: true });
+    cy.get('#svgcontent')
+      .trigger('mousedown', 0, 0, { force: true })
+      .trigger('mouseup', { force: true })
+      .trigger('mousemove', 100, 50, { force: true })
+      .trigger('mousedown', 100, 50, { force: true })
+      .trigger('mouseup', { force: true })
+      .trigger('mousemove', 75, 150, { force: true })
+      .trigger('mousedown', 75, 150, { force: true })
+      .trigger('mouseup', { force: true })
+      .trigger('mousemove', 0, 0, { force: true })
+      .trigger('mousedown', 0, 0, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.get('#tool_select').click({ force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  }); */
+});

From 9b57a0a0565ff3004444089e2dc4ce335a27b399 Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Wed, 25 Aug 2021 20:26:52 +0530
Subject: [PATCH 4/4] #623 test cases issue fixed

---
 src/editor/EditorStartup.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js
index 90a4bd57..1476ee80 100644
--- a/src/editor/EditorStartup.js
+++ b/src/editor/EditorStartup.js
@@ -358,17 +358,18 @@ class EditorStartup {
     };
 
     const liElems = this.$svgEditor.querySelectorAll('button, select, input:not(#text)');
+    const self = this;
     Array.prototype.forEach.call(liElems, function(el){
       el.addEventListener("focus", (e) => {
         inp = e.currentTarget;
-        this.uiContext = 'toolbars';
-        this.workarea.addEventListener('mousedown', unfocus);
+        self.uiContext = 'toolbars';
+        self.workarea.addEventListener('mousedown', unfocus);
       });
       el.addEventListener("blur", () => {
-        this.uiContext = 'canvas';
-        this.workarea.removeEventListener('mousedown', unfocus);
+        self.uiContext = 'canvas';
+        self.workarea.removeEventListener('mousedown', unfocus);
         // Go back to selecting text if in textedit mode
-        if (this.svgCanvas.getMode() === 'textedit') {
+        if (self.svgCanvas.getMode() === 'textedit') {
           $id('text').focus();
         }
       });