test(combo-box): add generics tests

Author: metonym

tests/ComboBox/ComboBox.test.svelte

@@ -2,10 +2,10 @@
   import { ComboBox } from "carbon-components-svelte";
   import type { ComponentProps } from "svelte";
 
-  export let items: ComponentProps<ComboBox>["items"] = [
-    { id: "0", text: "Slack" },
-    { id: "1", text: "Email" },
-    { id: "2", text: "Fax" },
+  export let items = [
+    { id: "0", text: "Slack", price: 100 },
+    { id: "1", text: "Email", price: 200 },
+    { id: "2", text: "Fax", price: 300 },
   ];
   export let selectedId: ComponentProps<ComboBox>["selectedId"] = undefined;
   export let value = "";

tests/ComboBox/ComboBox.test.ts

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
 import type { ComponentProps } from "svelte";
+import { expectTypeOf } from "vitest";
 import { user } from "../setup-tests";
 import ComboBox from "./ComboBox.test.svelte";
 import ComboBoxCustom from "./ComboBoxCustom.test.svelte";
@@ -38,7 +39,7 @@ describe("ComboBox", () => {
 
     expect(consoleLog).toHaveBeenCalledWith("select", {
       selectedId: "1",
-      selectedItem: { id: "1", text: "Email" },
+      selectedItem: { id: "1", text: "Email", price: 200 },
     });
     expect(getInput()).toHaveValue("Email");
   });
@@ -524,4 +525,105 @@ describe("ComboBox", () => {
     await user.click(document.body);
     expect(input).toHaveValue("Email");
   });
+
+  describe("Generics", () => {
+    it("should support custom item types with generics", () => {
+      type Product = {
+        id: string;
+        text: string;
+        price: number;
+        category: string;
+        inStock: boolean;
+      };
+
+      const products: Product[] = [
+        {
+          id: "1",
+          text: "Laptop",
+          price: 999,
+          category: "Electronics",
+          inStock: true,
+        },
+        {
+          id: "2",
+          text: "Phone",
+          price: 599,
+          category: "Electronics",
+          inStock: false,
+        },
+      ];
+
+      expectTypeOf<typeof products>().toEqualTypeOf<Product[]>();
+
+      const itemToString = (item: Product) => `${item.text} - $${item.price}`;
+      expectTypeOf(itemToString).parameter(0).toEqualTypeOf<Product>();
+      expectTypeOf(itemToString).returns.toEqualTypeOf<string>();
+
+      const shouldFilterItem = (item: Product, value: string) =>
+        item.category.toLowerCase().includes(value.toLowerCase()) ||
+        item.text.toLowerCase().includes(value.toLowerCase());
+      expectTypeOf(shouldFilterItem).parameter(0).toEqualTypeOf<Product>();
+      expectTypeOf(shouldFilterItem).parameter(1).toEqualTypeOf<string>();
+      expectTypeOf(shouldFilterItem).returns.toEqualTypeOf<boolean>();
+
+      type SelectEvent = CustomEvent<{
+        selectedId: string;
+        selectedItem: Product;
+      }>;
+      expectTypeOf<
+        SelectEvent["detail"]["selectedItem"]
+      >().toEqualTypeOf<Product>();
+    });
+
+    it("should provide type-safe access to custom properties in callbacks", () => {
+      type Tag = {
+        id: number;
+        text: string;
+        color: string;
+        usageCount: number;
+      };
+
+      // itemToString can access custom properties
+      const itemToString = (item: Tag) => {
+        expectTypeOf(item).toHaveProperty("color");
+        expectTypeOf(item).toHaveProperty("usageCount");
+        return `${item.text} (${item.usageCount})`;
+      };
+
+      // shouldFilterItem can access custom properties
+      const shouldFilterItem = (item: Tag, value: string) => {
+        expectTypeOf(item).toHaveProperty("color");
+        expectTypeOf(item).toHaveProperty("usageCount");
+        return (
+          item.color.includes(value) || item.usageCount > parseInt(value, 10)
+        );
+      };
+
+      expectTypeOf(itemToString).parameter(0).toEqualTypeOf<Tag>();
+      expectTypeOf(shouldFilterItem).parameter(0).toEqualTypeOf<Tag>();
+    });
+
+    it("should support slot props with generic item type", () => {
+      type MenuItem = {
+        id: string;
+        text: string;
+        icon: string;
+        shortcut?: string;
+      };
+
+      type SlotProps = { item: MenuItem; index: number };
+
+      const slotItem: MenuItem = {
+        id: "1",
+        text: "Save",
+        icon: "save-icon",
+        shortcut: "Ctrl+S",
+      };
+
+      // Slot should provide item with custom properties
+      expectTypeOf<SlotProps["item"]>().toEqualTypeOf<MenuItem>();
+      expectTypeOf(slotItem).toHaveProperty("icon");
+      expectTypeOf(slotItem).toHaveProperty("shortcut");
+    });
+  });
 });