tests(hover): Add more tests scenarios to hover command

Add some more complex tests scenarios to realHover command.
Remove dependency to external website for hover tests.

cypress/integration/hover.spec.ts

@@ -1,12 +1,101 @@
 describe("cy.realHover", () => {
-  beforeEach(() => {
-    cy.visit("https://example.cypress.io/commands/actions");
-  });
+  it('adds realHover command', () => {
+    expect(cy)
+        .property('realHover')
+        .to.be.a('function')
+  })
+  context('realHover tests', () => {
+    context('basic-tests', () => {
+      beforeEach(() => {
+        cy.visit('cypress/static/realHover/basic-tests.html');
+      })
 
-  it("hovers and applies styles from :hover pseudo-class", () => {
-    cy.get(".action-btn")
-      .should("have.css", "background-color", "rgb(217, 83, 79)")
-      .realHover()
-      .should("have.css", "background-color", "rgb(201, 48, 44)");
-  });
+      it('should trigger :hover CSS pseudo class', () => {
+        cy.get('#hoverButton').should('have.css', 'background-color', 'rgb(0, 0, 255)');
+        cy.get('#hoverButton')
+            .realHover()
+            .should('have.css', 'background-color', 'rgb(255, 0, 0)');
+      });
+      it('should call javascript listener events', () => {
+        cy.get('#hoverButton').realHover();
+        cy.get('#logging').contains('onmouseenter on #hoverButton');
+        cy.get('#logging').contains('onmouseover on #hoverButton');
+        cy.get('#logging').contains('onmousemove on #hoverButton');
+        cy.get('#logging').contains('onmouseout on #hoverButton').should('not.exist');
+        cy.get('#logging').contains('onmouseleave on #hoverButton').should('not.exist');
+      });
+    });
+    context('complex-tests', () => {
+      beforeEach(() => {
+        cy.visit('cypress/static/realHover/complex-tests.html');
+      })
+
+      it('should scroll to the element and hover it', () => {
+        cy.get('#scrolledButton').should('have.css', 'background-color', 'rgb(0, 0, 255)');
+        cy.get('#scrolledButton')
+            .realHover()
+            .should('have.css', 'background-color', 'rgb(255, 0, 0)');
+      });
+      it('should call javascript listener on scrolled button events', () => {
+        cy.get('#scrolledButton').realHover();
+        cy.get('#logging').contains('onmouseenter on #scrolledButton');
+        cy.get('#logging').contains('onmouseover on #scrolledButton');
+        cy.get('#logging').contains('onmousemove on #scrolledButton');
+        cy.get('#logging').contains('onmouseout on #scrolledButton').should('not.exist');
+        cy.get('#logging').contains('onmouseleave on #scrolledButton').should('not.exist');
+      });
+      it('should not send javascript event to parent container since the mouse teleport', () => {
+        cy.get('#scrolledButton').realHover();
+        cy.get('#logging').contains('onmouseenter on #scrolledButton');
+        cy.get('#logging').contains('onmouseover on #scrolledButton');
+        cy.get('#logging').contains('onmousemove on #scrolledButton');
+        cy.get('#logging').contains('onmouseenter on #containerScrolledButton').should('not.exist');
+        cy.get('#logging').contains('onmousemove on #containerScrolledButton').should('not.exist');
+        cy.get('#logging').contains('onmouseover on #containerScrolledButton').should('not.exist');
+        cy.get('#logging').contains('onmouseout on #scrolledButton').should('not.exist');
+        cy.get('#logging').contains('onmouseleave on #scrolledButton').should('not.exist');
+      });
+      it('should return fail to hover an non visible element', () => {
+        cy.get('#nonVisibleButton')
+            .should('have.css', 'background-color', 'rgb(0, 0, 255)');
+        // Hover shouldn't have changed the css since the element cannot be hovered
+        cy.get('#nonVisibleButton').realHover()
+            .should('have.css', 'background-color', 'rgb(0, 0, 255)');
+      });
+      it('should return fail to hover an 0px element', () => {
+        cy.get('#tooSmallButton')
+            .should('have.css', 'background-color', 'rgb(0, 0, 255)');
+        // Hover shouldn't have changed the css since the element cannot be hovered
+        cy.get('#tooSmallButton').realHover()
+            .should('have.css', 'background-color', 'rgb(0, 0, 255)');
+      });
+    });
+    context('shadowdom-tests', () => {
+      beforeEach(() => {
+        cy.visit('cypress/static/realHover/shadowdom-tests.html');
+      })
+
+      it('should hover element trough shadowDOM', () => {
+        cy.get('#hoverme', {includeShadowDom: true}).first()
+            .should('have.css', 'background-color', 'rgb(0, 0, 255)');
+        cy.get('#hoverme', {includeShadowDom: true}).first()
+            .realHover()
+            .should('have.css', 'background-color', 'rgb(255, 0, 0)');
+      });
+      it('should hover element recursively trough shadowDOM', () => {
+        cy.get('#recursivehoverme', {includeShadowDom: true}).first()
+            .should('have.css', 'background-color', 'rgb(0, 0, 255)');
+        cy.get('#recursivehoverme', {includeShadowDom: true}).first()
+            .realHover()
+            .should('have.css', 'background-color', 'rgb(255, 0, 0)');
+      })
+      it('should scroll then hover element trough shadowDOM', () => {
+        cy.get('#hoverme', {includeShadowDom: true}).last()
+            .should('have.css', 'background-color', 'rgb(0, 0, 255)');
+        cy.get('#hoverme', {includeShadowDom: true}).last()
+            .realHover()
+            .should('have.css', 'background-color', 'rgb(255, 0, 0)');
+      });
+    });
+  })
 });

