test(tooltip-icon): add unit tests

tests/TooltipIcon.test.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { TooltipIcon } from "carbon-components-svelte";
-  import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
-  import Filter from "carbon-icons-svelte/lib/Filter.svelte";
-  import FilterReset from "carbon-icons-svelte/lib/FilterReset.svelte";
-</script>
-
-<TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
-  <Carbon />
-</TooltipIcon>
-
-<TooltipIcon tooltipText="Top start" direction="top" align="start">
-  <Filter />
-</TooltipIcon>
-
-<TooltipIcon tooltipText="Right end" direction="right" align="end">
-  <Filter />
-</TooltipIcon>
-
-<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start">
-  <FilterReset />
-</TooltipIcon>
-
-<TooltipIcon tooltipText="Left start" direction="left" align="start">
-  <FilterReset />
-</TooltipIcon>
-
-<TooltipIcon>
-  <span slot="tooltipText" style="color: red"
-    >Carbon is an open source design system by IBM.</span
-  >
-  <Carbon />
-</TooltipIcon>

tests/TooltipIcon/TooltipIcon.test.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { TooltipIcon } from "carbon-components-svelte";
+  import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
+
+  export let tooltipText = "Test tooltip text";
+  export let disabled = false;
+  export let align: "start" | "center" | "end" = "center";
+  export let direction: "top" | "right" | "bottom" | "left" = "bottom";
+  export let id = "test-tooltip";
+  export let icon = Carbon;
+</script>
+
+<TooltipIcon
+  {tooltipText}
+  {disabled}
+  {align}
+  {direction}
+  {id}
+  {icon}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:focus
+>
+  <slot name="tooltipText" />
+  <slot />
+</TooltipIcon>

tests/TooltipIcon/TooltipIcon.test.ts

@@ -0,0 +1,120 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import TooltipIcon from "./TooltipIcon.test.svelte";
+
+describe("TooltipIcon", () => {
+  it("should render with default props", () => {
+    render(TooltipIcon);
+
+    expect(screen.getByText("Test tooltip text")).toBeInTheDocument();
+  });
+
+  it("should show and hide the tooltip", async () => {
+    render(TooltipIcon);
+
+    const trigger = screen.getByRole("button");
+    await user.hover(trigger);
+
+    expect(trigger).not.toHaveClass("bx--tooltip--hidden");
+
+    await user.keyboard("{Escape}");
+    expect(screen.getByRole("button")).toHaveClass("bx--tooltip--hidden");
+  });
+
+  it("should show tooltip on focus", async () => {
+    render(TooltipIcon);
+
+    const trigger = screen.getByRole("button");
+    await user.tab();
+
+    expect(trigger).not.toHaveClass("bx--tooltip--hidden");
+  });
+
+  it("should hide tooltip on Escape key", async () => {
+    render(TooltipIcon);
+
+    const trigger = screen.getByRole("button");
+    await user.hover(trigger);
+    await user.keyboard("{Escape}");
+
+    expect(trigger).toHaveClass("bx--tooltip--hidden");
+  });
+
+  describe("tooltip positioning", () => {
+    test.each([
+      ["top", "bx--tooltip--top"],
+      ["right", "bx--tooltip--right"],
+      ["bottom", "bx--tooltip--bottom"],
+      ["left", "bx--tooltip--left"],
+    ] as const)("should support %s direction", (direction, expectedClass) => {
+      render(TooltipIcon, {
+        props: { direction },
+      });
+
+      const trigger = screen.getByRole("button");
+      expect(trigger).toHaveClass(expectedClass);
+    });
+
+    test.each([
+      ["start", "bx--tooltip--align-start"],
+      ["center", "bx--tooltip--align-center"],
+      ["end", "bx--tooltip--align-end"],
+    ] as const)("should support %s alignment", (align, expectedClass) => {
+      render(TooltipIcon, {
+        props: { align },
+      });
+
+      const trigger = screen.getByRole("button");
+      expect(trigger).toHaveClass(expectedClass);
+    });
+  });
+
+  it("should support disabled state", () => {
+    render(TooltipIcon, {
+      props: { disabled: true },
+    });
+
+    const trigger = screen.getByRole("button");
+    expect(trigger).toBeDisabled();
+    expect(trigger).toHaveStyle({ cursor: "not-allowed" });
+    expect(trigger).toHaveClass("bx--tooltip--hidden");
+  });
+
+  it("should not show tooltip when disabled", async () => {
+    render(TooltipIcon, {
+      props: { disabled: true },
+    });
+
+    const trigger = screen.getByRole("button");
+    await user.hover(trigger);
+
+    expect(trigger).toHaveClass("bx--tooltip--hidden");
+  });
+
+  it("should support custom tooltip text", () => {
+    render(TooltipIcon, {
+      props: { tooltipText: "Custom tooltip" },
+    });
+
+    expect(screen.getByText("Custom tooltip")).toBeInTheDocument();
+  });
+
+  it("should use provided id for tooltip", () => {
+    render(TooltipIcon, {
+      props: { id: "custom-id" },
+    });
+
+    const tooltip = screen.getByRole("button");
+    expect(tooltip).toHaveAttribute("aria-describedby", "custom-id");
+  });
+
+  it("should have correct ARIA attributes", () => {
+    render(TooltipIcon);
+
+    const trigger = screen.getByRole("button");
+    const tooltip = screen.getByText("Test tooltip text");
+
+    expect(trigger).toHaveAttribute("aria-describedby", "test-tooltip");
+    expect(tooltip).toHaveClass("bx--assistive-text");
+  });
+});