update tests

src/option.ts

@@ -1,143 +1,3 @@
-import {
-  HintPosition,
-  HintStep,
-  IntroStep,
-  ScrollTo,
-  TooltipPosition,
-} from "./packages/tour/steps";
-
-export interface Options {
-  steps: Partial<IntroStep>[];
-  hints: Partial<HintStep>[];
-  /* Is this tour instance active? Don't show the tour again if this flag is set to false */
-  isActive: boolean;
-  /* Next button label in tooltip box */
-  nextLabel: string;
-  /* Previous button label in tooltip box */
-  prevLabel: string;
-  /* Skip button label in tooltip box */
-  skipLabel: string;
-  /* Done button label in tooltip box */
-  doneLabel: string;
-  /* Hide previous button in the first step? Otherwise, it will be disabled button. */
-  hidePrev: boolean;
-  /* Hide next button in the last step? Otherwise, it will be disabled button (note: this will also hide the "Done" button) */
-  hideNext: boolean;
-  /* Change the Next button to Done in the last step of the intro? otherwise, it will render a disabled button */
-  nextToDone: boolean;
-  /* Default tooltip box position */
-  tooltipPosition: string;
-  /* Next CSS class for tooltip boxes */
-  tooltipClass: string;
-  /* Start intro for a group of elements */
-  group: string;
-  /* CSS class that is added to the helperLayer */
-  highlightClass: string;
-  /* Close introduction when pressing Escape button? */
-  exitOnEsc: boolean;
-  /* Close introduction when clicking on overlay layer? */
-  exitOnOverlayClick: boolean;
-  /* Display the pagination detail */
-  showStepNumbers: boolean;
-  /* Pagination "of" label */
-  stepNumbersOfLabel: string;
-  /* Let user use keyboard to navigate the tour? */
-  keyboardNavigation: boolean;
-  /* Show tour control buttons? */
-  showButtons: boolean;
-  /* Show tour bullets? */
-  showBullets: boolean;
-  /* Show tour progress? */
-  showProgress: boolean;
-  /* Scroll to highlighted element? */
-  scrollToElement: boolean;
-  /*
-   * Should we scroll the tooltip or target element?
-   * Options are: 'element', 'tooltip' or 'off'
-   */
-  scrollTo: ScrollTo;
-  /* Padding to add after scrolling when element is not in the viewport (in pixels) */
-  scrollPadding: number;
-  /* Set the overlay opacity */
-  overlayOpacity: number;
-  /* To determine the tooltip position automatically based on the window.width/height */
-  autoPosition: boolean;
-  /* Precedence of positions, when auto is enabled */
-  positionPrecedence: TooltipPosition[];
-  /* Disable an interaction with element? */
-  disableInteraction: boolean;
-  /* To display the "Don't show again" checkbox in the tour */
-  dontShowAgain: boolean;
-  dontShowAgainLabel: string;
-  /* "Don't show again" cookie name and expiry (in days) */
-  dontShowAgainCookie: string;
-  dontShowAgainCookieDays: number;
-  /* Set how much padding to be used around helper element */
-  helperElementPadding: number;
-  /* Default hint position */
-  hintPosition: HintPosition;
-  /* Hint button label */
-  hintButtonLabel: string;
-  /* Display the "Got it" button? */
-  hintShowButton: boolean;
-  /* Hints auto-refresh interval in ms (set to -1 to disable) */
-  hintAutoRefreshInterval: number;
-  /* Adding animation to hints? */
-  hintAnimation: boolean;
-  /* additional classes to put on the buttons */
-  buttonClass: string;
-  /* additional classes to put on progress bar */
-  progressBarAdditionalClass: boolean;
-}
-
-export function getDefaultOptions(): Options {
-  return {
-    steps: [],
-    hints: [],
-    isActive: true,
-    nextLabel: "Next",
-    prevLabel: "Back",
-    skipLabel: "×",
-    doneLabel: "Done",
-    hidePrev: false,
-    hideNext: false,
-    nextToDone: true,
-    tooltipPosition: "bottom",
-    tooltipClass: "",
-    group: "",
-    highlightClass: "",
-    exitOnEsc: true,
-    exitOnOverlayClick: true,
-    showStepNumbers: false,
-    stepNumbersOfLabel: "of",
-    keyboardNavigation: true,
-    showButtons: true,
-    showBullets: true,
-    showProgress: false,
-    scrollToElement: true,
-    scrollTo: "element",
-    scrollPadding: 30,
-    overlayOpacity: 0.5,
-    autoPosition: true,
-    positionPrecedence: ["bottom", "top", "right", "left"],
-    disableInteraction: false,
-
-    dontShowAgain: false,
-    dontShowAgainLabel: "Don't show this again",
-    dontShowAgainCookie: "introjs-dontShowAgain",
-    dontShowAgainCookieDays: 365,
-    helperElementPadding: 10,
-
-    hintPosition: "top-middle",
-    hintButtonLabel: "Got it",
-    hintShowButton: true,
-    hintAutoRefreshInterval: 10,
-    hintAnimation: true,
-    buttonClass: "introjs-button",
-    progressBarAdditionalClass: false,
-  };
-}
-
 export function setOption<T, K extends keyof T>(
   options: T,
   key: K,

src/packages/tour/classNames.ts

@@ -4,7 +4,7 @@ export const bulletsClassName = "introjs-bullets";
 export const progressClassName = "introjs-progress";
 export const progressBarClassName = "introjs-progressbar";
 export const helperLayerClassName = "introjs-helperLayer";
-export const tooltipReferenceLayerClassName = ".introjs-tooltipReferenceLayer";
+export const tooltipReferenceLayerClassName = "introjs-tooltipReferenceLayer";
 export const helperNumberLayerClassName = "introjs-helperNumberLayer";
 export const tooltipClassName = "introjs-tooltip";
 export const tooltipHeaderClassName = "introjs-tooltip-header";

tests/jest/core/dontShowAgain.test.ts → src/packages/tour/dontShowAgain.test.ts

@@ -1,23 +1,11 @@
 import * as cookie from "../../../src/util/cookie";
-import {
-  setDontShowAgain,
-  getDontShowAgain,
-} from "../../../src/core/dontShowAgain";
-import { IntroJs } from "../../../src/intro";
+import { setDontShowAgain, getDontShowAgain } from "./dontShowAgain";
 
 describe("dontShowAgain", () => {
   test("should call set cookie", () => {
     const setCookieMock = jest.spyOn(cookie, "setCookie");
 
-    setDontShowAgain(
-      {
-        _options: {
-          dontShowAgainCookie: "cookie-name",
-          dontShowAgainCookieDays: 7,
-        },
-      } as IntroJs,
-      true
-    );
+    setDontShowAgain(true, "cookie-name", 7);
 
     expect(setCookieMock).toBeCalledTimes(1);
     expect(setCookieMock).toBeCalledWith("cookie-name", "true", 7);
@@ -27,15 +15,7 @@ describe("dontShowAgain", () => {
     const setCookieMock = jest.spyOn(cookie, "setCookie");
     const deleteCookieMock = jest.spyOn(cookie, "deleteCookie");
 
-    setDontShowAgain(
-      {
-        _options: {
-          dontShowAgainCookie: "cookie-name",
-          dontShowAgainCookieDays: 7,
-        },
-      } as IntroJs,
-      false
-    );
+    setDontShowAgain(false, "cookie-name", 7);
 
     expect(setCookieMock).toBeCalledTimes(0);
     expect(deleteCookieMock).toBeCalledTimes(1);
@@ -45,26 +25,12 @@ describe("dontShowAgain", () => {
   test("should return true when cookie is valid", () => {
     jest.spyOn(cookie, "getCookie").mockReturnValue("true");
 
-    expect(
-      getDontShowAgain({
-        _options: {
-          dontShowAgainCookie: "cookie-name",
-          dontShowAgainCookieDays: 7,
-        },
-      } as IntroJs)
-    ).toBe(true);
+    expect(getDontShowAgain("cookie-name")).toBe(true);
   });
 
   test("should return false when cookie is invalid", () => {
     jest.spyOn(cookie, "getCookie").mockReturnValue("invalid-state");
 
-    expect(
-      getDontShowAgain({
-        _options: {
-          dontShowAgainCookie: "cookie-name",
-          dontShowAgainCookieDays: 7,
-        },
-      } as IntroJs)
-    ).toBe(false);
+    expect(getDontShowAgain("cookie-name")).toBe(false);
   });
 });

src/packages/tour/exitIntro.test.ts

@@ -0,0 +1,92 @@
+import { getMockTour } from "./tests/mock";
+
+describe("exitIntro", () => {
+  test("should reset the _currentStep", async () => {
+    const mockTour = getMockTour();
+    mockTour.addStep({ element: document.querySelector("h1") });
+    await mockTour.render();
+
+    await mockTour.exit(false);
+
+    expect(mockTour.getCurrentStep()).toBe(-1);
+  });
+
+  test("should call the onexit and onbeforeexit callbacks", async () => {
+    const fnOnExit = jest.fn();
+    const fnOnBeforeExit = jest.fn();
+    fnOnBeforeExit.mockReturnValue(true);
+
+    const mockTour = getMockTour();
+    mockTour.addStep({ element: document.querySelector("h1") });
+    mockTour.onExit(fnOnExit)
+    mockTour.onBeforeExit(fnOnBeforeExit);
+
+    await mockTour.render();
+    await mockTour.exit(false);
+
+    expect(fnOnExit).toBeCalledTimes(1);
+
+    expect(fnOnBeforeExit).toBeCalledTimes(1);
+    expect(fnOnBeforeExit).toHaveBeenCalledWith(document.body);
+    expect(fnOnBeforeExit).toHaveBeenCalledBefore(fnOnExit);
+  });
+
+  test("should not continue when onbeforeexit returns false", async () => {
+    const fnOnExit = jest.fn();
+    const fnOnBeforeExit = jest.fn();
+    fnOnBeforeExit.mockReturnValue(false);
+
+    const mockTour = getMockTour();
+    mockTour.addStep({ element: document.querySelector("h1") });
+    mockTour.onExit(fnOnExit)
+    mockTour.onBeforeExit(fnOnBeforeExit);
+
+    await mockTour.render();
+    await mockTour.exit(false);
+
+    expect(fnOnExit).toBeCalledTimes(0);
+
+    expect(fnOnBeforeExit).toBeCalledTimes(1);
+    expect(fnOnBeforeExit).toHaveBeenCalledWith(document.body);
+
+    // test cleanup
+    document.body.innerHTML = '';
+  });
+
+  test("should not continue when exit force is true", async () => {
+    const fnOnExit = jest.fn();
+    const fnOnBeforeExit = jest.fn();
+    fnOnBeforeExit.mockReturnValue(false);
+
+    const mockTour = getMockTour();
+    mockTour.addStep({ element: document.querySelector("h1") });
+    mockTour.onExit(fnOnExit)
+    mockTour.onBeforeExit(fnOnBeforeExit);
+
+    await mockTour.render();
+    await mockTour.exit(false);
+
+    expect(fnOnExit).toBeCalledTimes(0);
+    expect(fnOnBeforeExit).toBeCalledTimes(1);
+
+    // test cleanup
+    document.body.innerHTML = '';
+  });
+
+  test("should continue when exit force is true and beforeExit callback returns false", async () => {
+    const fnOnExit = jest.fn();
+    const fnOnBeforeExit = jest.fn();
+    fnOnBeforeExit.mockReturnValue(false);
+
+    const mockTour = getMockTour();
+    mockTour.addStep({ element: document.querySelector("h1") });
+    mockTour.onExit(fnOnExit)
+    mockTour.onBeforeExit(fnOnBeforeExit);
+
+    await mockTour.render();
+    await mockTour.exit(true);
+
+    expect(fnOnExit).toBeCalledTimes(1);
+    expect(fnOnBeforeExit).toBeCalledTimes(1);
+  });
+});

src/packages/tour/exitIntro.ts

@@ -2,7 +2,7 @@ import DOMEvent from "../../util/DOMEvent";
 import onKeyDown from "./onKeyDown";
 import onResize from "./onResize";
 import removeShowElement from "./removeShowElement";
-import removeChild from "../../util/removeChild";
+import { removeChild, removeAnimatedChild } from "../../util/removeChild";
 import { Tour } from "./tour";
 import {
   disableInteractionClassName,
@@ -14,7 +14,7 @@ import {
 import {
   queryElementByClassName,
   queryElementsByClassName,
-} from "src/util/queryElement";
+} from "../../util/queryElement";
 
 /**
  * Exit from intro
@@ -51,7 +51,7 @@ export default async function exitIntro(tour: Tour, force: boolean = false) {
     helperLayerClassName,
     targetElement
   );
-  removeChild(helperLayer, true);
+  await removeAnimatedChild(helperLayer);
 
   const referenceLayer = queryElementByClassName(
     tooltipReferenceLayerClassName,

src/packages/tour/refresh.ts

@@ -1,7 +1,7 @@
 import placeTooltip from "../../core/placeTooltip";
 import { _recreateBullets, _updateProgressBar } from "./showElement";
 import { Tour } from "./tour";
-import { getElementByClassName } from "src/util/queryElement";
+import { getElementByClassName } from "../../util/queryElement";
 import {
   disableInteractionClassName,
   helperLayerClassName,

src/packages/tour/removeShowElement.ts

@@ -1,4 +1,4 @@
-import { queryElementsByClassName } from "src/util/queryElement";
+import { queryElementsByClassName } from "../../util/queryElement";
 import { removeClass } from "../../util/className";
 import { showElementClassName } from "./classNames";