diff --git a/tests/SkeletonPlaceholder.test.svelte b/tests/SkeletonPlaceholder.test.svelte
deleted file mode 100644
index 46ceb881..00000000
--- a/tests/SkeletonPlaceholder.test.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
-
diff --git a/tests/SkeletonPlaceholder/SkeletonPlaceholder.test.svelte b/tests/SkeletonPlaceholder/SkeletonPlaceholder.test.svelte
new file mode 100644
index 00000000..c79dc33b
--- /dev/null
+++ b/tests/SkeletonPlaceholder/SkeletonPlaceholder.test.svelte
@@ -0,0 +1,20 @@
+
+
+ {
+ console.log("click");
+ }}
+ on:mouseover={() => {
+ console.log("mouseover");
+ }}
+ on:mouseenter={() => {
+ console.log("mouseenter");
+ }}
+ on:mouseleave={() => {
+ console.log("mouseleave");
+ }}
+/>
diff --git a/tests/SkeletonPlaceholder/SkeletonPlaceholder.test.ts b/tests/SkeletonPlaceholder/SkeletonPlaceholder.test.ts
new file mode 100644
index 00000000..0df9df0a
--- /dev/null
+++ b/tests/SkeletonPlaceholder/SkeletonPlaceholder.test.ts
@@ -0,0 +1,58 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import SkeletonPlaceholder from "./SkeletonPlaceholder.test.svelte";
+
+describe("SkeletonPlaceholder", () => {
+ it("should render with default props", () => {
+ render(SkeletonPlaceholder);
+
+ const element = screen.getByTestId("skeleton-placeholder");
+ expect(element).toHaveClass("bx--skeleton__placeholder");
+ });
+
+ it("should render with custom size", () => {
+ render(SkeletonPlaceholder, {
+ props: { style: "height: 12rem; width: 12rem;" },
+ });
+
+ const element = screen.getByTestId("skeleton-placeholder");
+ expect(element).toHaveStyle({ height: "12rem", width: "12rem" });
+ });
+
+ it("should handle mouse events", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(SkeletonPlaceholder);
+
+ const element = screen.getByTestId("skeleton-placeholder");
+
+ 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 accept additional attributes", () => {
+ render(SkeletonPlaceholder, {
+ props: {
+ "data-testid": "custom-placeholder",
+ "aria-label": "Loading placeholder",
+ },
+ });
+
+ const element = screen.getByTestId("custom-placeholder");
+ expect(element).toHaveAttribute("aria-label", "Loading placeholder");
+ });
+
+ it("should accept additional classes", () => {
+ render(SkeletonPlaceholder, {
+ props: { class: "custom-class" },
+ });
+
+ const element = screen.getByTestId("skeleton-placeholder");
+ expect(element).toHaveClass("bx--skeleton__placeholder", "custom-class");
+ });
+});