tooltip package

usablica · Jun 25, 2024 · 56436f4 · 56436f4
1 parent a6f5871
commit 56436f4
Show file tree

Hide file tree

Showing 21 changed files with 342 additions and 407 deletions.
diff --git a/src/option.test.ts b/src/option.test.ts
@@ -0,0 +1,35 @@
+import { setOption, setOptions } from "./option";
+
+describe("option", () => {
+  describe("setOption", () => {
+    it("should set option", () => {
+      // Arrange
+      const mockOption = {
+        key1: "value1",
+      };
+
+      // Act
+      setOption(mockOption, "key1", "newValue1");
+
+      // Assert
+      expect(mockOption.key1).toBe("newValue1");
+    });
+  });
+
+  describe("setOptions", () => {
+    it("should set options", () => {
+      // Arrange
+      const mockOption = {
+        key1: "value1",
+        key2: "value2",
+      };
+
+      // Act
+      setOptions(mockOption, { key2: "newValue2", key1: "newValue1" });
+
+      // Assert
+      expect(mockOption.key1).toBe("newValue1");
+      expect(mockOption.key2).toBe("newValue2");
+    });
+  });
+});
diff --git a/src/packages/hint/hintItem.ts b/src/packages/hint/hintItem.ts
@@ -1,4 +1,4 @@
-import { TooltipPosition } from "../../core/placeTooltip";
+import { TooltipPosition } from "../../packages/tooltip";
 import { Hint } from "./hint";
 import cloneObject from "../../util/cloneObject";
 import { queryElement, queryElements } from "../../util/queryElement";

