diff --git a/tests/SelectableTile.test.svelte b/tests/SelectableTile.test.svelte
deleted file mode 100644
index f5cdddb9..00000000
--- a/tests/SelectableTile.test.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-Multi-select Tile
-
-Multi-select Tile
-
-Multi-select Tile
-
-Multi-select Tile
-
-Multi-select Tile
-
-Multi-select Tile
diff --git a/tests/Tile/SelectableTile.test.svelte b/tests/Tile/SelectableTile.test.svelte
new file mode 100644
index 00000000..14da7f0e
--- /dev/null
+++ b/tests/Tile/SelectableTile.test.svelte
@@ -0,0 +1,30 @@
+
+
+ {
+ console.log("select", e.detail);
+ }}
+ on:deselect={(e) => {
+ console.log("deselect", e.detail);
+ }}
+>
+ Test Tile Content
+
diff --git a/tests/Tile/SelectableTile.test.ts b/tests/Tile/SelectableTile.test.ts
new file mode 100644
index 00000000..377e0cfb
--- /dev/null
+++ b/tests/Tile/SelectableTile.test.ts
@@ -0,0 +1,100 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import SelectableTileTest from "./SelectableTile.test.svelte";
+
+describe("SelectableTile", () => {
+ it("renders with default props", () => {
+ render(SelectableTileTest);
+ const tile = screen.getByTestId("selectable-tile");
+ expect(tile).toHaveClass("bx--tile");
+ expect(tile).toHaveClass("bx--tile--selectable");
+ });
+
+ it("renders with selected state", () => {
+ render(SelectableTileTest, { selected: true });
+ const tile = screen.getByTestId("selectable-tile");
+ expect(tile).toHaveClass("bx--tile--is-selected");
+ });
+
+ it("renders with light variant", () => {
+ render(SelectableTileTest, { light: true });
+ const tile = screen.getByTestId("selectable-tile");
+ expect(tile).toHaveClass("bx--tile--light");
+ });
+
+ it("renders with disabled state", () => {
+ render(SelectableTileTest, { disabled: true });
+ const tile = screen.getByTestId("selectable-tile");
+ expect(tile).toHaveClass("bx--tile--disabled");
+ });
+
+ it("renders with custom title and value", () => {
+ render(SelectableTileTest, {
+ title: "Custom Title",
+ value: "custom-value",
+ });
+ const input = screen.getByRole("checkbox");
+ expect(input).toHaveAttribute("title", "Custom Title");
+ expect(input).toHaveAttribute("value", "custom-value");
+ });
+
+ it("renders with custom name and icon description", () => {
+ render(SelectableTileTest, {
+ name: "custom-name",
+ iconDescription: "Custom checkmark",
+ });
+
+ const input = screen.getByRole("checkbox");
+ expect(input).toHaveAttribute("name", "custom-name");
+
+ const icon = screen.getByTestId("selectable-tile").querySelector("svg");
+ expect(icon).toHaveAttribute("aria-label", "Custom checkmark");
+ });
+
+ describe("interaction", () => {
+ it("handles click selection", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(SelectableTileTest);
+
+ const tile = screen.getByTestId("selectable-tile");
+ await user.click(tile);
+ expect(consoleLog).toHaveBeenCalledWith("select", expect.any(String));
+ });
+
+ it("handles click deselection", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(SelectableTileTest, { selected: true });
+
+ const tile = screen.getByTestId("selectable-tile");
+ await user.click(tile);
+ expect(consoleLog).toHaveBeenCalledWith("deselect", expect.any(String));
+ });
+
+ it("prevents selection when disabled", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(SelectableTileTest, { disabled: true });
+
+ const tile = screen.getByTestId("selectable-tile");
+ await user.click(tile);
+ expect(consoleLog).not.toHaveBeenCalled();
+ });
+
+ it("handles keyboard selection", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(SelectableTileTest);
+
+ await user.keyboard("{Tab}");
+ await user.keyboard("{Enter}");
+ expect(consoleLog).toHaveBeenCalledWith("select", expect.any(String));
+ });
+
+ it("handles keyboard deselection", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(SelectableTileTest, { selected: true });
+
+ await user.keyboard("{Tab}");
+ await user.keyboard("{Enter}");
+ expect(consoleLog).toHaveBeenCalledWith("deselect", expect.any(String));
+ });
+ });
+});