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