From 936a681194df954b665e86016b5c85bfe09aa323 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 2 Mar 2025 14:10:00 -0800
Subject: [PATCH] test(tooltip): add unit tests

---
 tests/Tooltip.test.svelte                     |  54 ------
 tests/Tooltip/Tooltip.test.ts                 | 168 ++++++++++++++++++
 tests/Tooltip/TooltipAlignments.test.svelte   |  15 ++
 .../Tooltip/TooltipCustomContent.test.svelte  |   7 +
 tests/Tooltip/TooltipCustomIcon.test.svelte   |   8 +
 tests/Tooltip/TooltipDefault.test.svelte      |   5 +
 tests/Tooltip/TooltipDirections.test.svelte   |  15 ++
 tests/Tooltip/TooltipEvents.test.svelte       |  27 +++
 tests/Tooltip/TooltipHideIcon.test.svelte     |  11 ++
 tests/Tooltip/TooltipOpen.test.svelte         |   7 +
 10 files changed, 263 insertions(+), 54 deletions(-)
 delete mode 100644 tests/Tooltip.test.svelte
 create mode 100644 tests/Tooltip/Tooltip.test.ts
 create mode 100644 tests/Tooltip/TooltipAlignments.test.svelte
 create mode 100644 tests/Tooltip/TooltipCustomContent.test.svelte
 create mode 100644 tests/Tooltip/TooltipCustomIcon.test.svelte
 create mode 100644 tests/Tooltip/TooltipDefault.test.svelte
 create mode 100644 tests/Tooltip/TooltipDirections.test.svelte
 create mode 100644 tests/Tooltip/TooltipEvents.test.svelte
 create mode 100644 tests/Tooltip/TooltipHideIcon.test.svelte
 create mode 100644 tests/Tooltip/TooltipOpen.test.svelte

