Merge pull request #36 from dmtrKovalenko/develop

1.3.0
dmtrKovalenko · Mar 5, 2021 · fd5b6c7 · fd5b6c7
2 parents 81780e1 + 0ecece9
commit fd5b6c7
Show file tree

Hide file tree

Showing 15 changed files with 539 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -71,7 +71,7 @@ If you are using typescript, also add the following to `cypress/tsconfig.json`
 
 ## API
 
-The idea of the commands – they should be as similar as possible to cypress default commands (like `cy.type`), but starts with `real` – `cy.realType`. 
+The idea of the commands – they should be as similar as possible to cypress default commands (like `cy.type`), but starts with `real` – `cy.realType`.
 
 Here is an overview of the available **real** event commands:
 - [cy.realClick](#cyrealclick)
@@ -90,7 +90,7 @@ cy.get("button").realClick();
 cy.get("button").realClick(options);
 ```
 
-Example: 
+Example:
 
 ```js
 cy.get("button").realClick({ position: "topLeft" }) // click on the top left corner of button
@@ -101,11 +101,11 @@ Options:
 
 - `Optional` **button**: \"none\" \| \"left\" \| \"right\" \| \"middle\" \| \"back\" \| \"forward\"
 - `Optional` **pointer**: \"mouse\" \| \"pen\"
-- `Optional` x coordinate to click **x**: number 
+- `Optional` x coordinate to click **x**: number
 - `Optional` y coordinate to click **y**: number
 - `Optional`  **position**: "topLeft" | "top" | "topRight" | "left"  | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
 
-> Make sure that `x` and `y` has a bigger priority than `position`. 
+> Make sure that `x` and `y` has a bigger priority than `position`.
 
 ## cy.realHover
 
@@ -124,7 +124,7 @@ Options:
 ## cy.realPress
 
 Fires native press event. It can fire one key event or the "shortcut" like Shift+Control+M.
-Make sure that event is global, it means that it is required to **firstly** focus any control before firing this event. 
+Make sure that event is global, it means that it is required to **firstly** focus any control before firing this event.
 
 ```jsx
 cy.realPress("Tab"); // switch the focus for a11y testing
@@ -154,7 +154,7 @@ cy.get("button").realTouch();
 cy.get("button").realTouch(options);
 ```
 
-##### Usage: 
+##### Usage:
 
 ```js
 cy.get("button").realTouch({ position: "topLeft" }) // touches the top left corner of button
@@ -166,6 +166,9 @@ Options:
 - `Optional` **x**: undefined \| number **`default`** 30
 - `Optional` **y**: undefined \| false \| true **`default`** true
 - `Optional` **position**: "topLeft" | "top" | "topRight" | "left"  | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
+- `Optional` **radius**: undefined \| number **`default`** 1
+- `Optional` **radiusX**: undefined \| number **`default`** 1
+- `Optional` **radiusY**: undefined \| number **`default`** 1
 
 ### cy.realType
 
@@ -204,7 +207,7 @@ Options:
 
 Runs a native swipe events. It means that **touch events** will be fired. Actually a sequence of `touchStart` -> `touchMove` -> `touchEnd`. It can perfectly swipe drawers and other tools [like this one](https://csb-dhe0i-qj8xxmx8y.vercel.app/).
 
-> Make sure to enable mobile viewport :) 
+> Make sure to enable mobile viewport :)
 
 
 ```js
@@ -229,7 +232,7 @@ cy.realType(direction, options);
 Options:
 
 - `Optional` **length**: undefined \| number **`default`** 10
-- `Optional` x coordinate to touch **x**: number 
+- `Optional` x coordinate to touch **x**: number
 - `Optional` y coordinate to touch **y**: number
 - `Optional` **touchPosition**: "topLeft" | "top" | "topRight" | "left"  | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
 

diff --git a/cypress/fixtures/frame-one.html b/cypress/fixtures/frame-one.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <body>
+    <main style="background-color: yellow; height: 100%; padding: 50px;">
+      <iframe style="width: 100%; height: 100%; " src="./frame-two.html"></iframe>
+    </main>
+  </body>
+
+  <style>
+    * { box-sizing: border-box; }
+    html, body { height: 100%; }
+    body { margin: 0; }
+  </style>
+</html>
+
diff --git a/cypress/fixtures/frame-two.html b/cypress/fixtures/frame-two.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+  <body>
+    <main style="background-color: blue; height: 100%; padding: 50px;">
+      <div id="target"></div>
+    </main>
+  </body>
+
+  <script type="text/javascript">
+    document.getElementById('target').onclick = function(e) { e.target.textContent = "clicked" };
+  </script>
+
+  <style>
+    #target { width: 100px; height: 100px; background: green; }
+    #target:hover { background: pink; }
+
+    * { box-sizing: border-box; }
+    html, body { height: 100%; }
+    body { margin: 0; }
+  </style>
+</html>
+
diff --git a/cypress/fixtures/iframe-page.html b/cypress/fixtures/iframe-page.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <body>
+    <main style="background-color: red; height: 100%; padding: 50px;">
+      <iframe style="width: 100%; height: 100%; " src="./frame-one.html"></iframe>
+    </main>
+  </body>
+
+  <style>
+    * { box-sizing: border-box; }
+    html, body { height: 100%; }
+    body { margin: 0; }
+  </style>
+</html>
diff --git a/cypress/integration/click.spec.ts b/cypress/integration/click.spec.ts
@@ -33,10 +33,146 @@ describe("cy.realClick", () => {
       .realClick({ x: 100, y: 185 })
       .realClick({ x: 125, y: 190 })
       .realClick({ x: 150, y: 185 })
-      .realClick({ x: 170, y: 165 } )
+      .realClick({ x: 170, y: 165 });
   });
 
   it("opens system native event on right click", () => {
     cy.get(".action-btn").realClick({ button: "right" });
   });
+
+  describe("scroll behavior", () => {
+    function getScreenEdges() {
+      const cypressAppWindow = window.parent.document.querySelector("iframe")
+        .contentWindow;
+      const windowTopEdge = cypressAppWindow.document.documentElement.scrollTop;
+      const windowBottomEdge = windowTopEdge + cypressAppWindow.innerHeight;
+      const windowCenter = windowTopEdge + cypressAppWindow.innerHeight / 2;
+
+      return {
+        top: windowTopEdge,
+        bottom: windowBottomEdge,
+        center: windowCenter,
+      };
+    }
+
+    function getElementEdges($el: JQuery) {
+      const $elTop = $el.offset().top;
+
+      return {
+        top: $elTop,
+        bottom: $elTop + $el.outerHeight(),
+      };
+    }
+
+    beforeEach(() => {
+      cy.window().scrollTo("top");
+    });
+
+    it("defaults to scrolling the element to the top of the viewport", () => {
+      cy.get("#action-canvas")
+        .realClick()
+        .then(($canvas: JQuery) => {
+          const { top: $elTop } = getElementEdges($canvas);
+          const { top: screenTop } = getScreenEdges();
+
+          expect($elTop).to.equal(screenTop);
+        });
+    });
+
+    it("scrolls the element to center of viewport", () => {
+      cy.get("#action-canvas")
+        .realClick({ scrollBehavior: "center" })
+        .then(($canvas: JQuery) => {
+          const { top: $elTop, bottom: $elBottom } = getElementEdges($canvas);
+          const { top: screenTop, bottom: screenBottom } = getScreenEdges();
+
+          const screenCenter = screenTop + (screenBottom - screenTop) / 2;
+
+          expect($elTop).to.equal(screenCenter - $canvas.outerHeight() / 2);
+          expect($elBottom).to.equal(screenCenter + $canvas.outerHeight() / 2);
+        });
+    });
+
+    it("scrolls the element to the top of the viewport", () => {
+      cy.get("#action-canvas")
+        .realClick({ scrollBehavior: "top" })
+        .then(($canvas: JQuery) => {
+          const { top: $elTop } = getElementEdges($canvas);
+          const { top: screenTop } = getScreenEdges();
+
+          expect($elTop).to.equal(screenTop);
+        });
+    });
+
+    it("scrolls the element to the bottom of the viewport", () => {
+      cy.get("#action-canvas")
+        .realClick({ scrollBehavior: "bottom" })
+        .then(($canvas: JQuery) => {
+          const { bottom: $elBottom } = getElementEdges($canvas);
+          const { bottom: screenBottom } = getScreenEdges();
+
+          expect($elBottom).to.equal(screenBottom);
+        });
+    });
+
+    it("scrolls the element to the nearest edge of the viewport", () => {
+      cy.window().scrollTo("bottom");
+
+      cy.get("#action-canvas")
+        .realClick({ scrollBehavior: "nearest" })
+        .then(($canvas: JQuery) => {
+          const { top: $elTop } = getElementEdges($canvas);
+          const { top: screenTop } = getScreenEdges();
+
+          expect($elTop).to.equal(screenTop);
+        });
+
+      cy.window().scrollTo("top");
+
+      cy.get("#action-canvas")
+        .realClick({ scrollBehavior: "nearest" })
+        .then(($canvas: JQuery) => {
+          const { bottom: $elBottom } = getElementEdges($canvas);
+          const { bottom: screenBottom } = getScreenEdges();
+
+          expect($elBottom).to.equal(screenBottom);
+        });
+    });
+  });
+});
+
+describe("iframe behavior", () => {
+  beforeEach(() => {
+    cy.visit("./cypress/fixtures/iframe-page.html");
+  });
+
+  it("clicks elements inside iframes", () => {
+    cy.get("iframe")
+      .then(($firstIframe) => {
+        return cy.wrap($firstIframe.contents().find("iframe"));
+      })
+      .then(($secondIframe) => {
+        return cy.wrap($secondIframe.contents().find("body"));
+      })
+      .within(() => {
+        cy.get("#target").contains("clicked").should("not.exist");
+        cy.get("#target").realClick().contains("clicked").should("exist");
+      });
+  });
+
+  it("clicks elements inside transformed iframes", () => {
+    cy.get("iframe")
+      .then(($firstIframe) => {
+        $firstIframe.css("transform", "scale(.5)");
+        return cy.wrap($firstIframe.contents().find("iframe"));
+      })
+      .then(($secondIframe) => {
+        $secondIframe.css("transform", "scale(.75)");
+        return cy.wrap($secondIframe.contents().find("body"));
+      })
+      .within(() => {
+        cy.get("#target").contains("clicked").should("not.exist");
+        cy.get("#target").realClick().contains("clicked").should("exist");
+      });
+  });
 });