diff --git a/src/packages/hint/option.ts b/src/packages/hint/option.ts
@@ -1,4 +1,4 @@
-import { TooltipPosition } from "../../core/placeTooltip";
+import { TooltipPosition } from "../../packages/tooltip";
 import { HintItem, HintPosition } from "./hintItem";
 
 export interface HintOptions {

diff --git a/src/packages/hint/tooltip.ts b/src/packages/hint/tooltip.ts
@@ -13,7 +13,7 @@ import createElement from "../../util/createElement";
 import { setClass } from "../../util/className";
 import { hideHint } from "./hide";
 import { setPositionRelativeTo } from "../../util/setPositionRelativeTo";
-import placeTooltip from "../../core/placeTooltip";
+import { placeTooltip } from "../../packages/tooltip";
 
 /**
  * Removes open hint (tooltip hint)

diff --git a/src/packages/tooltip/index.ts b/src/packages/tooltip/index.ts
@@ -0,0 +1,2 @@
+export { TooltipPosition } from "./tooltipPosition";
+export { placeTooltip } from "./placeTooltip";
diff --git a/src/packages/tooltip/placeTooltip.test.ts b/src/packages/tooltip/placeTooltip.test.ts
@@ -0,0 +1,189 @@
+import * as getOffset from "../../util/getOffset";
+import * as getWindowSize from "../../util/getWindowSize";
+import { placeTooltip } from "./placeTooltip";
+
+describe("placeTooltip", () => {
+  test("should automatically place the tooltip position when there is enough space", () => {
+    // Arrange
+    jest.spyOn(getOffset, "default").mockReturnValue({
+      height: 100,
+      width: 100,
+      top: 0,
+      left: 0,
+    });
+
+    jest.spyOn(getWindowSize, "default").mockReturnValue({
+      height: 1000,
+      width: 1000,
+    });
+
+    jest.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
+      x: 0,
+      y: 0,
+      toJSON: jest.fn,
+      width: 100,
+      height: 100,
+      top: 200,
+      left: 200,
+      bottom: 300,
+      right: 300,
+    });
+
+    const stepElement = document.createElement("div");
+    const tooltipLayer = document.createElement("div");
+    const arrowLayer = document.createElement("div");
+
+    // Act
+    placeTooltip(
+      tooltipLayer,
+      arrowLayer,
+      stepElement,
+      "top",
+      ["top", "bottom", "left", "right"],
+      false,
+      true
+    );
+
+    // Assert
+    expect(tooltipLayer.className).toBe(
+      "introjs-tooltip introjs-top-right-aligned"
+    );
+  });
+
+  test("should skip auto positioning when autoPosition is false", () => {
+    // Arrange
+    const stepElement = document.createElement("div");
+    const tooltipLayer = document.createElement("div");
+    const arrowLayer = document.createElement("div");
+
+    // Act
+    placeTooltip(
+      tooltipLayer,
+      arrowLayer,
+      stepElement,
+      "top",
+      ["top", "bottom"],
+      false,
+      false
+    );
+
+    // Assert
+    expect(tooltipLayer.className).toBe("introjs-tooltip introjs-top");
+  });
+
+  test("should use floating tooltips when height/width is limited", () => {
+    // Arrange
+    jest.spyOn(getOffset, "default").mockReturnValue({
+      height: 100,
+      width: 100,
+      top: 0,
+      left: 0,
+    });
+
+    jest.spyOn(getWindowSize, "default").mockReturnValue({
+      height: 100,
+      width: 100,
+    });
+
+    jest.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
+      x: 0,
+      y: 0,
+      toJSON: jest.fn,
+      width: 100,
+      height: 100,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    });
+
+    const stepElement = document.createElement("div");
+    const tooltipLayer = document.createElement("div");
+    const arrowLayer = document.createElement("div");
+
+    // Act
+    placeTooltip(
+      tooltipLayer,
+      arrowLayer,
+      stepElement,
+      "left",
+      ["top", "bottom", "left", "right"],
+      false,
+      true
+    );
+
+    // Assert
+    expect(tooltipLayer.className).toBe("introjs-tooltip introjs-floating");
+  });
+
+  test("should use bottom middle aligned when there is enough vertical space", () => {
+    // Arrange
+    jest.spyOn(getOffset, "default").mockReturnValue({
+      height: 100,
+      width: 100,
+      top: 0,
+      left: 0,
+    });
+
+    jest.spyOn(getWindowSize, "default").mockReturnValue({
+      height: 500,
+      width: 100,
+    });
+
+    jest.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
+      x: 0,
+      y: 0,
+      toJSON: jest.fn,
+      width: 100,
+      height: 100,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    });
+
+    const stepElement = document.createElement("div");
+    const tooltipLayer = document.createElement("div");
+    const arrowLayer = document.createElement("div");
+
+    // Act
+    placeTooltip(
+      tooltipLayer,
+      arrowLayer,
+      stepElement,
+      "left",
+      ["top", "bottom", "left", "right"],
+      false,
+      true
+    );
+
+    // Assert
+    expect(tooltipLayer.className).toBe(
+      "introjs-tooltip introjs-bottom-middle-aligned"
+    );
+  });
+
+  test("should attach the global custom tooltip css class", () => {
+    // Arrange
+    const stepElement = document.createElement("div");
+    const tooltipLayer = document.createElement("div");
+    const arrowLayer = document.createElement("div");
+
+    // Act
+    placeTooltip(
+      tooltipLayer,
+      arrowLayer,
+      stepElement,
+      "left",
+      ["top", "bottom", "left", "right"],
+      false,
+      true,
+      "newClass"
+    );
+
+    // Assert
+    expect(tooltipLayer.className).toBe(
+      "introjs-tooltip newClass introjs-bottom-middle-aligned"
+    );
+  });
+});
diff --git a/src/core/placeTooltip.ts → src/packages/tooltip/placeTooltip.ts b/src/core/placeTooltip.ts → src/packages/tooltip/placeTooltip.ts
@@ -1,22 +1,11 @@
-import getOffset from "../util/getOffset";
-import getWindowSize from "../util/getWindowSize";
-import { addClass, setClass } from "../util/className";
-import checkRight from "../util/checkRight";
-import checkLeft from "../util/checkLeft";
-import removeEntry from "../util/removeEntry";
-
-export type TooltipPosition =
-  | "floating"
-  | "top"
-  | "bottom"
-  | "left"
-  | "right"
-  | "top-right-aligned"
-  | "top-left-aligned"
-  | "top-middle-aligned"
-  | "bottom-right-aligned"
-  | "bottom-left-aligned"
-  | "bottom-middle-aligned";
+import getOffset from "../../util/getOffset";
+import getWindowSize from "../../util/getWindowSize";
+import { addClass, setClass } from "../../util/className";
+import checkRight from "../../util/checkRight";
+import checkLeft from "../../util/checkLeft";
+import removeEntry from "../../util/removeEntry";
+import { TooltipPosition } from "./tooltipPosition";
+
 
 /**
  * auto-determine alignment
@@ -169,7 +158,7 @@ function _determineAutoPosition(
  *
  * @api private
  */
-export default function placeTooltip(
+export const placeTooltip = (
   tooltipLayer: HTMLElement,
   arrowLayer: HTMLElement,
   targetElement: HTMLElement,
@@ -179,7 +168,7 @@ export default function placeTooltip(
   autoPosition = true,
   tooltipClassName = "",
   hintMode: boolean = false
-) {
+) => {
   let tooltipOffset: {
     top: number;
     left: number;

diff --git a/src/packages/tooltip/tooltipPosition.ts b/src/packages/tooltip/tooltipPosition.ts
@@ -0,0 +1,12 @@
+export type TooltipPosition =
+  | "floating"
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "top-right-aligned"
+  | "top-left-aligned"
+  | "top-middle-aligned"
+  | "bottom-right-aligned"
+  | "bottom-left-aligned"
+  | "bottom-middle-aligned";
diff --git a/src/packages/tour/option.ts b/src/packages/tour/option.ts
@@ -1,4 +1,4 @@
-import { TooltipPosition } from "../../core/placeTooltip";
+import { TooltipPosition } from "../../packages/tooltip";
 import { TourStep, ScrollTo } from "./steps";
 
 export interface TourOptions {

diff --git a/src/packages/tour/refresh.test.ts b/src/packages/tour/refresh.test.ts
@@ -1,10 +1,10 @@
-import * as placeTooltip from "../../core/placeTooltip";
+import * as tooltip from "../../packages/tooltip";
 import { getMockTour } from "./tests/mock";
 
 describe("refresh", () => {
   test("should not refetch the steps when refreshStep is false", async () => {
     // Arrange
-    jest.spyOn(placeTooltip, "default");
+    jest.spyOn(tooltip, "placeTooltip");
 
     const targetElement = document.createElement("div");
     document.body.appendChild(targetElement);
@@ -36,14 +36,13 @@ describe("refresh", () => {
     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(placeTooltip, "default");
+    jest.spyOn(tooltip, "placeTooltip");
 
     const targetElement = document.createElement("div");
     document.body.appendChild(targetElement);

diff --git a/src/packages/tour/refresh.ts b/src/packages/tour/refresh.ts
@@ -1,7 +1,10 @@
-import placeTooltip from "../../core/placeTooltip";
+import { placeTooltip } from "../../packages/tooltip";
 import { _recreateBullets, _updateProgressBar } from "./showElement";
 import { Tour } from "./tour";
-import { getElementByClassName, queryElementByClassName } from "../../util/queryElement";
+import {
+  getElementByClassName,
+  queryElementByClassName,
+} from "../../util/queryElement";
 import {
   disableInteractionClassName,
   helperLayerClassName,

diff --git a/src/packages/tour/showElement.ts b/src/packages/tour/showElement.ts
@@ -4,7 +4,7 @@ import exitIntro from "./exitIntro";
 import { addClass, setClass } from "../../util/className";
 import setAnchorAsButton from "../../util/setAnchorAsButton";
 import { TourStep, nextStep, previousStep } from "./steps";
-import placeTooltip from "../../core/placeTooltip";
+import { placeTooltip } from "../../packages/tooltip";
 import removeShowElement from "./removeShowElement";
 import createElement from "../../util/createElement";
 import setStyle from "../../util/setStyle";

diff --git a/src/packages/tour/steps.ts b/src/packages/tour/steps.ts
@@ -1,4 +1,4 @@
-import { TooltipPosition } from "../../core/placeTooltip";
+import { TooltipPosition } from "../../packages/tooltip";
 import exitIntro from "./exitIntro";
 import showElement from "./showElement";
 import { queryElement, queryElements } from "../../util/queryElement";