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