diff --git a/tests/SkeletonText.test.svelte b/tests/SkeletonText.test.svelte
deleted file mode 100644
index 9a96f2bd..00000000
--- a/tests/SkeletonText.test.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/tests/SkeletonText/SkeletonText.test.svelte b/tests/SkeletonText/SkeletonText.test.svelte
new file mode 100644
index 00000000..1caddcfc
--- /dev/null
+++ b/tests/SkeletonText/SkeletonText.test.svelte
@@ -0,0 +1,27 @@
+
+
+ {
+ console.log("click");
+ }}
+ on:mouseover={() => {
+ console.log("mouseover");
+ }}
+ on:mouseenter={() => {
+ console.log("mouseenter");
+ }}
+ on:mouseleave={() => {
+ console.log("mouseleave");
+ }}
+/>
diff --git a/tests/SkeletonText/SkeletonText.test.ts b/tests/SkeletonText/SkeletonText.test.ts
new file mode 100644
index 00000000..7796b09a
--- /dev/null
+++ b/tests/SkeletonText/SkeletonText.test.ts
@@ -0,0 +1,90 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import SkeletonText from "./SkeletonText.test.svelte";
+
+describe("SkeletonText", () => {
+ it("should render with default props", () => {
+ render(SkeletonText);
+ const element = screen.getByRole("paragraph");
+ expect(element).toHaveClass("bx--skeleton__text");
+ expect(element).toHaveStyle({ width: "100%" });
+ });
+
+ it("should render heading variant", () => {
+ render(SkeletonText, { props: { heading: true } });
+ const element = screen.getByRole("paragraph");
+ expect(element).toHaveClass("bx--skeleton__text", "bx--skeleton__heading");
+ });
+
+ it("should render paragraph variant with default lines", () => {
+ render(SkeletonText, { props: { paragraph: true } });
+
+ const elements = screen.getAllByRole("paragraph");
+ expect(elements).toHaveLength(3); // default lines is 3
+ elements.forEach((element) => {
+ expect(element).toHaveClass("bx--skeleton__text");
+ });
+ });
+
+ it("should render paragraph with custom line count", () => {
+ render(SkeletonText, { props: { paragraph: true, lines: 8 } });
+
+ const elements = screen.getAllByRole("paragraph");
+ expect(elements).toHaveLength(8);
+ });
+
+ it("should render with custom width", () => {
+ render(SkeletonText, { props: { width: "50%" } });
+
+ const element = screen.getByRole("paragraph");
+ expect(element).toHaveStyle({ width: "50%" });
+ });
+
+ it("should render paragraph with pixel width", () => {
+ render(SkeletonText, { props: { paragraph: true, width: "200px" } });
+
+ const elements = screen.getAllByRole("paragraph");
+ elements.forEach((element) => {
+ const width = element.style.width;
+ expect(width).toMatch(/^\d+px$/);
+ const numWidth = parseInt(width);
+ expect(numWidth).toBeGreaterThanOrEqual(125); // 200 - 75
+ expect(numWidth).toBeLessThanOrEqual(200);
+ });
+ });
+
+ it("should handle mouse events", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(SkeletonText);
+
+ const element = screen.getByRole("paragraph");
+
+ await user.click(element);
+ expect(consoleLog).toHaveBeenCalledWith("click");
+
+ await user.hover(element);
+ expect(consoleLog).toHaveBeenCalledWith("mouseover");
+
+ await user.unhover(element);
+ expect(consoleLog).toHaveBeenCalledWith("mouseleave");
+ });
+
+ it("should handle paragraph mouse events", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(SkeletonText, { props: { paragraph: true } });
+
+ const container = screen.getAllByRole("paragraph")[0].parentElement;
+ expect(container).toBeTruthy();
+
+ if (container) {
+ await user.click(container);
+ expect(consoleLog).toHaveBeenCalledWith("click");
+
+ await user.hover(container);
+ expect(consoleLog).toHaveBeenCalledWith("mouseover");
+
+ await user.unhover(container);
+ expect(consoleLog).toHaveBeenCalledWith("mouseleave");
+ }
+ });
+});