Several tests for elements that are added after configuration

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();