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