From 01683ae825d1d1b12a1c42467abb6a08045d0e72 Mon Sep 17 00:00:00 2001 From: Meena Date: Tue, 30 Apr 2024 22:36:04 +0100 Subject: [PATCH 1/2] remove suppress ts type check --- src/util/cloneObject.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/util/cloneObject.ts b/src/util/cloneObject.ts index 24d95d3d8..c44053c32 100644 --- a/src/util/cloneObject.ts +++ b/src/util/cloneObject.ts @@ -10,7 +10,6 @@ export default function cloneObject(source: T): T { const temp = {} as T; for (const key in source) { - // @ts-ignore:next-line if ( "jQuery" in window && window.jQuery && From f39b4210e6b9759e297a75606360a05f0e4f0fd8 Mon Sep 17 00:00:00 2001 From: Meena Date: Tue, 30 Apr 2024 23:26:23 +0100 Subject: [PATCH 2/2] simplify fetchIntroSteps and add tests --- src/core/fetchIntroSteps.ts | 66 ++++++++++--------------- tests/jest/core/fetchIntroSteps.test.ts | 62 +++++++++++++++++++++++ 2 files changed, 87 insertions(+), 41 deletions(-) diff --git a/src/core/fetchIntroSteps.ts b/src/core/fetchIntroSteps.ts index f057c147b..91187374e 100644 --- a/src/core/fetchIntroSteps.ts +++ b/src/core/fetchIntroSteps.ts @@ -12,9 +12,6 @@ export default function fetchIntroSteps( intro: IntroJs, targetElm: HTMLElement ) { - const allIntroSteps: HTMLElement[] = Array.from( - targetElm.querySelectorAll("*[data-intro]") - ); let introItems: IntroStep[] = []; if (intro._options.steps && intro._options.steps.length) { @@ -69,56 +66,51 @@ export default function fetchIntroSteps( } } } else { - //use steps from data-* annotations - const elmsLength = allIntroSteps.length; - let disableInteraction: boolean; + const elements: HTMLElement[] = Array.from( + targetElm.querySelectorAll("*[data-intro]") + ); //if there's no element to intro - if (elmsLength < 1) { + if (elements.length < 1) { return []; } const itemsWithoutStep: IntroStep[] = []; - for (const currentElement of allIntroSteps) { + for (const element of elements) { // start intro for groups of elements if ( intro._options.group && - currentElement.getAttribute("data-intro-group") !== intro._options.group + element.getAttribute("data-intro-group") !== intro._options.group ) { continue; } // skip hidden elements - if (currentElement.style.display === "none") { + if (element.style.display === "none") { continue; } // get the step for the current element or set as 0 if is not present - const step = parseInt( - currentElement.getAttribute("data-step") || "0", - 10 - ); - - disableInteraction = intro._options.disableInteraction; - if (currentElement.hasAttribute("data-disable-interaction")) { - disableInteraction = !!currentElement.getAttribute( - "data-disable-interaction" - ); + const step = parseInt(element.getAttribute("data-step") || "0", 10); + + let disableInteraction = intro._options.disableInteraction; + if (element.hasAttribute("data-disable-interaction")) { + disableInteraction = !!element.getAttribute("data-disable-interaction"); } + const newIntroStep: IntroStep = { - step: step, - element: currentElement, - title: currentElement.getAttribute("data-title") || "", - intro: currentElement.getAttribute("data-intro") || "", - tooltipClass: - currentElement.getAttribute("data-tooltip-class") || undefined, + step, + element, + title: element.getAttribute("data-title") || "", + intro: element.getAttribute("data-intro") || "", + tooltipClass: element.getAttribute("data-tooltip-class") || undefined, highlightClass: - currentElement.getAttribute("data-highlight-class") || undefined, - position: (currentElement.getAttribute("data-position") || + element.getAttribute("data-highlight-class") || undefined, + position: (element.getAttribute("data-position") || intro._options.tooltipPosition) as TooltipPosition, scrollTo: - (currentElement.getAttribute("data-scroll-to") as ScrollTo) || + (element.getAttribute("data-scroll-to") as ScrollTo) || intro._options.scrollTo, disableInteraction, }; @@ -130,7 +122,7 @@ export default function fetchIntroSteps( } } - //fill items without step in blanks and update their step + // fill items without step in blanks and update their step for (let i = 0; itemsWithoutStep.length > 0; i++) { if (typeof introItems[i] === "undefined") { const newStep = itemsWithoutStep.shift(); @@ -142,18 +134,10 @@ export default function fetchIntroSteps( } } - //removing undefined/null elements - const tempIntroItems = []; - for (let z = 0; z < introItems.length; z++) { - if (introItems[z]) { - // copy non-falsy values to the end of the array - tempIntroItems.push(introItems[z]); - } - } - - introItems = tempIntroItems; + // removing undefined/null elements + introItems = introItems.filter((n) => n); - //Ok, sort all items with given steps + // Sort all items with given steps introItems.sort((a, b) => a.step - b.step); return introItems; diff --git a/tests/jest/core/fetchIntroSteps.test.ts b/tests/jest/core/fetchIntroSteps.test.ts index 012452972..691a1f4f7 100644 --- a/tests/jest/core/fetchIntroSteps.test.ts +++ b/tests/jest/core/fetchIntroSteps.test.ts @@ -3,8 +3,10 @@ import fetchIntroSteps from "../../../src/core/fetchIntroSteps"; describe("fetchIntroSteps", () => { test("should add floating element from options.steps to the list", () => { + // Arrange const targetElement = document.createElement("div"); + // Act const steps = fetchIntroSteps( { _options: { @@ -22,6 +24,7 @@ describe("fetchIntroSteps", () => { targetElement ); + // Assert expect(steps.length).toBe(2); expect(steps[0].position).toBe("floating"); @@ -34,6 +37,7 @@ describe("fetchIntroSteps", () => { }); test("should find and add elements from options.steps to the list", () => { + // Arrange const targetElement = document.createElement("div"); const stepOne = document.createElement("div"); @@ -45,6 +49,7 @@ describe("fetchIntroSteps", () => { document.body.appendChild(stepOne); document.body.appendChild(stepTwo); + // Act const steps = fetchIntroSteps( { _options: { @@ -69,6 +74,7 @@ describe("fetchIntroSteps", () => { targetElement ); + // Assert expect(steps.length).toBe(3); expect(steps[0].element).toBe(stepOne); @@ -87,6 +93,7 @@ describe("fetchIntroSteps", () => { }); test("should find the data-* elements from the DOM", () => { + // Arrange const targetElement = document.createElement("div"); const stepOne = document.createElement("div"); @@ -99,6 +106,7 @@ describe("fetchIntroSteps", () => { targetElement.appendChild(stepOne); targetElement.appendChild(stepTwo); + // Act const steps = fetchIntroSteps( { _options: { @@ -108,6 +116,7 @@ describe("fetchIntroSteps", () => { targetElement ); + // Assert expect(steps.length).toBe(2); expect(steps[0].position).toBe("bottom"); @@ -120,6 +129,7 @@ describe("fetchIntroSteps", () => { }); test("should respect the custom step attribute (DOM)", () => { + // Arrange const targetElement = document.createElement("div"); const stepOne = document.createElement("div"); @@ -132,6 +142,7 @@ describe("fetchIntroSteps", () => { targetElement.appendChild(stepOne); targetElement.appendChild(stepTwo); + // Act const steps = fetchIntroSteps( { _options: { @@ -141,6 +152,7 @@ describe("fetchIntroSteps", () => { targetElement ); + // Assert expect(steps.length).toBe(2); expect(steps[0].intro).toBe("first"); @@ -151,6 +163,7 @@ describe("fetchIntroSteps", () => { }); test("should ignore DOM elements when options.steps is available", () => { + // Arrange const targetElement = document.createElement("div"); const stepOne = document.createElement("div"); @@ -162,6 +175,7 @@ describe("fetchIntroSteps", () => { targetElement.appendChild(stepOne); targetElement.appendChild(stepTwo); + // Act const steps = fetchIntroSteps( { _options: { @@ -178,8 +192,56 @@ describe("fetchIntroSteps", () => { targetElement ); + // Assert expect(steps.length).toBe(2); expect(steps[0].intro).toBe("steps-first"); expect(steps[1].intro).toBe("steps-second"); }); + + it("should correctly sort based on data-step", () => { + // Arrange + const targetElement = document.createElement("div"); + + const stepOne = document.createElement("div"); + stepOne.setAttribute("data-intro", "one"); + + const stepTwo = document.createElement("div"); + stepTwo.setAttribute("data-intro", "two"); + + const stepThree = document.createElement("div"); + stepThree.setAttribute("data-intro", "three"); + stepThree.setAttribute("data-step", "3"); + + const stepFour = document.createElement("div"); + stepFour.setAttribute("data-intro", "four"); + stepFour.setAttribute("data-step", "5"); + + targetElement.appendChild(stepThree); + targetElement.appendChild(stepOne); + targetElement.appendChild(stepFour); + targetElement.appendChild(stepTwo); + + // Act + const steps = fetchIntroSteps( + { + _options: {}, + } as IntroJs, + targetElement + ); + + // Assert + expect(steps.length).toBe(4); + + expect(steps[0].intro).toBe("one"); + expect(steps[0].step).toBe(1); + + expect(steps[1].intro).toBe("two"); + expect(steps[1].step).toBe(2); + + expect(steps[2].intro).toBe("three"); + expect(steps[2].step).toBe(3); + + expect(steps[3].intro).toBe("four"); + expect(steps[3].step).toBe(5); + }); });