refresh unit tests

src/packages/tour/components/TourTooltip.ts

@@ -1,5 +1,5 @@
 import { Tooltip, type TooltipProps } from "../../tooltip/tooltip";
-import van, { PropValueOrDerived, State } from "../../dom/van";
+import van, { PropValueOrDerived } from "../../dom/van";
 import {
   activeClassName,
   bulletsClassName,
@@ -20,7 +20,6 @@ import {
 } from "../classNames";
 import { TourStep } from "../steps";
 import { dataStepNumberAttribute } from "../dataAttributes";
-import getOffset from "../../../util/getOffset";
 import scrollParentToElement from "../../../util/scrollParentToElement";
 import scrollTo from "../../../util/scrollTo";
 

src/packages/tour/mock.ts

@@ -1,4 +1,4 @@
-import createElement from "../../util/createElement";
+import van from "../dom/van"
 import { TourStep } from "./steps";
 import { Tour } from "./tour";
 import {
@@ -7,22 +7,24 @@ import {
   dataStepAttribute,
 } from "./dataAttributes";
 
+const { div, b, a, h1 } = van.tags;
+
 export const appendMockSteps = (targetElement: HTMLElement = document.body) => {
-  const mockElementOne = createElement("div");
+  const mockElementOne = div();
   mockElementOne.setAttribute(dataIntroAttribute, "Mock element");
 
-  const mockElementTwo = createElement("b");
+  const mockElementTwo = b();
   mockElementTwo.setAttribute(dataIntroAttribute, "Mock element left position");
   mockElementTwo.setAttribute(dataPosition, "left");
 
-  const mockElementThree = createElement("h1");
+  const mockElementThree = h1();
   mockElementThree.setAttribute(
     dataIntroAttribute,
     "Mock element second to last"
   );
   mockElementThree.setAttribute(dataStepAttribute, "10");
 
-  const mockElementFour = createElement("a");
+  const mockElementFour = a();
   mockElementFour.setAttribute(dataIntroAttribute, "Mock element last");
   mockElementFour.setAttribute(dataStepAttribute, "20");
 

src/packages/tour/refresh.test.ts

@@ -1,21 +1,37 @@
-import * as tooltip from "../../packages/tooltip";
 import { getMockTour } from "./mock";
+import { Tour } from "./tour";
+import van from "../dom/van";
+import {
+  sleep,
+  waitMsForDerivations,
+  waitMsForExitTransition,
+} from "../../util/sleep";
+
+const { div } = van.tags;
 
 describe("refresh", () => {
-  test("should not refetch the steps when refreshStep is false", async () => {
-    // Arrange
-    jest.spyOn(tooltip, "placeTooltip");
+  let mockTour: Tour;
+  let targetElement: HTMLElement;
 
-    const targetElement = document.createElement("div");
-    document.body.appendChild(targetElement);
+  beforeEach(() => {
+    mockTour = getMockTour();
+    targetElement = div();
+    van.add(document.body, targetElement);
+  });
 
-    const mockTour = getMockTour();
+  afterEach(async () => {
+    await mockTour.exit();
+    await sleep(waitMsForExitTransition);
+  });
 
+  test("should not refetch the steps when refreshStep is false", async () => {
+    // Arrange
     mockTour.addStep({
       intro: "first",
     });
 
     await mockTour.start();
+    await sleep(waitMsForDerivations);
 
     // Act
     mockTour.setOptions({
@@ -35,20 +51,10 @@ describe("refresh", () => {
     expect(mockTour.getSteps()).toHaveLength(1);
     expect(mockTour.getStep(0).intro).toBe("first");
     expect(document.querySelectorAll(".introjs-bullets ul li").length).toBe(1);
-
-    // cleanup
-    await mockTour.exit();
   });
 
   test("should fetch the steps when refreshStep is true", async () => {
     // Arrange
-    jest.spyOn(tooltip, "placeTooltip");
-
-    const targetElement = document.createElement("div");
-    document.body.appendChild(targetElement);
-
-    const mockTour = getMockTour();
-
     mockTour.addStep({
       intro: "first",
     });

src/util/sleep.ts

@@ -0,0 +1,8 @@
+export const sleep = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));
+
+// time to wait for the derivations to update
+export const waitMsForDerivations = 5;
+
+// time to wait for the exit transition to complete
+export const waitMsForExitTransition = 260;