From 56436f49b65309afa378b48f887e63aaf3ebbcd3 Mon Sep 17 00:00:00 2001 From: binrysearch Date: Tue, 25 Jun 2024 09:30:02 +0100 Subject: [PATCH] tooltip package --- src/option.test.ts | 35 +++ src/packages/hint/hintItem.ts | 2 +- src/packages/hint/option.ts | 2 +- src/packages/hint/tooltip.ts | 2 +- src/packages/tooltip/index.ts | 2 + src/packages/tooltip/placeTooltip.test.ts | 189 ++++++++++++ .../tooltip}/placeTooltip.ts | 31 +- src/packages/tooltip/tooltipPosition.ts | 12 + src/packages/tour/option.ts | 2 +- src/packages/tour/refresh.test.ts | 7 +- src/packages/tour/refresh.ts | 7 +- src/packages/tour/showElement.ts | 2 +- src/packages/tour/steps.ts | 2 +- src/packages/tour/tour.ts | 4 - src/util/containerElement.test.ts | 49 ++++ src/util/containerElement.ts | 18 ++ src/util/queryElement.ts | 13 + src/util/stamp.test.ts | 19 -- src/util/stamp.ts | 30 -- tests/jest/core/placeTooltip.test.ts | 274 ------------------ tests/jest/option.test.ts | 47 --- 21 files changed, 342 insertions(+), 407 deletions(-) create mode 100644 src/option.test.ts create mode 100644 src/packages/tooltip/index.ts create mode 100644 src/packages/tooltip/placeTooltip.test.ts rename src/{core => packages/tooltip}/placeTooltip.ts (94%) create mode 100644 src/packages/tooltip/tooltipPosition.ts create mode 100644 src/util/containerElement.test.ts create mode 100644 src/util/containerElement.ts delete mode 100644 src/util/stamp.test.ts delete mode 100644 src/util/stamp.ts delete mode 100644 tests/jest/core/placeTooltip.test.ts delete mode 100644 tests/jest/option.test.ts diff --git a/src/option.test.ts b/src/option.test.ts new file mode 100644 index 000000000..b8255a5e4 --- /dev/null +++ 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 index 59fd0ef53..aa5802ed1 100644 --- 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 index 076a06740..d64c5eb67 100644 --- 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 index ed4565f61..68a74160c 100644 --- 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 new file mode 100644 index 000000000..ca0d99c31 --- /dev/null +++ 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 new file mode 100644 index 000000000..6f83a6f72 --- /dev/null +++ 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 b/src/packages/tooltip/placeTooltip.ts similarity index 94% rename from src/core/placeTooltip.ts rename to src/packages/tooltip/placeTooltip.ts index e6be6827a..c3a380abc 100644 --- a/src/core/placeTooltip.ts +++ b/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 new file mode 100644 index 000000000..a42c6add7 --- /dev/null +++ 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 index 41c281ec3..913212511 100644 --- 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 index eaaa030bc..5d4cf55d9 100644 --- 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 index a333780d2..ead7ce800 100644 --- 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 index a11d3b931..f90c71c65 100644 --- 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 index 49ee66d10..433672173 100644 --- 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"; diff --git a/src/packages/tour/tour.ts b/src/packages/tour/tour.ts index b76b6281a..82afed174 100644 --- a/src/packages/tour/tour.ts +++ b/src/packages/tour/tour.ts @@ -223,7 +223,6 @@ export class Tour implements Package { /** * @deprecated `start()` is deprecated, please use `render()` instead. - * @returns {Tour} */ async start() { await this.render(); @@ -233,7 +232,6 @@ export class Tour implements Package { /** * Exit the tour * @param {boolean} force whether to force exit the tour - * @returns {Tour} */ async exit(force?: boolean) { await exitIntro(this, force ?? false); @@ -243,7 +241,6 @@ export class Tour implements Package { /** * Refresh the tour * @param {boolean} refreshSteps whether to refresh the tour steps - * @returns {Tour} */ refresh(refreshSteps?: boolean) { refresh(this, refreshSteps); @@ -252,7 +249,6 @@ export class Tour implements Package { /** * @deprecated onbeforechange is deprecated, please use onBeforeChange instead. - * @returns */ onbeforechange(callback: introBeforeChangeCallback) { return this.onBeforeChange(callback); diff --git a/src/util/containerElement.test.ts b/src/util/containerElement.test.ts new file mode 100644 index 000000000..049900901 --- /dev/null +++ b/src/util/containerElement.test.ts @@ -0,0 +1,49 @@ +import { getContainerElement } from "./containerElement"; +import * as queryElement from "./queryElement"; + +describe("containerElement", () => { + afterEach(() => { + jest.restoreAllMocks(); + }); + + describe("getContainerElement", () => { + it("should return document.body when arg is undefined", () => { + // Arrange, Act + const container = getContainerElement(undefined); + + // Assert + expect(container).toBe(document.body); + }); + + it("should return HTMLElement when arg is an element", () => { + // Arrange + const stubElement = document.createElement("div"); + + // Act + const container = getContainerElement(stubElement); + + // Assert + expect(container).toBe(stubElement); + }); + + it("should query element when arg is a string", () => { + // Arrange + const stubElement = document.createElement("div"); + jest.spyOn(queryElement, "getElement").mockReturnValue(stubElement); + + // Act + const container = getContainerElement("div"); + + // Assert + expect(container).toBe(stubElement); + }); + + it("should throw exception when selector is not found", () => { + // Arrange + jest.spyOn(queryElement, "queryElement").mockReturnValue(null); + + // Act, Assert + expect(() => getContainerElement("div")).toThrow(); + }); + }); +}); diff --git a/src/util/containerElement.ts b/src/util/containerElement.ts new file mode 100644 index 000000000..e67a2e0fb --- /dev/null +++ b/src/util/containerElement.ts @@ -0,0 +1,18 @@ +import { getElement } from "./queryElement"; + +/** + * Given an element or a selector, tries to find the appropriate container element. + */ +export const getContainerElement = ( + elementOrSelector?: string | HTMLElement +) => { + if (!elementOrSelector) { + return document.body; + } + + if (typeof elementOrSelector === "string") { + return getElement(elementOrSelector); + } + + return elementOrSelector; +}; diff --git a/src/util/queryElement.ts b/src/util/queryElement.ts index b841da7f5..cdae51baa 100644 --- a/src/util/queryElement.ts +++ b/src/util/queryElement.ts @@ -36,3 +36,16 @@ export const getElementByClassName = ( } return element; }; + +export const getElement = ( + selector: string, + container?: HTMLElement | null +) => { + const element = queryElement(selector, container); + + if (!element) { + throw new Error(`Element with selector ${selector} not found`); + } + + return element; +}; diff --git a/src/util/stamp.test.ts b/src/util/stamp.test.ts deleted file mode 100644 index 73574f828..000000000 --- a/src/util/stamp.test.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { IntroJs } from "../intro"; -import stamp from "./stamp"; - -describe("stamp", () => { - test("should stamp an IntroJS object", () => { - const instance = new IntroJs(document.body); - const stamped = stamp(instance); - - expect(stamped).toBe(0); - }); - - test("should increase the stamp number", () => { - const instance = new IntroJs(document.body); - stamp(instance); - const stamped = stamp(instance); - - expect(stamped).toBe(1); - }); -}); diff --git a/src/util/stamp.ts b/src/util/stamp.ts deleted file mode 100644 index c7900f90a..000000000 --- a/src/util/stamp.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * Mark any object with an incrementing number - * used for keeping track of objects - * - * @param Object obj Any object or DOM Element - * @param String key - * @return Object - */ -const stamp = (() => { - const keys: { - [key: string]: number; - } = {}; - return function stamp(obj: T, key = "introjs-stamp"): number { - // each group increments from 0 - keys[key] = keys[key] || 0; - - // stamp only once per object - // @ts-ignore - if (obj[key] === undefined) { - // increment key for each new object - // @ts-ignore - obj[key] = keys[key]++; - } - - // @ts-ignore - return obj[key]; - }; -})(); - -export default stamp; diff --git a/tests/jest/core/placeTooltip.test.ts b/tests/jest/core/placeTooltip.test.ts deleted file mode 100644 index 1873ca9a3..000000000 --- a/tests/jest/core/placeTooltip.test.ts +++ /dev/null @@ -1,274 +0,0 @@ -import * as getOffset from "../../../src/util/getOffset"; -import * as getWindowSize from "../../../src/util/getWindowSize"; -import placeTooltip from "../../../src/core/placeTooltip"; -import { IntroJs } from "../../../src/intro"; -import { IntroStep } from "../../../src/packages/tour/steps"; - -describe("placeTooltip", () => { - test("should automatically place the tooltip position when there is enough space", () => { - 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 currentStep: IntroStep = { - step: 0, - intro: "hello", - title: "hello", - position: "top", - element: document.createElement("div"), - scrollTo: "element", - }; - const tooltipLayer = document.createElement("div"); - const arrowLayer = document.createElement("div"); - - placeTooltip( - { - _currentStep: 0, - _introItems: [currentStep], - _options: { - positionPrecedence: ["top", "bottom", "left", "right"], - autoPosition: true, - }, - } as IntroJs, - currentStep, - tooltipLayer, - arrowLayer, - false - ); - - expect(tooltipLayer.className).toBe( - "introjs-tooltip introjs-top-right-aligned" - ); - }); - - test("should skip auto positioning when autoPosition is false", () => { - const currentStep: IntroStep = { - step: 0, - intro: "hello", - title: "hello", - position: "top", - element: document.createElement("div"), - scrollTo: "element", - }; - const tooltipLayer = document.createElement("div"); - const arrowLayer = document.createElement("div"); - - placeTooltip( - { - _currentStep: 0, - _introItems: [ - { - intro: "intro", - position: "top", - }, - ], - _options: { - positionPrecedence: ["top", "bottom"], - autoPosition: false, - }, - } as IntroJs, - currentStep, - tooltipLayer, - arrowLayer, - false - ); - - expect(tooltipLayer.className).toBe("introjs-tooltip introjs-top"); - }); - - test("should use floating tooltips when height/width is limited", () => { - 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 currentStep: IntroStep = { - step: 0, - intro: "hello", - title: "hello", - position: "left", - element: document.createElement("div"), - scrollTo: "element", - }; - const tooltipLayer = document.createElement("div"); - const arrowLayer = document.createElement("div"); - - placeTooltip( - { - _currentStep: 0, - _introItems: [currentStep], - _options: { - positionPrecedence: ["top", "bottom", "left", "right"], - autoPosition: true, - }, - } as IntroJs, - currentStep, - tooltipLayer, - arrowLayer, - false - ); - - expect(tooltipLayer.className).toBe("introjs-tooltip introjs-floating"); - }); - - test("should use bottom middle aligned when there is enough vertical space", () => { - 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 currentStep: IntroStep = { - step: 0, - intro: "hello", - title: "hello", - position: "left", - element: document.createElement("div"), - scrollTo: "element", - }; - const tooltipLayer = document.createElement("div"); - const arrowLayer = document.createElement("div"); - - placeTooltip( - { - _currentStep: 0, - _introItems: [currentStep], - _options: { - positionPrecedence: ["top", "bottom", "left", "right"], - autoPosition: true, - }, - } as IntroJs, - currentStep, - tooltipLayer, - arrowLayer, - false - ); - - expect(tooltipLayer.className).toBe( - "introjs-tooltip introjs-bottom-middle-aligned" - ); - }); - - test("should attach the global custom tooltip css class", () => { - const currentStep: IntroStep = { - step: 0, - intro: "hello", - title: "hello", - position: "left", - element: document.createElement("div"), - scrollTo: "element", - }; - const tooltipLayer = document.createElement("div"); - const arrowLayer = document.createElement("div"); - - placeTooltip( - { - _currentStep: 0, - _introItems: [currentStep], - _options: { - positionPrecedence: ["top", "bottom", "left", "right"], - autoPosition: true, - tooltipClass: "newclass", - }, - } as IntroJs, - currentStep, - tooltipLayer, - arrowLayer, - false - ); - - expect(tooltipLayer.className).toBe( - "introjs-tooltip newclass introjs-bottom-middle-aligned" - ); - }); - - test("should attach the step custom tooltip css class", () => { - const currentStep: IntroStep = { - step: 0, - intro: "hello", - title: "hello", - position: "left", - element: document.createElement("div"), - scrollTo: "element", - tooltipClass: "myclass", - }; - const tooltipLayer = document.createElement("div"); - const arrowLayer = document.createElement("div"); - - placeTooltip( - { - _currentStep: 0, - _introItems: [currentStep], - _options: { - positionPrecedence: ["top", "bottom", "left", "right"], - autoPosition: true, - }, - } as IntroJs, - currentStep, - tooltipLayer, - arrowLayer, - false - ); - - expect(tooltipLayer.className).toBe( - "introjs-tooltip myclass introjs-bottom-middle-aligned" - ); - }); -}); diff --git a/tests/jest/option.test.ts b/tests/jest/option.test.ts deleted file mode 100644 index 1889e3076..000000000 --- a/tests/jest/option.test.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { getDefaultOptions, setOption, setOptions } from "../../src/option"; - -describe("option", () => { - test("should return the default options", () => { - const defaultOptions = getDefaultOptions(); - expect(defaultOptions).toBeObject(); - }); - - test("should return empty steps array", () => { - const defaultOptions = getDefaultOptions(); - expect(defaultOptions.steps).toBeEmpty(); - }); - - test("should set a single option", () => { - const defaultOptions = getDefaultOptions(); - - const prevNextLabel = defaultOptions.nextLabel; - - setOption(defaultOptions, "nextLabel", "Boo!"); - - expect(defaultOptions.nextLabel).toBe("Boo!"); - expect(defaultOptions.nextLabel).not.toEqual(prevNextLabel); - }); - - test("should return the correct updated options", () => { - const defaultOptions = getDefaultOptions(); - - const updatedOptions = setOption(defaultOptions, "nextLabel", "Boo!"); - - expect(updatedOptions.nextLabel).toBe("Boo!"); - }); - - test("should set a multiple options", () => { - const defaultOptions = getDefaultOptions(); - - const prevNextLabel = defaultOptions.nextLabel; - - setOptions(defaultOptions, { - nextLabel: "Boo!", - highlightClass: "HighlightClass", - }); - - expect(defaultOptions.nextLabel).toBe("Boo!"); - expect(defaultOptions.nextLabel).not.toEqual(prevNextLabel); - expect(defaultOptions.highlightClass).toBe("HighlightClass"); - }); -});