fix: hardcoded realMouseMove position (#235)

dmtrKovalenko · Oct 13, 2022 · 2b17cff · 2b17cff
1 parent 8367a5b
commit 2b17cff
Show file tree

Hide file tree

Showing 4 changed files with 174 additions and 75 deletions.
diff --git a/cypress/e2e/mouse.cy.ts b/cypress/e2e/mouse.cy.ts
@@ -349,3 +349,81 @@ describe("realMouseMove", () => {
       .should("eq", "1.8");
   });
 });
+
+describe("canvas drag with realMouseMove", () => {
+  it("realMouseMove accepts every explicit option.position", () => {
+    cy.visit("./cypress/fixtures/canvas-drag-svg.html");
+
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, 10, { position: "topLeft" })
+      .realMouseMove(30, 20, { position: "topLeft" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, 10, { position: "top" })
+      .realMouseMove(30, 20, { position: "top" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(-20, 10, { position: "topRight" })
+      .realMouseMove(-30, 20, { position: "topRight" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, 10, { position: "left" })
+      .realMouseMove(30, 20, { position: "left" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, 10, { position: "center" })
+      .realMouseMove(30, 20, { position: "center" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(-20, 10, { position: "right" })
+      .realMouseMove(-30, 20, { position: "right" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, -10, { position: "bottomLeft" })
+      .realMouseMove(30, -20, { position: "bottomLeft" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, -10, { position: "bottom" })
+      .realMouseMove(30, -20, { position: "bottom" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(-20, -10, { position: "bottomRight" })
+      .realMouseMove(-30, -20, { position: "bottomRight" })
+      .realMouseUp();
+
+    // If every element is clickable, they are not overlapping.
+    cy.get("polyline").click({multiple: true})
+  });
+
+  it("realMouseMove default option.position is 'topLeft'", () => {
+    /**
+     * The last polyline element should overlap the first, 
+     * so they should have the same `points` attributes
+     * but all other siblings should have unique `points` attributes,
+     * so they should be clickable.
+     */
+      cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, 10)
+      .realMouseMove(30, 20)
+      .realMouseUp();
+
+      cy.get('svg').within(() => {
+        cy.get(":first").should("have.attr", "points")
+          .then((first) => {
+            cy.get(":first").siblings().click({multiple: true})
+          cy.get(":last").should("have.attr", "points", first)
+        })
+      })
+    })
+
+});
diff --git a/cypress/fixtures/canvas-drag-svg.html b/cypress/fixtures/canvas-drag-svg.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <body style="margin: 0px; overflow: hidden; width: 100vw; height: 100vh">
+    <svg id="svg" height="100%" width="100%">
+    </svg>
+    <script>
+      const svg = document.getElementById('svg');
+      let mouseDown = false;
+      let count = 0;
+      let line
+      let coords = []
+      const colors = ["black", "gray", "lightgray", "red", "orange", "gold", "green", "blue", "purple", "violet"]
+
+      svg.addEventListener('mousedown', () => mouseDown = true);
+
+      svg.addEventListener('mousemove', (e) => mouseDown && coords.push([`${e.clientX}, ${e.clientY}`]));
+
+      svg.addEventListener('mouseup', () => {
+        if (coords.length > 1) {
+          line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline')
+          line.setAttribute("points", coords.join(" "))
+          line.setAttribute("stroke", colors[count] || "#000")
+          line.setAttribute("stroke-width", 10)
+          line.setAttribute("fill", "none")
+          svg.appendChild(line)
+          line = null
+          coords = []
+          count++
+        }
+        mouseDown = false
+      });  
+    </script>
+  </body>
+</html>
diff --git a/src/commands/mouseMove.ts b/src/commands/mouseMove.ts
@@ -28,7 +28,7 @@ export async function realMouseMove(
 ) {
   const basePosition= getCypressElementCoordinates(
     subject,
-    "topLeft",
+    options.position ?? "topLeft",
     options.scrollBehavior
   );