start a UI scenario to test various part of svgedit

cypress/integration/ui/__snapshots__/scenario.js.snap

@@ -9,10 +9,6 @@ exports[`use various parts of svg-edit > check tool_fhpath #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
-  fill="black"
-  fill-opacity="1"
-  stroke="none"
-  stroke-opacity="1"
 >
   <g class="layer" style="pointer-events:all">
     <title style="pointer-events:inherit">Layer 1</title>
@@ -71,10 +67,6 @@ exports[`use various parts of svg-edit > check tool_text #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
-  fill="black"
-  fill-opacity="1"
-  stroke="none"
-  stroke-opacity="1"
 >
   <g class="layer" style="pointer-events:all">
     <title style="pointer-events:inherit">Layer 1</title>
@@ -91,32 +83,212 @@ exports[`use various parts of svg-edit > check tool_text #0`] = `
     ></rect>
     <text
       fill="#000000"
+      stroke="#000000"
       stroke-width="0"
-      style="pointer-events:inherit"
+      style="pointer-events: inherit; cursor: move;"
       x="116"
-      y="86"
+      y="87"
       id="svg_1"
       font-size="24"
       font-family="serif"
       text-anchor="middle"
       xml:space="preserve"
-    ></text>
+      fill-opacity="1"
+      stroke-opacity="1"
+    >
+      A
+    </text>
+  </g>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_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>
+    <rect
+      id="rect"
+      fill="#FF0000"
+      height="70"
+      stroke="#000000"
+      stroke-width="5"
+      width="94"
+      x="69.5"
+      y="51.5"
+      style="pointer-events:inherit"
+    ></rect>
     <text
       fill="#000000"
+      stroke="#000000"
       stroke-width="0"
       style="pointer-events: inherit; cursor: move;"
       x="116"
-      y="86"
+      y="87"
-      id="svg_2"
+      id="svg_1"
       font-size="24"
       font-family="serif"
       text-anchor="middle"
       xml:space="preserve"
       fill-opacity="1"
-      stroke="none"
       stroke-opacity="1"
     >
-      12
+      A
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      style="pointer-events: inherit; cursor: move;"
+      x="136"
+      y="107"
+      font-size="24"
+      font-family="serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+    >
+      A
+    </text>
+  </g>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_italic #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>
+    <rect
+      id="rect"
+      fill="#FF0000"
+      height="70"
+      stroke="#000000"
+      stroke-width="5"
+      width="94"
+      x="69.5"
+      y="51.5"
+      style="pointer-events:inherit"
+    ></rect>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      style="pointer-events: inherit; cursor: move;"
+      x="116"
+      y="87"
+      id="svg_1"
+      font-size="24"
+      font-family="serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+    >
+      A
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      style="pointer-events: inherit; cursor: move;"
+      x="136"
+      y="107"
+      font-size="24"
+      font-family="serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+      font-style="italic"
+    >
+      A
+    </text>
+  </g>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_bold #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>
+    <rect
+      id="rect"
+      fill="#FF0000"
+      height="70"
+      stroke="#000000"
+      stroke-width="5"
+      width="94"
+      x="69.5"
+      y="51.5"
+      style="pointer-events:inherit"
+    ></rect>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      style="pointer-events: inherit; cursor: move;"
+      x="116"
+      y="87"
+      id="svg_1"
+      font-size="24"
+      font-family="serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+    >
+      A
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      style="pointer-events: inherit; cursor: move;"
+      x="136"
+      y="107"
+      font-size="24"
+      font-family="serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+      font-style="italic"
+      font-weight="bold"
+    >
+      A
     </text>
   </g>
 </svg>

cypress/integration/ui/scenario.js

@@ -20,24 +20,43 @@ describe('use various parts of svg-edit', function () {
     cy.get('#tool_source_save').click();
     cy.get('#svgcontent').toMatchSnapshot();
   });
-
+  /*
   it('check tool_fhpath', function () {
     cy.get('#tool_fhpath')
       .click({force: true});
-    cy.get('#svgcontent')
+    cy.get('#rect')
-      .trigger('mousedown', 'center')
+      .trigger('mousemove', 200, 200, {force: true})
-      .trigger('mousemove', {clientX: 200, clientY: 200, bubbles: true, cancelable: true})
+      .trigger('mousedown', 200, 200, {force: true})
-      .trigger('mousemove', {clientX: 20, clientY: 20, bubbles: true, cancelable: true})
+      .trigger('mousemove', 20, 20, {force: true})
       .trigger('mouseup', {force: true});
     cy.get('#svgcontent').toMatchSnapshot();
   });
+*/
   it('check tool_text', function () {
     cy.get('#tool_text')
       .click({force: true});
-    cy.get('#svgcontent')
+    cy.get('#rect')
-      .trigger('mousedown', 'center');
+      .trigger('mousedown', 'center', {force: true})
+      .trigger('mouseup', {force: true});
     // svgedit use the #text text field to capture the text
-    cy.get('#text').type('1234', {force: true});
+    // cy.get('#text').type('1234', {force: true});
+    cy.get('#text').type('A', {force: true});
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+
+  it('check tool_clone', function () {
+    cy.get('#tool_clone')
+      .click({force: true});
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_italic', function () {
+    cy.get('#tool_italic')
+      .click({force: true});
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_bold', function () {
+    cy.get('#tool_bold')
+      .click({force: true});
     cy.get('#svgcontent').toMatchSnapshot();
   });
 });