diff --git a/tests/StructuredList.test.svelte b/tests/StructuredList.test.svelte
deleted file mode 100644
index f04ece1f..00000000
--- a/tests/StructuredList.test.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-
-
- {
- console.log(e.detail); // string
- }}
->
-
-
- Column A
- Column B
- Column C
-
-
-
-
- Row 1
- Row 1
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
- finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
- euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
- porttitor interdum.
-
-
-
- Row 2
- Row 2
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
- finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
- euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
- porttitor interdum.
-
-
-
- Row 3
- Row 3
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
- finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
- euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
- porttitor interdum.
-
-
-
-
-
-
-
-
- ColumnA
- ColumnB
- ColumnC
- {""}
-
-
-
- {#each [1, 2, 3] as item}
-
- Row {item}
- Row {item}
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
- magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
- sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
- vulputate nisl a porttitor interdum.
-
-
-
-
-
-
- {/each}
-
-
-
-
diff --git a/tests/StructuredList/StructuredList.test.svelte b/tests/StructuredList/StructuredList.test.svelte
new file mode 100644
index 00000000..cacf5f64
--- /dev/null
+++ b/tests/StructuredList/StructuredList.test.svelte
@@ -0,0 +1,79 @@
+
+
+ {
+ console.log("click");
+ }}
+ on:mouseover={() => {
+ console.log("mouseover");
+ }}
+ on:mouseenter={() => {
+ console.log("mouseenter");
+ }}
+ on:mouseleave={() => {
+ console.log("mouseleave");
+ }}
+ on:change={(e) => {
+ console.log("change", e.detail);
+ }}
+>
+
+
+ Column A
+ Column B
+ Column C
+ {#if selection}
+ {""}
+ {/if}
+
+
+
+ {#each ["1", "2", "3"] as item}
+
+ Row {item}
+ Row {item}
+ Content {item}
+ {#if selection}
+
+
+
+
+ {/if}
+
+ {/each}
+
+
+
+{selected}
diff --git a/tests/StructuredList/StructuredList.test.ts b/tests/StructuredList/StructuredList.test.ts
new file mode 100644
index 00000000..c11e7c89
--- /dev/null
+++ b/tests/StructuredList/StructuredList.test.ts
@@ -0,0 +1,131 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import StructuredList from "./StructuredList.test.svelte";
+import StructuredListCustom from "./StructuredListCustom.test.svelte";
+
+describe("StructuredList", () => {
+ it("should render with default props", () => {
+ render(StructuredList);
+
+ const list = screen.getByRole("table");
+ expect(list).toBeInTheDocument();
+ expect(list).toHaveClass("bx--structured-list");
+
+ // Check header cells
+ const headerCells = screen.getAllByRole("columnheader");
+ expect(headerCells).toHaveLength(3);
+ expect(headerCells[0]).toHaveTextContent("Column A");
+ expect(headerCells[1]).toHaveTextContent("Column B");
+ expect(headerCells[2]).toHaveTextContent("Column C");
+
+ // Check body cells
+ const cells = screen.getAllByRole("cell");
+ expect(cells).toHaveLength(9); // 3 rows x 3 columns
+ expect(cells[0]).toHaveTextContent("Row 1");
+ expect(cells[1]).toHaveTextContent("Row 1");
+ expect(cells[2]).toHaveTextContent("Content 1");
+ });
+
+ it("should handle condensed variant", () => {
+ render(StructuredList, { props: { condensed: true } });
+
+ expect(screen.getByRole("table")).toHaveClass(
+ "bx--structured-list--condensed",
+ );
+ });
+
+ it("should handle flush variant", () => {
+ render(StructuredList, { props: { flush: true } });
+
+ expect(screen.getByRole("table")).toHaveClass("bx--structured-list--flush");
+ });
+
+ it("should handle selection variant", () => {
+ render(StructuredList, { props: { selection: true } });
+
+ const list = screen.getByRole("table");
+ expect(list).toHaveClass("bx--structured-list--selection");
+
+ const inputs = screen.getAllByRole("radio");
+ expect(inputs).toHaveLength(3);
+
+ const checkmarks = screen.getAllByTitle("select an option");
+ expect(checkmarks).toHaveLength(3);
+ });
+
+ it("should handle selected state", async () => {
+ render(StructuredList, {
+ props: { selection: true, selected: "row-1-value" },
+ });
+
+ const selectedInput = screen.getByRole("radio", { checked: true });
+ expect(selectedInput.closest("label")).toHaveTextContent("Row 1");
+
+ await user.click(screen.getAllByRole("radio")[1]);
+ expect(
+ screen.getByRole("radio", { checked: true }).closest("label"),
+ ).toHaveTextContent("Row 2");
+ });
+
+ it("should handle selection change", async () => {
+ render(StructuredList, { props: { selection: true } });
+
+ const secondInput = screen.getAllByRole("radio")[1];
+ await user.click(secondInput);
+
+ expect(screen.getByTestId("value").textContent).toBe("row-2-value");
+ });
+
+ it("should handle custom content", () => {
+ render(StructuredListCustom);
+
+ expect(screen.getByTestId("custom-header")).toHaveTextContent(
+ "Custom Header",
+ );
+ expect(screen.getByTestId("custom-content")).toHaveTextContent(
+ "Custom Content",
+ );
+ });
+
+ it("should handle mouse events", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(StructuredList);
+
+ const list = screen.getByRole("table");
+
+ await user.click(list);
+ expect(consoleLog).toHaveBeenCalledWith("click");
+ await user.hover(list);
+ expect(consoleLog).toHaveBeenCalledWith("mouseover");
+ await user.unhover(list);
+ expect(consoleLog).toHaveBeenCalledWith("mouseleave");
+ });
+
+ it("should handle noWrap cells", () => {
+ render(StructuredList);
+
+ const noWrapCells = screen
+ .getAllByRole("cell")
+ .filter(
+ (cell) =>
+ cell.textContent?.startsWith("Row") && cell.textContent?.length === 5,
+ );
+
+ noWrapCells.forEach((cell) => {
+ expect(cell).toHaveClass("bx--structured-list-td");
+ });
+ });
+
+ it("should emit change event on selection", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(StructuredList, { props: { selection: true } });
+
+ expect(consoleLog).not.toHaveBeenCalled();
+
+ await user.click(screen.getAllByRole("radio")[1]);
+ expect(consoleLog).toHaveBeenCalledWith("change", "row-2-value");
+
+ await user.click(screen.getAllByRole("radio")[0]);
+ expect(consoleLog).toHaveBeenCalledWith("change", "row-1-value");
+ });
+});
diff --git a/tests/StructuredList/StructuredListCustom.test.svelte b/tests/StructuredList/StructuredListCustom.test.svelte
new file mode 100644
index 00000000..3ef8a400
--- /dev/null
+++ b/tests/StructuredList/StructuredListCustom.test.svelte
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Custom Header
+
+
+
+
+
+
+ Custom Content
+
+
+
+