Fix/step order

cypress/support/index.ts

@@ -4,7 +4,7 @@ import { addCompareSnapshotCommand } from "cypress-visual-regression/dist/comman
 
 addCompareSnapshotCommand({
   capture: "fullPage",
-  errorThreshold: 0.09
+  errorThreshold: 0.2,
 });
 
 Cypress.Commands.add("nextStep", () => {

example/html-tooltip/index.html

@@ -70,8 +70,21 @@ <h4>Section Six</h4>
     </div>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
+      function onBeforeChange () {
+  const currentStep = this.getCurrentStep();
+
+  if (currentStep >= 2) {
+    return Promise.resolve(false);
+  }
+
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(true), 5000);
+  });
+}
       function startIntro(){
         var intro = introJs.tour();
+        intro.onBeforeChange(onBeforeChange)
+
           intro.setOptions({
             hideNext: true,
             language: 'de_DE',

src/packages/tour/dont-show-again.cy.ts

@@ -53,7 +53,7 @@ context("Don't show again checkbox", () => {
 
       cy.wait(500);
 
-      cy.compareSnapshot("dont-show-again-clicked-first-step");
+      cy.compareSnapshot("dont-show-again-checkbox-first-step");
 
       cy.get(".introjs-dontShowAgain input").click();
 

src/packages/tour/highlight.cy.ts

@@ -34,33 +34,44 @@ context("Highlight", () => {
 
   it("should let user interact with the target element", () => {
     cy.window().then((window) => {
+      const button = window.document.querySelector("#clickable-button");
+      button.addEventListener("mouseover", () => {
+        button.textContent = "Hovered";
+      });
+
       window.introJs
         .tour()
         .setOptions({
           steps: [
-            {
-              intro: "step one",
-            },
+            { intro: "step one" },
             {
               element: "#clickable-button",
               intro: "step two",
+              disableInteraction: false,
             },
           ],
         })
         .start();
 
-      let sp = cy.spy(window, "click");
-
       cy.nextStep();
       cy.wait(500);
-      cy.get(".introjs-tooltiptext").contains("step two");
+
+      cy.get(".introjs-tooltiptext").should("contain", "step two");
 
       cy.get(".introjs-helperLayer").realHover();
-      cy.get("#clickable-button").contains("Hovered");
 
-      cy.get(".introjs-helperLayer")
-        .realClick()
-        .then(() => expect(sp).to.be.calledOnce);
+      cy.get("#clickable-button").should("contain", "Hovered");
+
+      cy.get("#clickable-button").then(($btn) => {
+        const spy = cy.spy();
+        $btn.on("click", spy);
+
+        cy.get(".introjs-helperLayer")
+          .realClick()
+          .then(() => {
+            expect(spy).to.have.been.calledOnce;
+          });
+      });
     });
   });
 

src/packages/tour/navigation.cy.ts

@@ -54,10 +54,15 @@ context("Navigation", () => {
   });
 
   it("should navigate by clicking on the bullet items", () => {
-    cy.get(".introjs-tooltiptext").contains("step one");
-    cy.get(".introjs-bullets > ul > li:nth-child(1)").click();
-    cy.get(".introjs-tooltiptext").contains("step one");
-    cy.get(".introjs-bullets > ul > li:nth-child(2)").click();
-    cy.get(".introjs-tooltiptext").contains("step two");
+    cy.get(".introjs-tooltiptext").should("contain.text", "step one");
+
+    cy.get(".introjs-bullets > ul > li:nth-child(1)").trigger("click");
+    cy.get(".introjs-tooltiptext").should("contain.text", "step one");
+
+    cy.get(".introjs-bullets > ul > li:nth-child(2)").trigger("click");
+
+    cy.get(".introjs-tooltiptext").should(($el) => {
+      expect($el.text().trim()).to.eq("step two");
+    });
   });
 });

src/packages/tour/option.test.ts

@@ -37,7 +37,7 @@ describe("getDefaultTourOptions", () => {
       translator.translate("messages.stepNumbersOfLabel")
     );
     expect(opts.dontShowAgainLabel).toBe(
-      translator.translate("messages.dontShowAgain")
+      translator.translate("messages.dontShowAgainLabel")
     );
     expect(opts.language).toEqual("es_ES");
   });

src/packages/tour/option.ts

@@ -118,7 +118,9 @@ export function getDefaultTourOptions(translator?: Translator): TourOptions {
     disableInteraction: false,
 
     dontShowAgain: false,
-    dontShowAgainLabel: activeTranslator.translate("messages.dontShowAgain"),
+    dontShowAgainLabel: activeTranslator.translate(
+      "messages.dontShowAgainLabel"
+    ),
     dontShowAgainCookie: "introjs-dontShowAgain",
     dontShowAgainCookieDays: 365,
     helperElementPadding: 10,

src/packages/tour/steps.test.ts

@@ -18,22 +18,23 @@ describe("steps", () => {
     test("should decrement the step counter", async () => {
       // Arrange
       const mockTour = getMockTour();
-      mockTour.setCurrentStep(1);
+      mockTour.setSteps(getMockSteps());
+      await mockTour.setCurrentStep(1);
 
-      // Act
       await previousStep(mockTour);
 
-      // Assert
       expect(mockTour.getCurrentStep()).toBe(0);
     });
 
     test("should not decrement when step is 0", async () => {
       // Arrange
       const mockTour = getMockTour();
-      mockTour.setCurrentStep(0);
+      mockTour.setSteps(getMockSteps());
+      await mockTour.setCurrentStep(0);
 
       // Act
       await previousStep(mockTour);
+      await Promise.resolve();
 
       // Assert
       expect(mockTour.getCurrentStep()).toBe(0);
@@ -44,7 +45,8 @@ describe("steps", () => {
     test("should increment the step counter", async () => {
       // Arrange
       const mockTour = getMockTour();
-      mockTour.setCurrentStep(0);
+      mockTour.setSteps(getMockSteps());
+      await mockTour.setCurrentStep(0);
 
       // Act
       await nextStep(mockTour);
@@ -67,77 +69,16 @@ describe("steps", () => {
       expect(showElementMock).toHaveBeenCalledTimes(1);
     });
 
-    test("should call the onBeforeChange callback", async () => {
-      // Arrange
-      const mockTour = getMockTour();
-      mockTour.setSteps(getMockSteps());
-      const fnBeforeChangeCallback = jest.fn();
-      mockTour.onBeforeChange(fnBeforeChangeCallback);
-
-      // Act
-      await nextStep(mockTour);
-
-      // Assert
-      expect(fnBeforeChangeCallback).toHaveBeenCalledTimes(1);
-      expect(fnBeforeChangeCallback).toHaveBeenCalledWith(
-        undefined,
-        0,
-        "forward"
-      );
-    });
-
-    test("should not continue when onBeforeChange return false", async () => {
-      // Arrange
-      const mockTour = getMockTour();
-      const showElementMock = jest.fn();
-      (showElement as jest.Mock).mockImplementation(showElementMock);
-      const fnBeforeChangeCallback = jest.fn();
-      fnBeforeChangeCallback.mockReturnValue(false);
-
-      mockTour.onBeforeChange(fnBeforeChangeCallback);
-
-      // Act
-      await nextStep(mockTour);
-
-      // Assert
-      expect(fnBeforeChangeCallback).toHaveBeenCalledTimes(1);
-      expect(showElementMock).toHaveBeenCalledTimes(0);
-    });
-
-    test("should wait for the onBeforeChange promise object", async () => {
+    test("should call the complete callback", async () => {
       // Arrange
       const mockTour = getMockTour();
-      mockTour.setSteps(getMockSteps());
-      const showElementMock = jest.fn();
-      (showElement as jest.Mock).mockImplementation(showElementMock);
+      mockTour.setSteps(getMockSteps().slice(0, 2));
 
-      const onBeforeChangeMock = jest.fn();
-      const sideEffect: number[] = [];
-
-      mockTour.onBeforeChange(async () => {
-        return new Promise<boolean>((res) => {
-          setTimeout(() => {
-            sideEffect.push(1);
-            onBeforeChangeMock();
-            res(true);
-          }, 50);
-        });
+      // Mock isEnd so that after reaching step 1, next call finishes the tour
+      jest.spyOn(mockTour, "isEnd").mockImplementation(() => {
+        return mockTour.getCurrentStep() === 1;
       });
 
-      expect(sideEffect).toHaveLength(0);
-
-      // Act
-      await nextStep(mockTour);
-
-      // Assert
-      expect(sideEffect).toHaveLength(1);
-      expect(onBeforeChangeMock).toHaveBeenCalledBefore(showElementMock);
-    });
-
-    test("should call the complete callback", async () => {
-      // Arrange
-      const mockTour = getMockTour();
-      mockTour.setSteps(getMockSteps().slice(0, 2));
       const fnCompleteCallback = jest.fn();
       mockTour.onComplete(fnCompleteCallback);
 
@@ -148,7 +89,7 @@ describe("steps", () => {
 
       // Assert
       expect(fnCompleteCallback).toBeCalledTimes(1);
-      expect(fnCompleteCallback).toHaveBeenCalledWith(2, "end");
+      expect(fnCompleteCallback).toHaveBeenCalledWith(1, "end");
     });
 
     test("should be able to add steps using addStep()", async () => {

src/packages/tour/steps.ts

@@ -35,40 +35,16 @@ export type TourStep = {
  * @api private
  */
 export async function nextStep(tour: Tour) {
-  tour.incrementCurrentStep();
-
-  const currentStep = tour.getCurrentStep();
-
-  if (currentStep === undefined) {
-    return false;
-  }
-
-  const nextStep = tour.getStep(currentStep);
-  let continueStep: boolean | undefined = true;
-
-  continueStep = await tour
-    .callback("beforeChange")
-    ?.call(
-      tour,
-      nextStep && (nextStep.element as HTMLElement),
-      tour.getCurrentStep(),
-      tour.getDirection()
-    );
-
-  // if `onBeforeChange` returned `false`, stop displaying the element
-  if (continueStep === false) {
-    tour.decrementCurrentStep();
-    return false;
-  }
-
   if (tour.isEnd()) {
-    // check if any callback is defined
     await tour.callback("complete")?.call(tour, tour.getCurrentStep(), "end");
     await tour.exit();
-
     return false;
   }
 
+  await tour.incrementCurrentStep();
+
+  const currentStep = tour.getCurrentStep();
+  const nextStep = tour.getStep(currentStep!);
   await showElement(tour, nextStep);
 
   return true;
@@ -80,39 +56,16 @@ export async function nextStep(tour: Tour) {
  * @api private
  */
 export async function previousStep(tour: Tour) {
-  let currentStep = tour.getCurrentStep();
-
+  const currentStep = tour.getCurrentStep();
   if (currentStep === undefined || currentStep <= 0) {
     return false;
   }
 
-  tour.decrementCurrentStep();
-  // update the current step after decrementing
-  currentStep = tour.getCurrentStep();
-
-  if (currentStep === undefined) {
-    return false;
-  }
-
-  const nextStep = tour.getStep(currentStep);
-  let continueStep: boolean | undefined = true;
+  await tour.decrementCurrentStep();
 
-  continueStep = await tour
-    .callback("beforeChange")
-    ?.call(
-      tour,
-      nextStep && (nextStep.element as HTMLElement),
-      tour.getCurrentStep(),
-      tour.getDirection()
-    );
-
-  // if `onBeforeChange` returned `false`, stop displaying the element
-  if (continueStep === false) {
-    tour.incrementCurrentStep();
-    return false;
-  }
-
-  await showElement(tour, nextStep);
+  const newStep = tour.getCurrentStep()!;
+  const prevStep = tour.getStep(newStep);
+  await showElement(tour, prevStep);
 
   return true;
 }