cypress/static/realHover/basic-tests.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<style>
+    button {
+        background-color: rgb(0, 0, 255);
+        padding: 10px;
+    }
+
+    button:hover {
+        background-color: rgb(255, 0, 0);
+    }
+</style>
+<body>
+<div style="padding-left: 100px">
+    <button id="hoverButton"
+            onmousedown="appendEvent('onmousedown', '#hoverButton')"
+            onmouseenter="appendEvent('onmouseenter', '#hoverButton')"
+            onmouseleave="appendEvent('onmouseleave', '#hoverButton')"
+            onmousemove="appendEvent('onmousemove', '#hoverButton')"
+            onmouseout="appendEvent('onmouseout', '#hoverButton')"
+            onmouseover="appendEvent('onmouseover', '#hoverButton')"
+            onmouseup="appendEvent('onmouseup', '#hoverButton')"
+    >Hover me !
+    </button>
+</div>
+<div id="logging">
+    <p>Fired events:</p>
+</div>
+<script>
+    const logging = document.getElementById("logging");
+
+    function appendEvent(name, element) {
+        let p = document.createElement("p");
+        p.innerHTML = `${name} on ${element}`;
+        logging.appendChild(p);
+    }
+</script>
+</body>
+</html>

cypress/static/realHover/complex-tests.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<style>
+    button {
+        background-color: rgb(0, 0, 255);
+        padding: 10px;
+    }
+
+    button:hover {
+        background-color: rgb(255, 0, 0);
+    }
+</style>
+<body>
+<div style="padding-left: 100px; padding-top: 10px">
+    <button id="hoverButton"
+            onmousedown="appendEvent('onmousedown', '#hoverButton')"
+            onmouseenter="appendEvent('onmouseenter', '#hoverButton')"
+            onmouseleave="appendEvent('onmouseleave', '#hoverButton')"
+            onmousemove="appendEvent('onmousemove', '#hoverButton')"
+            onmouseout="appendEvent('onmouseout', '#hoverButton')"
+            onmouseover="appendEvent('onmouseover', '#hoverButton')"
+            onmouseup="appendEvent('onmouseup', '#hoverButton')"
+    >Hover me !
+    </button>
+</div>
+<div>
+    <div style="height: 100px; width: 500px; overflow: scroll">
+        <div id="containerScrolledButton"
+             onmousedown="appendEvent('onmousedown', '#containerScrolledButton')"
+             onmouseenter="appendEvent('onmouseenter', '#containerScrolledButton')"
+             onmouseleave="appendEvent('onmouseleave', '#containerScrolledButton')"
+             onmousemove="appendEvent('onmousemove', '#containerScrolledButton')"
+             onmouseout="appendEvent('onmouseout', '#containerScrolledButton')"
+             onmouseover="appendEvent('onmouseover', '#containerScrolledButton')"
+             onmouseup="appendEvent('onmouseup', '#containerScrolledButton')"
+             style="height: 500px; width: 500px; background-color: aqua"></div>
+        <button id="scrolledButton"
+                onmousedown="appendEvent('onmousedown', '#scrolledButton')"
+                onmouseenter="appendEvent('onmouseenter', '#scrolledButton')"
+                onmouseleave="appendEvent('onmouseleave', '#scrolledButton')"
+                onmousemove="appendEvent('onmousemove', '#scrolledButton')"
+                onmouseout="appendEvent('onmouseout', '#scrolledButton')"
+                onmouseover="appendEvent('onmouseover', '#scrolledButton')"
+                onmouseup="appendEvent('onmouseup', '#scrolledButton')"
+        >Scroll hover me !
+        </button>
+    </div>
+</div>
+<div>
+    <button id="nonVisibleButton" style="display: none">InvisibleButton</button>
+    <button id="tooSmallButton" style="height: 0px; width: 0px; padding: 0; border: 0;"></button>
+</div>
+<div id="logging">
+    <p>Fired events:</p>
+</div>
+<script>
+    const logging = document.getElementById("logging");
+
+    function appendEvent(name, element) {
+        let p = document.createElement("p");
+        p.innerHTML = `${name} on ${element}`;
+        logging.appendChild(p);
+    }
+</script>
+</body>
+</html>

