diff --git a/tests/Tile.test.svelte b/tests/Tile.test.svelte deleted file mode 100644 index aeec2956..00000000 --- a/tests/Tile.test.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - -Content - -Content diff --git a/tests/Tile/Tile.test.svelte b/tests/Tile/Tile.test.svelte new file mode 100644 index 00000000..91a07708 --- /dev/null +++ b/tests/Tile/Tile.test.svelte @@ -0,0 +1,20 @@ + + +Default tile + +Light variant + + { + console.log("clicked"); + }} +> + Clickable tile + + + + Custom attributes + diff --git a/tests/Tile/Tile.test.ts b/tests/Tile/Tile.test.ts new file mode 100644 index 00000000..5e596df7 --- /dev/null +++ b/tests/Tile/Tile.test.ts @@ -0,0 +1,41 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import Tile from "./Tile.test.svelte"; + +describe("Tile", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("should render with default class", () => { + render(Tile); + + const tile = screen.getByText("Default tile"); + expect(tile).toHaveClass("bx--tile"); + }); + + it("should render light variant", () => { + render(Tile); + + const lightTile = screen.getByText("Light variant"); + expect(lightTile).toHaveClass("bx--tile", "bx--tile--light"); + }); + + it("should handle click events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(Tile); + + const tile = screen.getByTestId("click-test"); + await user.click(tile); + expect(consoleLog).toHaveBeenCalledWith("clicked"); + expect(consoleLog).toHaveBeenCalledTimes(1); + }); + + it("should pass through additional attributes", () => { + render(Tile); + + const tile = screen.getByTestId("attr-test"); + expect(tile).toHaveAttribute("title", "Custom title"); + expect(tile).toHaveClass("custom-class"); + }); +});