Merge pull request #1981 from usablica/better-e2e-tests

Adding Hints and Tour E2E tests

tests/cypress/e2e/hint/hideHints.cy.js

@@ -0,0 +1,18 @@
+context("HideHints", () => {
+  it("should hide all hints after calling hideHints()", () => {
+    cy.visit("./cypress/setup/index.html").then(async (window) => {
+      const instance = window.introJs();
+
+      instance.showHints();
+
+      cy.get(".introjs-hint").should("have.length", 4);
+
+      await instance.hideHints();
+
+      cy.get(".introjs-hint").should("have.length", 4);
+      cy.get(".introjs-hint").each((x) =>
+        cy.wrap(x).should("have.class", "introjs-hidehint")
+      );
+    });
+  });
+});

tests/cypress/e2e/hint/modal.cy.js

@@ -0,0 +1,60 @@
+context("Hints Modal", () => {
+  it("should be able to open and close hint modals", () => {
+    cy.visit("./cypress/setup/index.html").then((window) => {
+      const instance = window.introJs();
+
+      instance.showHints();
+
+      cy.get(".introjs-hint").first().click();
+
+      cy.get(".introjs-tooltip").should("have.length", 1);
+      cy.get(".introjs-tooltip").contains("fixed header");
+
+      cy.get(".introjs-button").click();
+
+      cy.get(".introjs-tooltip").should("have.length", 0);
+    });
+  });
+
+  it("should display the correct modal content", () => {
+    cy.visit("./cypress/setup/index.html").then((window) => {
+      const instance = window.introJs();
+
+      instance.showHints();
+
+      cy.get(".introjs-hint").first().click();
+
+      cy.get(".introjs-tooltip").contains("fixed header");
+
+      cy.get(".introjs-hint").eq(1).click();
+
+      cy.get(".introjs-tooltip").contains("a button");
+
+      cy.get(".introjs-hint").eq(2).click();
+
+      cy.get(".introjs-tooltip").contains("secondary header");
+
+      cy.get(".introjs-hint").eq(3).click();
+
+      cy.get(".introjs-tooltip").contains("this is the footer");
+    });
+  });
+
+  it("clicking on the same hint should close the modal", () => {
+    cy.visit("./cypress/setup/index.html").then((window) => {
+      const instance = window.introJs();
+
+      instance.showHints();
+
+      for (let i = 0; i < 3; i++) {
+        cy.get(".introjs-hint").first().click();
+
+        cy.get(".introjs-tooltip").contains("fixed header");
+
+        cy.get(".introjs-hint").first().click();
+
+        cy.get(".introjs-tooltip").should("not.exist");
+      }
+    });
+  });
+});

tests/cypress/e2e/hint/removeHints.cy.js

@@ -0,0 +1,32 @@
+context("RemoveHints", () => {
+  it("should remove all hints after calling removeHints()", () => {
+    cy.visit("./cypress/setup/index.html").then((window) => {
+      const instance = window.introJs().setOptions({
+        hints: [
+          {
+            element: "#fixed-parent",
+            hint: "header element",
+          },
+          {
+            element: "#clickable-button",
+            hint: "main button",
+          },
+          {
+            element: "#relative-parent",
+            hint: "relative parent",
+          },
+        ],
+      });
+
+      instance.showHints();
+
+      cy.get(".introjs-hint")
+        .should("have.length", 3)
+        .then(() => {
+          instance.removeHints();
+
+          cy.get(".introjs-hint").should("have.length", 0);
+        });
+    });
+  });
+});

tests/cypress/e2e/hint/showHints.cy.js

@@ -0,0 +1,53 @@
+context("ShowHints", () => {
+  it("should render all hints using the data-hint attributes", () => {
+    cy.visit("./cypress/setup/index.html").then((window) => {
+      const instance = window.introJs();
+
+      instance.showHints();
+
+      cy.get(".introjs-hint").should("have.length", 4);
+    });
+  });
+
+  it("should render all hints on the page with the given JSON options", () => {
+    cy.visit("./cypress/setup/index.html").then((window) => {
+      const instance = window.introJs().setOptions({
+        hints: [
+          {
+            element: "#fixed-parent",
+            hint: "header element",
+          },
+          {
+            element: "#clickable-button",
+            hint: "main button",
+          },
+          {
+            element: "#relative-parent",
+            hint: "relative parent",
+          },
+        ],
+      });
+
+      instance.showHints();
+
+      cy.get(".introjs-hint").should("have.length", 3);
+    });
+  });
+
+  it("should prefer JSON options over data-hint attributes", () => {
+    cy.visit("./cypress/setup/index.html").then((window) => {
+      const instance = window.introJs().setOptions({
+        hints: [
+          {
+            element: "#fixed-parent",
+            hint: "header element",
+          },
+        ],
+      });
+
+      instance.showHints();
+
+      cy.get(".introjs-hint").should("have.length", 1);
+    });
+  });
+});

tests/cypress/e2e/tour/exit.cy.js

@@ -29,4 +29,79 @@ context("Exit", () => {
       });
     });
   });
