Several tests for elements that are added after configuration

Author: gooddaytoday

tests/core/fetchIntroSteps.test.js

@@ -86,6 +86,39 @@ describe("fetchIntroSteps", () => {
     expect(steps[2].step).toBe(3);
   });
 
+  test("should throw an error on calling step.element if it is not exists yet and return element after adding", () => {
+    const targetElement = document.createElement("div");
+    const elId = "later_added";
+    const steps = fetchIntroSteps.call(
+      {
+        _options: {
+          tooltipPosition: "bottom",
+          steps: [
+            {
+              element: "#" + elId,
+            },
+          ],
+        },
+      },
+      targetElement
+    );
+
+    expect(steps.length).toBe(1);
+
+    try {
+      const element = steps[0].element; // jshint ignore:line
+    } catch (e) {
+      if (!e.message.includes("There is no element with given selector:"))
+        throw e;
+    }
+
+    const laterAdded = document.createElement("div");
+    laterAdded.setAttribute("id", elId);
+    document.body.appendChild(laterAdded);
+
+    expect(steps[0].element).toBe(laterAdded);
+  });
+
   test("should find the data-* elements from the DOM", () => {
     const targetElement = document.createElement("div");
 

tests/index.test.js

@@ -146,6 +146,37 @@ describe("intro", () => {
     );
   });
 
+  test("should find added later element", () => {
+    const latterAddedElId = "later_added";
+    var laterAddedEl;
+    var stepCounter = 0;
+    const intro = introJs()
+      .setOptions({
+        steps: [
+          {
+            intro: "step one",
+          },
+          {
+            intro: "later aded",
+            element: "#" + latterAddedElId,
+          },
+        ],
+      })
+      .onchange(function (el) {
+        if (el && stepCounter === 1) expect(el).toBe(laterAddedEl);
+        stepCounter++;
+      })
+      .start();
+
+    laterAddedEl = appendDummyElement();
+    laterAddedEl.setAttribute("id", latterAddedElId);
+
+    intro.nextStep();
+    const step = intro.currentStep();
+    expect(step).toBe(1);
+    expect(intro._introItems[step].element).toBe(laterAddedEl);
+  });
+
   test("should highlight the target element", () => {
     const p = appendDummyElement();
 
@@ -164,6 +195,34 @@ describe("intro", () => {
     expect(p.className).toContain("introjs-relativePosition");
   });
 
+  test("should highlight added later target element", (done) => {
+    const latterAddedElId = "later_added";
+    const intro = introJs()
+      .setOptions({
+        steps: [
+          {
+            intro: "step one",
+          },
+          {
+            intro: "later added",
+            element: "#" + latterAddedElId,
+          },
+        ],
+      })
+      .start();
+
+    const laterAdded = appendDummyElement();
+    laterAdded.setAttribute("id", latterAddedElId);
+
+    intro.nextStep();
+    setTimeout(() => {
+      // Waiting for animation for avoiding error
+      expect(laterAdded.className).toContain("introjs-showElement");
+      expect(laterAdded.className).toContain("introjs-relativePosition");
+      done();
+    }, 500);
+  });
+
   test("should not highlight the target element if queryString is incorrect", () => {
     const p = appendDummyElement();