diff --git a/tests/Tooltip.test.svelte b/tests/Tooltip.test.svelte
deleted file mode 100644
index 7d57f2c8..00000000
--- a/tests/Tooltip.test.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-  import { Tooltip, Link, Button } from "carbon-components-svelte";
-  import Catalog from "carbon-icons-svelte/lib/Catalog.svelte";
-
-  let open = true;
-</script>
-
-<Tooltip bind:open on:open on:close>
-  <p>Resources are provisioned based on your account's organization.</p>
-</Tooltip>
-
-<Tooltip triggerText="Resource list">
-  <p>Resources are provisioned based on your account's organization.</p>
-</Tooltip>
-
-<Tooltip triggerText="Top" direction="top">
-  <p>Top</p>
-</Tooltip>
-
-<Tooltip triggerText="Right" direction="right">
-  <p>Right</p>
-</Tooltip>
-
-<Tooltip triggerText="Bottom" direction="bottom">
-  <p>Bottom</p>
-</Tooltip>
-
-<Tooltip triggerText="Left" direction="left">
-  <p>Left</p>
-</Tooltip>
-
-<Tooltip triggerText="Resource list">
-  <p>Resources are provisioned based on your account's organization.</p>
-  <div class="bx--tooltip__footer">
-    <Link href="/">Learn more</Link>
-    <Button size="small">Manage</Button>
-  </div>
-</Tooltip>
-
-<Link href="/">Learn more</Link>
-
-<Button size="small">Manage</Button>
-
-<Tooltip triggerText="Resource list" icon={Catalog}>
-  <p>Resources are provisioned based on your account's organization.</p>
-</Tooltip>
-
-<Tooltip triggerText="Resource list">
-  <div
-    slot="icon"
-    style="width: 1rem; height: 1rem; outline: 1px solid red;"
-  ></div>
-  <p>Resources are provisioned based on your account's organization.</p>
-</Tooltip>
diff --git a/tests/Tooltip/Tooltip.test.ts b/tests/Tooltip/Tooltip.test.ts
new file mode 100644
index 00000000..8dde83e3
--- /dev/null
+++ b/tests/Tooltip/Tooltip.test.ts
@@ -0,0 +1,168 @@
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import TooltipDefault from "./TooltipDefault.test.svelte";
+import TooltipHideIcon from "./TooltipHideIcon.test.svelte";
+import TooltipOpen from "./TooltipOpen.test.svelte";
+import TooltipCustomContent from "./TooltipCustomContent.test.svelte";
+import TooltipCustomIcon from "./TooltipCustomIcon.test.svelte";
+import TooltipDirections from "./TooltipDirections.test.svelte";
+import TooltipAlignments from "./TooltipAlignments.test.svelte";
+import TooltipEvents from "./TooltipEvents.test.svelte";
+import { user } from "../setup-tests";
+
+describe("Tooltip", () => {
+  test("should render with default props", () => {
+    const { container } = render(TooltipDefault);
+    expect(container.querySelector(".bx--tooltip__label")).toBeInTheDocument();
+    expect(
+      container.querySelector(".bx--tooltip__trigger"),
+    ).toBeInTheDocument();
+  });
+
+  test("should hide icon when hideIcon is true", async () => {
+    const { container } = render(TooltipHideIcon);
+
+    expect(
+      container.querySelector(".bx--tooltip__trigger"),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText("Tooltip trigger")).toBeInTheDocument();
+    await user.click(screen.getByText("Tooltip trigger"));
+    expect(
+      screen.getByText("This tooltip has its icon hidden"),
+    ).toBeInTheDocument();
+  });
+
+  test("should show tooltip when open is true", () => {
+    const { container } = render(TooltipOpen);
+
+    expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
+    expect(container.querySelector(".bx--tooltip--shown")).toBeInTheDocument();
+    expect(
+      screen.getByText("This tooltip is initially open"),
+    ).toBeInTheDocument();
+  });
+
+  test("should open tooltip on focus", async () => {
+    const { container } = render(TooltipDefault);
+
+    const trigger = container.querySelector(".bx--tooltip__trigger");
+    assert(trigger);
+
+    await fireEvent.focus(trigger);
+    expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
+    expect(container.querySelector(".bx--tooltip--shown")).toBeInTheDocument();
+  });
+
+  test("should close tooltip on Escape key", async () => {
+    const { container } = render(TooltipOpen);
+
+    expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
+
+    const tooltip = container.querySelector(".bx--tooltip");
+    assert(tooltip);
+
+    await fireEvent.keyDown(tooltip, { key: "Escape" });
+    expect(container.querySelector(".bx--tooltip")).not.toBeInTheDocument();
+  });
+
+  test("should toggle tooltip on mousedown", async () => {
+    const { container } = render(TooltipDefault);
+
+    const trigger = container.querySelector(".bx--tooltip__trigger");
+    assert(trigger);
+
+    await user.click(trigger);
+    expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
+
+    await user.click(trigger);
+    expect(container.querySelector(".bx--tooltip")).not.toBeInTheDocument();
+  });
+
+  test("should render custom slot content", () => {
+    render(TooltipCustomContent);
+
+    expect(screen.getByTestId("tooltip-content")).toBeInTheDocument();
+    expect(screen.getByText("Custom tooltip content")).toBeInTheDocument();
+  });
+
+  test("should render custom icon via slot", async () => {
+    render(TooltipCustomIcon);
+
+    expect(screen.getByTestId("custom-icon")).toBeInTheDocument();
+    expect(screen.getByText("🔍")).toBeInTheDocument();
+
+    await user.click(screen.getByTestId("custom-icon"));
+    expect(screen.getByText("Custom icon tooltip")).toBeInTheDocument();
+  });
+
+  test("should apply correct direction classes", () => {
+    const { container } = render(TooltipDirections);
+
+    const tooltips = container.querySelectorAll(".bx--tooltip");
+
+    expect(tooltips.length).toBe(4);
+
+    expect(container.querySelector(".bx--tooltip--top")).toBeInTheDocument();
+    expect(container.querySelector(".bx--tooltip--right")).toBeInTheDocument();
+    expect(container.querySelector(".bx--tooltip--bottom")).toBeInTheDocument();
+    expect(container.querySelector(".bx--tooltip--left")).toBeInTheDocument();
+
+    expect(screen.getByText("Tooltip with top direction")).toBeInTheDocument();
+    expect(
+      screen.getByText("Tooltip with right direction"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("Tooltip with bottom direction"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Tooltip with left direction")).toBeInTheDocument();
+  });
+
+  test("should apply correct alignment classes", () => {
+    const { container } = render(TooltipAlignments);
+
+    const tooltips = container.querySelectorAll(".bx--tooltip");
+    expect(tooltips.length).toBe(3);
+
+    expect(
+      container.querySelector(".bx--tooltip--align-start"),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(".bx--tooltip--align-center"),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(".bx--tooltip--align-end"),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText("Tooltip with start alignment"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("Tooltip with center alignment"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Tooltip with end alignment")).toBeInTheDocument();
+  });
+
+  test("should dispatch events when tooltip opens and closes", async () => {
+    const { container } = render(TooltipEvents);
+
+    expect(screen.getByText("Open events: 0")).toBeInTheDocument();
+    expect(screen.getByText("Close events: 0")).toBeInTheDocument();
+
+    const trigger = container.querySelector(".bx--tooltip__trigger");
+    assert(trigger);
+
+    await user.click(trigger);
+    expect(screen.getByText("Open events: 1")).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+    expect(screen.getByText("Close events: 1")).toBeInTheDocument();
+  });
+
+  test("should close tooltip when clicking outside", async () => {
+    const { container } = render(TooltipOpen);
+
+    expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
+
+    await user.click(document.body);
+    expect(container.querySelector(".bx--tooltip")).not.toBeInTheDocument();
+  });
+});
diff --git a/tests/Tooltip/TooltipAlignments.test.svelte b/tests/Tooltip/TooltipAlignments.test.svelte
new file mode 100644
index 00000000..73b170e7
--- /dev/null
+++ b/tests/Tooltip/TooltipAlignments.test.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Tooltip } from "carbon-components-svelte";
+
+  const alignments = ["start", "center", "end"] as const;
+</script>
+
+<div>
+  {#each alignments as align}
+    <div style="margin: 50px;">
+      <Tooltip open={true} {align} iconDescription="Information">
+        Tooltip with {align} alignment
+      </Tooltip>
+    </div>
+  {/each}
+</div>
diff --git a/tests/Tooltip/TooltipCustomContent.test.svelte b/tests/Tooltip/TooltipCustomContent.test.svelte
new file mode 100644
index 00000000..837681e0
--- /dev/null
+++ b/tests/Tooltip/TooltipCustomContent.test.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Tooltip } from "carbon-components-svelte";
+</script>
+
+<Tooltip open={true} iconDescription="Information">
+  <p data-testid="tooltip-content">Custom tooltip content</p>
+</Tooltip>
diff --git a/tests/Tooltip/TooltipCustomIcon.test.svelte b/tests/Tooltip/TooltipCustomIcon.test.svelte
new file mode 100644
index 00000000..3546ac83
--- /dev/null
+++ b/tests/Tooltip/TooltipCustomIcon.test.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Tooltip } from "carbon-components-svelte";
+</script>
+
+<Tooltip iconDescription="Information">
+  <div slot="icon" data-testid="custom-icon">🔍</div>
+  Custom icon tooltip
+</Tooltip>
diff --git a/tests/Tooltip/TooltipDefault.test.svelte b/tests/Tooltip/TooltipDefault.test.svelte
new file mode 100644
index 00000000..af5a5827
--- /dev/null
+++ b/tests/Tooltip/TooltipDefault.test.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Tooltip } from "carbon-components-svelte";
+</script>
+
+<Tooltip iconDescription="Information" />
diff --git a/tests/Tooltip/TooltipDirections.test.svelte b/tests/Tooltip/TooltipDirections.test.svelte
new file mode 100644
index 00000000..acfe4a26
--- /dev/null
+++ b/tests/Tooltip/TooltipDirections.test.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Tooltip } from "carbon-components-svelte";
+
+  const directions = ["top", "right", "bottom", "left"] as const;
+</script>
+
+<div>
+  {#each directions as direction}
+    <div style="margin: 50px;">
+      <Tooltip open={true} {direction} iconDescription="Information">
+        Tooltip with {direction} direction
+      </Tooltip>
+    </div>
+  {/each}
+</div>
diff --git a/tests/Tooltip/TooltipEvents.test.svelte b/tests/Tooltip/TooltipEvents.test.svelte
new file mode 100644
index 00000000..1d7e6fae
--- /dev/null
+++ b/tests/Tooltip/TooltipEvents.test.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Tooltip } from "carbon-components-svelte";
+
+  let openCount = 0;
+  let closeCount = 0;
+
+  function handleOpen() {
+    openCount += 1;
+  }
+
+  function handleClose() {
+    closeCount += 1;
+  }
+</script>
+
+<div>
+  <p>Open events: {openCount}</p>
+  <p>Close events: {closeCount}</p>
+
+  <Tooltip
+    iconDescription="Information"
+    on:open={handleOpen}
+    on:close={handleClose}
+  >
+    Interact with this tooltip to trigger events
+  </Tooltip>
+</div>
diff --git a/tests/Tooltip/TooltipHideIcon.test.svelte b/tests/Tooltip/TooltipHideIcon.test.svelte
new file mode 100644
index 00000000..f6716d31
--- /dev/null
+++ b/tests/Tooltip/TooltipHideIcon.test.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Tooltip } from "carbon-components-svelte";
+</script>
+
+<Tooltip
+  hideIcon={true}
+  triggerText="Tooltip trigger"
+  iconDescription="Information"
+>
+  This tooltip has its icon hidden
+</Tooltip>
diff --git a/tests/Tooltip/TooltipOpen.test.svelte b/tests/Tooltip/TooltipOpen.test.svelte
new file mode 100644
index 00000000..0468808e
--- /dev/null
+++ b/tests/Tooltip/TooltipOpen.test.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Tooltip } from "carbon-components-svelte";
+</script>
+
+<Tooltip open={true} iconDescription="Information">
+  This tooltip is initially open
+</Tooltip>