e2e hint 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/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"
@@ -90,6 +91,7 @@ <h1 class="display-5 fw-bold" data-intro="first header step">
               class="btn btn-primary btn-lg"
               type="button"
               id="clickable-button"
+              data-hint="a button"
               onclick="window.click()"
               onmouseover="this.innerHTML='Hovered'"
             >
@@ -128,7 +130,9 @@ <h2 data-intro="third header step">Change the background</h2>
               id="absolute-parent"
               style="position: absolute"
             >
-              <h2 data-intro="fourth header step">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
@@ -148,7 +152,12 @@ <h2 data-intro="fourth header step">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>