From fd12b201bf6c3d3ef9a81c2b5387771db0d4248d Mon Sep 17 00:00:00 2001
From: binrysearch <me@binarysearch.dev>
Date: Mon, 9 Sep 2024 22:39:13 +0100
Subject: [PATCH] tooltip tests

---
 src/packages/tooltip/placeTooltip.test.ts | 224 ++++++----------------
 src/packages/tooltip/tooltipPosition.ts   |   2 +-
 2 files changed, 64 insertions(+), 162 deletions(-)

diff --git a/src/packages/tooltip/placeTooltip.test.ts b/src/packages/tooltip/placeTooltip.test.ts
index 6f83a6f72..392098fd4 100644
--- a/src/packages/tooltip/placeTooltip.test.ts
+++ b/src/packages/tooltip/placeTooltip.test.ts
@@ -1,189 +1,91 @@
-import * as getOffset from "../../util/getOffset";
-import * as getWindowSize from "../../util/getWindowSize";
-import { placeTooltip } from "./placeTooltip";
+import { determineAutoPosition, TooltipPosition } from "./tooltipPosition";
+
+const positionPrecedence: TooltipPosition[] = [
+  "bottom",
+  "top",
+  "right",
+  "left",
+];
 
 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,
+    const position = determineAutoPosition(
+      positionPrecedence,
+      {
+        top: 200,
+        left: 200,
+        height: 100,
+        width: 100,
+        right: 300,
+        bottom: 300,
+        absoluteTop: 200,
+        absoluteLeft: 200,
+        absoluteRight: 300,
+        absoluteBottom: 300,
+      },
+      100,
+      100,
       "top",
-      ["top", "bottom"],
-      false,
-      false
+      { height: 1000, width: 1000 }
     );
 
     // Assert
-    expect(tooltipLayer.className).toBe("introjs-tooltip introjs-top");
+    expect(position).toBe("top-right-aligned");
   });
 
   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
+    const position = determineAutoPosition(
+      positionPrecedence,
+      {
+        top: 0,
+        left: 0,
+        height: 100,
+        width: 100,
+        right: 0,
+        bottom: 0,
+        absoluteTop: 0,
+        absoluteLeft: 0,
+        absoluteRight: 0,
+        absoluteBottom: 0,
+      },
+      100,
+      100,
+      "top",
+      { height: 100, width: 100 }
     );
 
     // Assert
-    expect(tooltipLayer.className).toBe("introjs-tooltip introjs-floating");
+    expect(position).toBe("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,
+    const position = determineAutoPosition(
+      positionPrecedence,
+      {
+        top: 0,
+        left: 0,
+        height: 100,
+        width: 100,
+        right: 0,
+        bottom: 0,
+        absoluteTop: 0,
+        absoluteLeft: 0,
+        absoluteRight: 0,
+        absoluteBottom: 0,
+      },
+      100,
+      100,
       "left",
-      ["top", "bottom", "left", "right"],
-      false,
-      true,
-      "newClass"
+      { height: 500, width: 100 }
     );
 
     // Assert
-    expect(tooltipLayer.className).toBe(
-      "introjs-tooltip newClass introjs-bottom-middle-aligned"
-    );
+    expect(position).toBe("bottom-middle-aligned");
   });
 });
diff --git a/src/packages/tooltip/tooltipPosition.ts b/src/packages/tooltip/tooltipPosition.ts
index df66aa2a0..529becf7f 100644
--- a/src/packages/tooltip/tooltipPosition.ts
+++ b/src/packages/tooltip/tooltipPosition.ts
@@ -17,7 +17,7 @@ export type TooltipPosition =
 /**
  * auto-determine alignment
  */
-export function determineAutoAlignment(
+function determineAutoAlignment(
   offsetLeft: number,
   tooltipWidth: number,
   windowWidth: number,