test: write test for tooltipContent component and run prettier

Author: Parvinmh

src/packages/tooltip/tooltipContent.test.ts

@@ -0,0 +1,50 @@
+import { TooltipContent } from "./tooltipContent";
+
+describe("TooltipContent", () => {
+  it("renders plain text when tooltipRenderAsHtml is false", () => {
+    const el = TooltipContent({
+      text: "Hello, tooltip!",
+      tooltipRenderAsHtml: false,
+    });
+
+    expect(el.textContent).toBe("Hello, tooltip!");
+    expect(el.innerHTML).toBe("Hello, tooltip!");
+    expect(el.className).toBe("introjs-tooltiptext");
+  });
+
+  it("renders HTML content when tooltipRenderAsHtml is true", () => {
+    const el = TooltipContent({
+      text: "<strong>Bold Text</strong>",
+      tooltipRenderAsHtml: true,
+    });
+
+    expect(el.innerHTML).toBe("<strong>Bold Text</strong>");
+    expect(el.querySelector("strong")?.textContent).toBe("Bold Text");
+  });
+
+  it("applies a custom class when provided", () => {
+    const el = TooltipContent({
+      text: "Custom class test",
+      className: "my-custom-tooltip",
+    });
+
+    expect(el.className).toBe("my-custom-tooltip");
+    expect(el.textContent).toBe("Custom class test");
+  });
+
+  it("clears old content on re-derivation", () => {
+    const el = TooltipContent({
+      text: "<i>Initial</i>",
+      tooltipRenderAsHtml: true,
+    });
+
+    el.innerHTML = "<b>Old Content</b>"; // Simulate old content
+    const updated = TooltipContent({
+      text: "Updated text",
+      tooltipRenderAsHtml: false,
+    });
+
+    expect(updated.innerHTML).toBe("Updated text");
+    expect(updated.querySelector("b")).toBeNull();
+  });
+});

src/packages/tooltip/tooltipContent.ts

@@ -3,12 +3,16 @@ import dom from "../dom";
 const { div } = dom.tags;
 
 export type tooltipContentProps = {
-    text: string;
-    tooltipRenderAsHtml?: boolean;
-    className?: string;
- };
+  text: string;
+  tooltipRenderAsHtml?: boolean;
+  className?: string;
+};
 
-export const TooltipContent = ({ text, tooltipRenderAsHtml, className }: tooltipContentProps) => {
+export const TooltipContent = ({
+  text,
+  tooltipRenderAsHtml,
+  className,
+}: tooltipContentProps) => {
   const container = div({
     className: className || "introjs-tooltiptext",
   });
@@ -18,7 +22,7 @@ export const TooltipContent = ({ text, tooltipRenderAsHtml, className }: tooltip
     if (!el) return;
 
     // Clear existing content
-    el.innerHTML = '';
+    el.innerHTML = "";
 
     if (tooltipRenderAsHtml && text) {
       const fragment = document.createRange().createContextualFragment(text);

src/packages/tour/components/TourTooltip.ts

@@ -453,11 +453,11 @@ export const TourTooltip = ({
   children.push(Header({ title, skipLabel, onSkipClick }));
 
   children.push(
-      TooltipContent({
-        text,
-        tooltipRenderAsHtml: props.renderAsHtml,
-        className: tooltipTextClassName,
-      })
+    TooltipContent({
+      text,
+      tooltipRenderAsHtml: props.renderAsHtml,
+      className: tooltipTextClassName,
+    })
   );
 
   if (dontShowAgain) {