test(tooltip): add unit tests

tests/Tooltip.test.svelte

@@ -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>

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();
+  });
+});

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>

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>

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>

tests/Tooltip/TooltipDefault.test.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Tooltip } from "carbon-components-svelte";
+</script>
+
+<Tooltip iconDescription="Information" />

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>

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>

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>

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>