test(selectable-tile): add unit tests

tests/SelectableTile.test.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { SelectableTile } from "carbon-components-svelte";
-</script>
-
-<SelectableTile selected>Multi-select Tile</SelectableTile>
-
-<SelectableTile selected>Multi-select Tile</SelectableTile>
-
-<SelectableTile>Multi-select Tile</SelectableTile>
-
-<SelectableTile light selected>Multi-select Tile</SelectableTile>
-
-<SelectableTile light selected>Multi-select Tile</SelectableTile>
-
-<SelectableTile light>Multi-select Tile</SelectableTile>

tests/Tile/SelectableTile.test.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { SelectableTile } from "carbon-components-svelte";
+
+  export let selected = false;
+  export let light = false;
+  export let disabled = false;
+  export let title = "Test Tile";
+  export let value = "test-value";
+  export let name = "test-name";
+  export let iconDescription = "Test checkmark";
+</script>
+
+<SelectableTile
+  data-testid="selectable-tile"
+  {selected}
+  {light}
+  {disabled}
+  {title}
+  {value}
+  {name}
+  {iconDescription}
+  on:select={(e) => {
+    console.log("select", e.detail);
+  }}
+  on:deselect={(e) => {
+    console.log("deselect", e.detail);
+  }}
+>
+  Test Tile Content
+</SelectableTile>

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