chore: tour tests

Author: afshinm

tests/helper.js

@@ -49,3 +49,16 @@ export function doneButton() {
 export function tooltipText() {
   return find(".introjs-tooltiptext");
 }
+
+/**
+ * @returns {Element}
+ */
+export function appendDummyElement(name, text, style) {
+  const el = document.createElement(name || "p");
+  el.innerHTML = text || "hello world";
+  el.style = style;
+
+  document.body.appendChild(el);
+
+  return el;
+}

tests/index.test.js

@@ -7,6 +7,7 @@ import {
   prevButton,
   doneButton,
   tooltipText,
+  appendDummyElement,
 } from "./helper";
 
 describe("intro", () => {
@@ -139,4 +140,75 @@ describe("intro", () => {
       "introjs-relativePosition"
     );
   });
+
+  test("should highlight the target element", () => {
+    const p = appendDummyElement();
+
+    introJs()
+      .setOptions({
+        steps: [
+          {
+            intro: "step one",
+            element: document.querySelector("p"),
+          },
+        ],
+      })
+      .start();
+
+    expect(p.className).toContain("introjs-showElement");
+    expect(p.className).toContain("introjs-relativePosition");
+  });
+
+  test("should not highlight the target element if queryString is incorrect", () => {
+    const p = appendDummyElement();
+
+    introJs()
+      .setOptions({
+        steps: [
+          {
+            intro: "step one",
+            element: document.querySelector("div"),
+          },
+        ],
+      })
+      .start();
+
+    expect(p.className).not.toContain("introjs-showElement");
+    expect(className(".introjs-showElement")).toContain(
+      "introjsFloatingElement"
+    );
+  });
+
+  test("should not add relativePosition if target element is fixed or absolute", () => {
+    const absolute = appendDummyElement(
+      "h1",
+      "hello world",
+      "position: absolute"
+    );
+    const fixed = appendDummyElement("h2", "hello world", "position: fixed");
+
+    const intro = introJs();
+    intro
+      .setOptions({
+        steps: [
+          {
+            intro: "step one",
+            element: document.querySelector("h1"),
+          },
+          {
+            intro: "step two",
+            element: document.querySelector("h2"),
+          },
+        ],
+      })
+      .start();
+
+    expect(absolute.className).toContain("introjs-showElement");
+    expect(absolute.className).not.toContain("introjs-relativePosition");
+
+    intro.nextStep();
+
+    expect(fixed.className).toContain("introjs-showElement");
+    expect(fixed.className).not.toContain("introjs-relativePosition");
+  });
 });