test(ordered-list): add unit tests

tests/OrderedList.test.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-  import { OrderedList, ListItem, Link } from "carbon-components-svelte";
-</script>
-
-<OrderedList>
-  <ListItem>Ordered list item</ListItem>
-  <ListItem>Ordered list item</ListItem>
-  <ListItem>Ordered list item</ListItem>
-</OrderedList>
-
-<OrderedList>
-  <ListItem>
-    <Link href="#">Ordered list item</Link>
-  </ListItem>
-  <ListItem>
-    <Link href="#">Ordered list item</Link>
-  </ListItem>
-  <ListItem>
-    <Link href="#">Ordered list item</Link>
-  </ListItem>
-</OrderedList>
-
-<OrderedList>
-  <ListItem>
-    Ordered list level 1
-    <OrderedList nested>
-      <ListItem>Ordered list level 2</ListItem>
-      <ListItem>
-        Ordered list level 3
-        <OrderedList nested>
-          <ListItem>Ordered list level 3</ListItem>
-          <ListItem>Ordered list level 3</ListItem>
-        </OrderedList>
-      </ListItem>
-    </OrderedList>
-  </ListItem>
-  <ListItem>Ordered list level 1</ListItem>
-  <ListItem>Ordered list level 1</ListItem>
-</OrderedList>
-
-<OrderedList native>
-  <ListItem>
-    Ordered list level 1
-    <OrderedList nested>
-      <ListItem>Ordered list level 2</ListItem>
-      <ListItem>
-        Ordered list level 3
-        <OrderedList nested>
-          <ListItem>Ordered list level 3</ListItem>
-          <ListItem>Ordered list level 3</ListItem>
-        </OrderedList>
-      </ListItem>
-    </OrderedList>
-  </ListItem>
-  <ListItem>Ordered list level 1</ListItem>
-  <ListItem>Ordered list level 1</ListItem>
-</OrderedList>

tests/OrderedList/OrderedList.test.svelte

