tour tests

usablica · Sep 9, 2024 · b5b5b57 · b5b5b57
1 parent e970c32
commit b5b5b57
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 39 deletions.
diff --git a/src/packages/tour/components/TourRoot.ts b/src/packages/tour/components/TourRoot.ts
@@ -141,8 +141,8 @@ export const TourRoot = ({ tour }: TourRootProps) => {
         scrollPadding: tour.getOption("scrollPadding"),
 
         dontShowAgain: tour.getOption("dontShowAgain"),
-        onDontShowAgainChange: (e: any) => {
-          tour.setDontShowAgain((<HTMLInputElement>e.target).checked);
+        onDontShowAgainChange: (checked: boolean) => {
+          tour.setDontShowAgain(checked);
         },
         dontShowAgainLabel: tour.getOption("dontShowAgainLabel"),
       });

diff --git a/src/packages/tour/components/TourTooltip.ts b/src/packages/tour/components/TourTooltip.ts
@@ -8,6 +8,7 @@ import {
   dontShowAgainClassName,
   fullButtonClassName,
   helperNumberLayerClassName,
+  hiddenButtonClassName,
   nextButtonClassName,
   previousButtonClassName,
   progressBarClassName,
@@ -23,7 +24,7 @@ import { dataStepNumberAttribute } from "../dataAttributes";
 import scrollParentToElement from "../../../util/scrollParentToElement";
 import scrollTo from "../../../util/scrollTo";
 
-const { h1, div, input, label, ul, li, a, p } = van.tags;
+const { h1, div, input, label, ul, li, a } = van.tags;
 
 const DontShowAgain = ({
   dontShowAgainLabel,
@@ -232,26 +233,33 @@ const PrevButton = ({
   onClick: (e: any) => void;
   buttonClass: string;
 }) => {
+  const isFirstStep = currentStep === 0 && steps.length > 1;
   // when the current step is the first one and there are more steps to show
-  const disabled = currentStep === 0 && steps.length > 1 && !hidePrev;
+  const isDisabled = isFirstStep && !hidePrev;
+  const isHidden = isFirstStep && hidePrev;
   // when the current step is the last one or there is only one step to show
   const isFullButton =
     (currentStep === steps.length - 1 || steps.length === 1) && hideNext;
 
   return Button({
     label,
     onClick,
-    disabled,
+    disabled: isDisabled,
     className: () => {
       const classNames = [buttonClass, previousButtonClassName];
+
       if (isFullButton) {
         classNames.push(fullButtonClassName);
       }
 
-      if (disabled) {
+      if (isDisabled) {
         classNames.push(disabledButtonClassName);
       }
 
+      if (isHidden) {
+        classNames.push(hiddenButtonClassName);
+      }
+
       return classNames.filter(Boolean).join(" ");
     },
   });
@@ -290,37 +298,30 @@ const Buttons = ({
   prevLabel: string;
   onPrevClick: (e: any) => void;
 }) => {
-  const isLastStep = currentStep === steps.length - 1 || steps.length === 1;
-  const isFirstStep = currentStep === 0 && steps.length > 1;
-
   return div(
     { className: tooltipButtonsClassName },
-    () =>
-      isFirstStep && hidePrev
-        ? null
-        : PrevButton({
-            label: prevLabel,
-            steps,
-            currentStep,
-            hidePrev,
-            hideNext,
-            onClick: onPrevClick,
-            buttonClass,
-          }),
-    () =>
-      isLastStep && hideNext
-        ? null
-        : NextButton({
-            currentStep,
-            steps,
-            doneLabel,
-            nextLabel,
-            onClick: onNextClick,
-            hideNext,
-            hidePrev,
-            nextToDone,
-            buttonClass,
-          })
+    steps.length > 1
+      ? PrevButton({
+          label: prevLabel,
+          steps,
+          currentStep,
+          hidePrev,
+          hideNext,
+          onClick: onPrevClick,
+          buttonClass,
+        })
+      : null,
+    NextButton({
+      currentStep,
+      steps,
+      doneLabel,
+      nextLabel,
+      onClick: onNextClick,
+      hideNext,
+      hidePrev,
+      nextToDone,
+      buttonClass,
+    })
   );
 };
 
@@ -450,7 +451,7 @@ export const TourTooltip = ({
 
   children.push(Header({ title, skipLabel, onSkipClick }));
 
-  children.push(div({ className: tooltipTextClassName }, p(text)));
+  children.push(div({ className: tooltipTextClassName }, text));
 
   if (dontShowAgain) {
     children.push(DontShowAgain({ dontShowAgainLabel, onDontShowAgainChange }));

diff --git a/src/packages/tour/tour.test.ts b/src/packages/tour/tour.test.ts
@@ -1,4 +1,3 @@
-import { queryElementByClassName } from "../../util/queryElement";
 import {
   className,
   content,
@@ -14,6 +13,11 @@ import * as dontShowAgain from "./dontShowAgain";
 import { getMockPartialSteps, getMockTour } from "./mock";
 import { Tour } from "./tour";
 import { helperLayerClassName, overlayClassName } from "./classNames";
+import {
+  sleep,
+  waitMsForDerivations,
+  waitMsForExitTransition,
+} from "../../util/sleep";
 
 describe("Tour", () => {
   beforeEach(() => {
@@ -166,12 +170,14 @@ describe("Tour", () => {
 
       // Act
       await mockTour.start();
+      await sleep(waitMsForDerivations);
       await mockTour.exit();
+      await sleep(waitMsForExitTransition);
 
       // Assert
       expect(mockElement?.className).not.toContain("introjs-showElement");
-      expect(queryElementByClassName(helperLayerClassName)).toBeNull();
-      expect(queryElementByClassName(overlayClassName)).toBeNull();
+      expect(document.querySelector(`.${helperLayerClassName}`)).toBeNull();
+      expect(document.querySelector(`.${overlayClassName}`)).toBeNull();
     });
 
     test("should not highlight the target element if queryString is incorrect", async () => {
@@ -392,6 +398,7 @@ describe("Tour", () => {
 
       // Act
       await mockTour.start();
+      await sleep(waitMsForDerivations);
       const checkbox = find(".introjs-dontShowAgain input");
       checkbox.click();