test(skeleton-placeholder): add unit tests

tests/SkeletonPlaceholder.test.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-  import { SkeletonPlaceholder } from "carbon-components-svelte";
-</script>
-
-<SkeletonPlaceholder />
-
-<SkeletonPlaceholder style="height: 12rem; width: 12rem;" />

tests/SkeletonPlaceholder/SkeletonPlaceholder.test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { SkeletonPlaceholder } from "carbon-components-svelte";
+</script>
+
+<SkeletonPlaceholder
+  data-testid="skeleton-placeholder"
+  {...$$props}
+  on:click={() => {
+    console.log("click");
+  }}
+  on:mouseover={() => {
+    console.log("mouseover");
+  }}
+  on:mouseenter={() => {
+    console.log("mouseenter");
+  }}
+  on:mouseleave={() => {
+    console.log("mouseleave");
+  }}
+/>

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