@@ -0,0 +1,36 @@
+<svelte:options accessors />
+
+<script lang="ts">
+  import { OrderedList, ListItem } from "carbon-components-svelte";
+
+  export let nested = false;
+  export let native = false;
+  export let expressive = false;
+  export let items: string[] = ["Item 1", "Item 2", "Item 3"];
+  export let nestedItems: string[] = [];
+</script>
+
+<div data-testid="list-wrapper">
+  <OrderedList
+    {nested}
+    {native}
+    {expressive}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+  >
+    {#each items as item}
+      <ListItem>
+        {item}
+        {#if nested && nestedItems.length > 0}
+          <OrderedList nested>
+            {#each nestedItems as nestedItem}
+              <ListItem>{nestedItem}</ListItem>
+            {/each}
+          </OrderedList>
+        {/if}
+      </ListItem>
+    {/each}
+  </OrderedList>
+</div>

tests/OrderedList/OrderedList.test.ts

@@ -0,0 +1,172 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import OrderedList from "./OrderedList.test.svelte";
+
+describe("OrderedList", () => {
+  it("should render with default props", () => {
+    render(OrderedList);
+
+    const list = screen.getByRole("list");
+    expect(list).toHaveClass("bx--list--ordered");
+    expect(list).not.toHaveClass("bx--list--ordered--native");
+    expect(list).not.toHaveClass("bx--list--nested");
+    expect(list).not.toHaveClass("bx--list--expressive");
+
+    const items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(3);
+    expect(items[0]).toHaveTextContent("Item 1");
+    expect(items[1]).toHaveTextContent("Item 2");
+    expect(items[2]).toHaveTextContent("Item 3");
+  });
+
+  it("should support nested lists", () => {
+    render(OrderedList, {
+      props: {
+        nested: true,
+        nestedItems: ["Nested 1", "Nested 2"],
+      },
+    });
+
+    const lists = screen.getAllByRole("list");
+    expect(lists).toHaveLength(4); // Main list + 3 nested lists (one for each main item)
+
+    const mainList = lists[0];
+    expect(mainList).toHaveClass("bx--list--ordered");
+    expect(mainList).toHaveClass("bx--list--nested");
+
+    const nestedLists = lists.slice(1);
+    nestedLists.forEach((list) => {
+      expect(list).toHaveClass("bx--list--ordered");
+      expect(list).toHaveClass("bx--list--nested");
+    });
+
+    const items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(9); // 3 main items + (2 nested items × 3)
+  });
+
+  it("should support native list styles", () => {
+    render(OrderedList, {
+      props: { native: true },
+    });
+
+    const list = screen.getByRole("list");
+    expect(list).toHaveClass("bx--list--ordered--native");
+    expect(list).not.toHaveClass("bx--list--ordered");
+  });
+
+  it("should support native list styles with nesting", () => {
+    render(OrderedList, {
+      props: {
+        native: true,
+        nested: true,
+        nestedItems: ["Nested 1", "Nested 2"],
+      },
+    });
+
+    const lists = screen.getAllByRole("list");
+
+    // Only the top-level list has the native class
+    expect(lists[0]).toHaveClass("bx--list--ordered--native");
+    expect(lists[0]).not.toHaveClass("bx--list--ordered");
+
+    lists.slice(1).forEach((list) => {
+      expect(list).toHaveClass("bx--list--ordered bx--list--nested");
+      expect(list).not.toHaveClass("bx--list--ordered--native");
+    });
+  });
+
+  it("should support expressive styles", () => {
+    render(OrderedList, {
+      props: { expressive: true },
+    });
+
+    const list = screen.getByRole("list");
+    expect(list).toHaveClass("bx--list--expressive");
+  });
+
+  it("should support custom items", () => {
+    const customItems = ["Custom 1", "Custom 2", "Custom 3", "Custom 4"];
+    render(OrderedList, {
+      props: { items: customItems },
+    });
+
+    const items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(customItems.length);
+    items.forEach((item, index) => {
+      expect(item).toHaveTextContent(customItems[index]);
+    });
+  });
+
+  describe("events", () => {
+    it("should emit click event", async () => {
+      const { component } = render(OrderedList);
+      const list = screen.getByRole("list");
+
+      const mock = vi.fn();
+      component.$on("click", mock);
+
+      await user.click(list);
+      expect(mock).toHaveBeenCalled();
+    });
+
+    test.each(["mouseover", "mouseenter", "mouseleave"])(
+      "should emit %s event",
+      (eventName) => {
+        const { component } = render(OrderedList);
+        const list = screen.getByRole("list");
+
+        const mock = vi.fn();
+        component.$on(eventName, mock);
+
+        const event = new MouseEvent(eventName);
+        list.dispatchEvent(event);
+
+        expect(mock).toHaveBeenCalled();
+      },
+    );
+  });
+
+  describe("accessibility", () => {
+    it("should have correct ARIA role", () => {
+      render(OrderedList);
+
+      const list = screen.getByRole("list");
+      expect(list.tagName).toBe("OL");
+
+      const items = screen.getAllByRole("listitem");
+      items.forEach((item) => {
+        expect(item.tagName).toBe("LI");
+      });
+    });
+
+    it("should maintain list structure with nested items", () => {
+      render(OrderedList, {
+        props: {
+          nested: true,
+          nestedItems: ["Nested 1", "Nested 2"],
+        },
+      });
+
+      const lists = screen.getAllByRole("list");
+      lists.forEach((list) => {
+        expect(list.tagName).toBe("OL");
+        expect(list.children).toBeTruthy();
+        Array.from(list.children).forEach((child) => {
+          expect(child.tagName).toBe("LI");
+        });
+      });
+    });
+
+    it("should maintain correct order with native styles", () => {
+      const items = ["First", "Second", "Third", "Fourth", "Fifth"];
+      render(OrderedList, {
+        props: { native: true, items },
+      });
+
+      const listItems = screen.getAllByRole("listitem");
+      items.forEach((text, index) => {
+        expect(listItems[index]).toHaveTextContent(text);
+      });
+    });
+  });
+});