cypress/static/realHover/shadowdom-tests.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Shadow DOM Tests</title>
+</head>
+<body>
+<div id="host"></div>
+<!--Padding to test if we can properly scroll onto host2-->
+<div style="height: 2500px; width: 150px; background-color: aqua"></div>
+<div id="host2"></div>
+<div id="logging">
+    <p>Fired events:</p>
+</div>
+<script>
+    function createAndAttachShadowRootElem(host) {
+        document
+            .getElementById(host)
+            .attachShadow({mode: 'open'})
+            .innerHTML = `
+        <style>
+            .shadow-button {
+                height: 100px;
+                width: 100px;
+                background-color: blue;
+            }
+
+            .shadow-button:hover {
+                background-color: red;
+            }
+        </style>
+        <div
+            id="hoverme"
+            class="shadow-button"
+            onmousedown="appendEvent('onmousedown', '${host}#hoverme')"
+            onmouseenter="appendEvent('onmouseenter', '${host}#hoverme')"
+            onmouseleave="appendEvent('onmouseleave', '${host}#hoverme')"
+            onmousemove="appendEvent('onmousemove', '${host}#hoverme')"
+            onmouseout="appendEvent('onmouseout', '${host}#hoverme')"
+            onmouseover="appendEvent('onmouseover', '${host}#hoverme')"
+            onmouseup="appendEvent('onmouseup', '${host}#hoverme')"
+        >SHADOW DOM</div>
+    `;
+        document
+            .getElementById(host)
+            .shadowRoot.getElementById('hoverme')
+            .innerHTML = `
+            <style>
+                .shadow-recursive-button {
+                    height: 50px;
+                    width: 50px;
+                    background-color: blue;
+                }
+
+                .shadow-recursive-button:hover {
+                    background-color: red;
+                }
+            </style>
+            <div
+                id="recursivehoverme"
+                class="shadow-recursive-button"
+                onmousedown="appendEvent('onmousedown', '${host}#recursivehoverme')"
+                onmouseenter="appendEvent('onmouseenter', '${host}#recursivehoverme')"
+                onmouseleave="appendEvent('onmouseleave', '${host}#recursivehoverme')"
+                onmousemove="appendEvent('onmousemove', '${host}#recursivehoverme')"
+                onmouseout="appendEvent('onmouseout', '${host}#recursivehoverme')"
+                onmouseover="appendEvent('onmouseover', '${host}#recursivehoverme')"
+                onmouseup="appendEvent('onmouseup', '${host}#recursivehoverme')"
+            >SHADOW Recursive DOM</div>
+        `;
+    }
+    createAndAttachShadowRootElem('host');
+    createAndAttachShadowRootElem('host2');
+    const logging = document.getElementById("logging");
+
+    function appendEvent(name, element) {
+        let p = document.createElement("p");
+        p.innerHTML = `${name} on ${element}`;
+        logging.appendChild(p);
+    }
+</script>
+</body>
+</html>