From 332cdc573f4ec6d759d98ba53ae1b9de4e408beb Mon Sep 17 00:00:00 2001
From: Amir Ali <amiraliazimloo123@gmail.com>
Date: Fri, 30 May 2025 13:17:11 +0330
Subject: [PATCH] test: add unit tests for Tooltip component

---
 __tests__/components/tooltip.spec.tsx | 65 +++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 __tests__/components/tooltip.spec.tsx

diff --git a/__tests__/components/tooltip.spec.tsx b/__tests__/components/tooltip.spec.tsx
new file mode 100644
index 0000000..e74c9db
--- /dev/null
+++ b/__tests__/components/tooltip.spec.tsx
@@ -0,0 +1,65 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+
+import { Tooltip } from "@/components/Tooltip/Tooltip"
+
+describe("Tooltip", () => {
+  it("should render tooltip content when open is true", () => {
+    render(
+      <Tooltip explainer="Click me" open={true}>
+        <div>Hover me</div>
+      </Tooltip>
+    )
+
+    expect(screen.getByText("Hover me")).toBeInTheDocument()
+
+    const tooltipContent = document.querySelector('[data-radix-popper-content-wrapper]')
+    expect(tooltipContent).toBeInTheDocument()
+    expect(tooltipContent).toHaveTextContent("Click me")
+  })
+
+  it("should not render tooltip content when open is false or undefined", () => {
+    render(
+      <Tooltip explainer="Click me">
+        <div>Hover me</div>
+      </Tooltip>
+    )
+
+    expect(screen.getByText("Hover me")).toBeInTheDocument()
+    const tooltipContent = document.querySelector('[data-radix-popper-content-wrapper]')
+    expect(tooltipContent).not.toBeInTheDocument()
+  })
+
+  it("calls onOpenChange when tooltip open state changes", async () => {
+    const handleOpenChange = jest.fn()
+
+    render(
+      <Tooltip explainer="Controlled" open={false} onOpenChange={handleOpenChange}>
+        <button>Hover me</button>
+      </Tooltip>
+    )
+
+    expect(screen.queryByText("Controlled")).not.toBeInTheDocument()
+
+    fireEvent.mouseOver(screen.getByText("Hover me"))
+
+    expect(screen.queryByText("Controlled")).not.toBeInTheDocument()
+
+    handleOpenChange(true)
+
+    expect(handleOpenChange).toHaveBeenCalledWith(true)
+  })
+
+  it("renders arrow when withArrow is true", () => {
+    const { container } = render(
+      <Tooltip explainer="Tooltip with arrow" open={true} withArrow={true}>
+        <button>Hover me</button>
+      </Tooltip>
+    )
+
+    console.log(container.innerHTML)
+
+    const arrow = document.querySelector('svg')
+    expect(arrow).toBeInTheDocument()
+  })
+
+})