test(truncate): add unit tests

tests/Truncate.test.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import { Truncate, truncate } from "carbon-components-svelte";
-</script>
-
-<Truncate>
-  Carbon Components Svelte is a Svelte component library that implements the
-  Carbon Design System, an open source design system by IBM.
-</Truncate>
-
-<Truncate clamp="front">
-  Carbon Components Svelte is a Svelte component library that implements the
-  Carbon Design System, an open source design system by IBM.
-</Truncate>
-
-<h4 use:truncate>
-  Carbon Components Svelte is a Svelte component library that implements the
-  Carbon Design System, an open source design system by IBM.
-</h4>
-<h4 use:truncate={{ clamp: "front" }}>
-  Carbon Components Svelte is a Svelte component library that implements the
-  Carbon Design System, an open source design system by IBM.
-</h4>

tests/Truncate/Truncate.test.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Truncate } from "carbon-components-svelte";
+
+  export let clamp: "end" | "front" = "end";
+  export let text =
+    "This is a long text that should be truncated when it exceeds the available space";
+</script>
+
+<Truncate {clamp}>
+  {text}
+</Truncate>

tests/Truncate/Truncate.test.ts

@@ -0,0 +1,90 @@
+import { render, screen } from "@testing-library/svelte";
+import Truncate from "./Truncate.test.svelte";
+import TruncateAction from "./TruncateAction.test.svelte";
+
+describe("Truncate", () => {
+  describe("component", () => {
+    test.each([
+      ["end", "bx--text-truncate--end"],
+      ["front", "bx--text-truncate--front"],
+    ] as const)("should support %s clamp", (clamp, expectedClass) => {
+      render(Truncate, { props: { clamp } });
+
+      const element = screen.getByText(/This is a long text/);
+      expect(element).toHaveClass(expectedClass);
+    });
+
+    it("should render text content", () => {
+      const text = "Custom text content";
+      render(Truncate, { props: { text } });
+
+      expect(screen.getByText(text)).toBeInTheDocument();
+    });
+
+    it("should render as paragraph element", () => {
+      render(Truncate);
+
+      const element = screen.getByText(/This is a long text/);
+      expect(element.tagName).toBe("P");
+    });
+
+    it("should default to end clamp", () => {
+      render(Truncate);
+
+      const element = screen.getByText(/This is a long text/);
+      expect(element).toHaveClass("bx--text-truncate--end");
+    });
+  });
+
+  describe("action", () => {
+    test.each([
+      ["end", "bx--text-truncate--end"],
+      ["front", "bx--text-truncate--front"],
+    ] as const)("should support %s clamp", (clamp, expectedClass) => {
+      render(TruncateAction, { props: { clamp } });
+
+      const element = screen.getByText(/This is a long text/);
+      expect(element).toHaveClass(expectedClass);
+    });
+
+    test.each([
+      ["h1", "H1"],
+      ["h2", "H2"],
+      ["h3", "H3"],
+      ["h4", "H4"],
+      ["p", "P"],
+      ["span", "SPAN"],
+    ] as const)("should work with %s element", (elementType, expectedTag) => {
+      render(TruncateAction, { props: { element: elementType } });
+
+      const element = screen.getByText(/This is a long text/);
+      expect(element.tagName).toBe(expectedTag);
+      expect(element).toHaveClass("bx--text-truncate--end");
+    });
+
+    it("should preserve existing classes", () => {
+      render(TruncateAction, {
+        props: {
+          element: "p",
+          text: "Test",
+        },
+      });
+
+      const element = screen.getByText("Test");
+      element.classList.add("custom-class");
+
+      // Trigger update
+      element.dispatchEvent(new Event("update"));
+
+      expect(element).toHaveClass("custom-class");
+      expect(element).toHaveClass("bx--text-truncate--end");
+    });
+
+    it("should default to end clamp", () => {
+      render(TruncateAction);
+
+      const element = screen.getByText(/This is a long text/);
+      expect(element).toHaveClass("bx--text-truncate--end");
+    });
+  });
+});

tests/Truncate/TruncateAction.test.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { truncate } from "carbon-components-svelte";
+
+  export let clamp: "end" | "front" = "end";
+  export let text =
+    "This is a long text that should be truncated when it exceeds the available space";
+  export let element: "h1" | "h2" | "h3" | "h4" | "p" | "span" = "p";
+</script>
+
+{#if element === "h1"}
+  <h1 use:truncate={{ clamp }}>{text}</h1>
+{:else if element === "h2"}
+  <h2 use:truncate={{ clamp }}>{text}</h2>
+{:else if element === "h3"}
+  <h3 use:truncate={{ clamp }}>{text}</h3>
+{:else if element === "h4"}
+  <h4 use:truncate={{ clamp }}>{text}</h4>
+{:else if element === "span"}
+  <span use:truncate={{ clamp }}>{text}</span>
+{:else}
+  <p use:truncate={{ clamp }}>{text}</p>
+{/if}