+
+  it("should exit the tour after clicking on the skip icon", () => {
+    cy.window().then((window) => {
+      const instance = window.introJs().setOptions({
+        steps: [
+          {
+            intro: "step one",
+          },
+          {
+            intro: "step two",
+          },
+        ],
+      });
+
+      instance.start();
+
+      cy.wait(500);
+
+      cy.get(".introjs-skipbutton").click();
+
+      cy.wait(500);
+
+      cy.get(".introjs-overlay").should("have.length", 0);
+    });
+  });
+
+  it("should exit the tour after clicking on the overlay layer", () => {
+    cy.window().then((window) => {
+      const instance = window.introJs().setOptions({
+        steps: [
+          {
+            intro: "step one",
+          },
+          {
+            intro: "step two",
+          },
+        ],
+      });
+
+      instance.start();
+
+      cy.wait(500);
+
+      cy.get(".introjs-overlay").click({ force: true });
+
+      cy.wait(500);
+
+      cy.get(".introjs-overlay").should("have.length", 0);
+    });
+  });
+
+  it("should not exit the tour after clicking on the tooltip layer", () => {
+    cy.window().then((window) => {
+      const instance = window.introJs().setOptions({
+        steps: [
+          {
+            intro: "step one",
+          },
+          {
+            intro: "step two",
+          },
+        ],
+      });
+
+      instance.start();
+
+      cy.wait(500);
+
+      cy.get(".introjs-tooltip").click({ force: true });
+
+      cy.wait(500);
+
+      cy.get(".introjs-overlay").should("have.length", 1);
+    });
+  });
 });

tests/cypress/e2e/tour/start.cy.js

@@ -1,4 +1,40 @@
 context("Start", () => {
+  it("should start the tour with data-intro attributes", () => {
+    cy.visit("./cypress/setup/index.html").then((window) => {
+      const instance = window.introJs();
+      instance.start();
+
+      cy.get(".introjs-tooltiptext").contains("first header step");
+      cy.nextStep();
+      cy.get(".introjs-tooltiptext").contains("second paragraph step");
+      cy.nextStep();
+      cy.get(".introjs-tooltiptext").contains("third header step");
+      cy.nextStep();
+      cy.get(".introjs-tooltiptext").contains("fourth header step");
+      cy.nextStep();
+      cy.get(".introjs-overlay").should("have.length", 0);
+    });
+  });
+
+  it("should prefer tour configs over data-intro attributes", () => {
+    cy.visit("./cypress/setup/index.html").then((window) => {
+      const instance = window.introJs().setOptions({
+        steps: [
+          {
+            intro: "step one",
+          },
+          {
+            intro: "step two",
+          },
+        ],
+      });
+
+      instance.start();
+
+      cy.get(".introjs-tooltiptext").contains("step one");
+    });
+  });
+
   it("should not throw an exception after calling start mulitple times", () => {
     cy.visit("./cypress/setup/index.html").then((window) => {
       const instance = window.introJs().setOptions({

tests/cypress/setup/index.html

@@ -49,6 +49,7 @@
           id="fixed-parent"
           class="pb-3 mb-4 border-bottom"
           style="position: fixed"
+          data-hint="fixed header"
         >
           <a
             id="fixed"
@@ -77,8 +78,10 @@
 
         <div class="mt-5 p-5 mb-4 bg-light rounded-3">
           <div class="container-fluid py-5" id="main-section">
-            <h1 class="display-5 fw-bold">Custom jumbotron</h1>
-            <p class="col-md-8 fs-4">
+            <h1 class="display-5 fw-bold" data-intro="first header step">
+              Custom jumbotron
+            </h1>
+            <p class="col-md-8 fs-4" data-intro="second paragraph step">
               Using a series of utilities, you can create this jumbotron, just
               like the one in previous versions of Bootstrap. Check out the
               examples below for how you can remix and restyle it to your
@@ -88,6 +91,7 @@ <h1 class="display-5 fw-bold">Custom jumbotron</h1>
               class="btn btn-primary btn-lg"
               type="button"
               id="clickable-button"
+              data-hint="a button"
               onclick="window.click()"
               onmouseover="this.innerHTML='Hovered'"
             >
@@ -103,7 +107,7 @@ <h1 class="display-5 fw-bold">Custom jumbotron</h1>
               id="relative-parent"
               style="position: relative"
             >
-              <h2>Change the background</h2>
+              <h2 data-intro="third header step">Change the background</h2>
               <p>
                 Swap the background-color utility and add a `.text-*` color
                 utility to mix up the jumbotron look. Then, mix and match with
@@ -126,7 +130,9 @@ <h2>Change the background</h2>
               id="absolute-parent"
               style="position: absolute"
             >
-              <h2>Add borders</h2>
+              <h2 data-intro="fourth header step" data-hint="secondary header">
+                Add borders
+              </h2>
               <p>
                 Or, keep it light and add a border for some added definition to
                 the boundaries of your content. Be sure to look under the hood
@@ -146,7 +152,12 @@ <h2>Add borders</h2>
           </div>
         </div>
 
-        <footer class="pt-3 mt-4 text-muted border-top">&copy; 2021</footer>
+        <footer
+          class="pt-3 mt-4 text-muted border-top"
+          data-hint="this is the footer"
+        >
+          &copy; 2021
+        </footer>
       </div>
     </main>