diff --git a/tests/ClickableTile.test.svelte b/tests/ClickableTile.test.svelte deleted file mode 100644 index 3a7d0585..00000000 --- a/tests/ClickableTile.test.svelte +++ /dev/null @@ -1,16 +0,0 @@ - - - - Carbon Design System - - - - Carbon Design System - diff --git a/tests/Tile/ClickableTile.test.svelte b/tests/Tile/ClickableTile.test.svelte new file mode 100644 index 00000000..11f69c1e --- /dev/null +++ b/tests/Tile/ClickableTile.test.svelte @@ -0,0 +1,32 @@ + + + + Link only + + + + Link with light variant + + + { + console.log("clicked"); + }} +> + Click me + + +Clicked + + + Disabled tile + diff --git a/tests/Tile/ClickableTile.test.ts b/tests/Tile/ClickableTile.test.ts new file mode 100644 index 00000000..05e0d461 --- /dev/null +++ b/tests/Tile/ClickableTile.test.ts @@ -0,0 +1,53 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import ClickableTile from "./ClickableTile.test.svelte"; + +describe("ClickableTile", () => { + it("should render with href", () => { + render(ClickableTile); + + const tile = screen.getByText("Link only"); + expect(tile).toHaveAttribute("href", "https://www.carbondesignsystem.com/"); + expect(tile).toHaveClass("bx--tile", "bx--tile--clickable"); + }); + + it("should render light variant with other attributes", () => { + render(ClickableTile); + + const tile = screen.getByText("Link with light variant"); + expect(tile).toHaveClass("bx--tile--light"); + expect(tile).toHaveAttribute("target", "_blank"); + expect(tile).toHaveAttribute("title", ""); + }); + + it("should toggle clicked state on click", async () => { + render(ClickableTile); + + const tile = screen.getByTestId("click-test"); + expect(tile).not.toHaveClass("bx--tile--is-clicked"); + + await user.click(tile); + expect(tile).toHaveClass("bx--tile--is-clicked"); + + await user.click(tile); + expect(tile).not.toHaveClass("bx--tile--is-clicked"); + }); + + it("should have clicked state", async () => { + render(ClickableTile); + + const tile = screen.getByText("Clicked"); + expect(tile).toHaveClass("bx--tile--is-clicked"); + + await user.type(tile, "{Space}"); + expect(tile).not.toHaveClass("bx--tile--is-clicked"); + }); + + it("should respect disabled state", async () => { + render(ClickableTile); + + const disabledTile = screen.getByTestId("disabled-test"); + expect(disabledTile).toHaveAttribute("aria-disabled", "true"); + expect(disabledTile).toHaveClass("bx--tile--clickable"); + }); +});