test: typecheck all source and test files (#2305)

Author: metonym

package.json

@@ -31,7 +31,7 @@
   ],
   "scripts": {
     "test": "vitest",
-    "test:src-types": "tsc types/**/*.ts",
+    "test:src-types": "tsc",
     "test:types": "svelte-check --workspace tests",
     "lint": "biome check --write .",
     "build:css": "bun scripts/build-css",

tests/ComboBox/ComboBox.test.ts

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import ComboBox from "./ComboBox.test.svelte";
 import ComboBoxCustom from "./ComboBoxCustom.test.svelte";
@@ -116,13 +117,14 @@ describe("ComboBox", () => {
       clearAll: "Remove all items",
     } as const;
 
-    render(ComboBox, {
-      props: {
-        selectedId: "1",
-        value: "Email",
-        translateWithIdSelection: (id) => customTranslations[id],
-      },
-    });
+    const props = {
+      selectedId: "1",
+      value: "Email",
+      translateWithIdSelection: (id: keyof typeof customTranslations) =>
+        customTranslations[id],
+    } satisfies ComponentProps<ComboBox>;
+
+    render(ComboBox, { props });
 
     const clearButton = screen.getByRole("button", {
       name: "Remove selected item",

tests/DataTable/DataTableSearch.test.ts

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import DataTableSearch from "./DataTableSearch.test.svelte";
 
@@ -68,7 +69,7 @@ describe("DataTableSearch", () => {
     render(DataTableSearch, {
       props: {
         persistent: true,
-      },
+      } satisfies ComponentProps<DataTableSearch>,
     });
 
     const searchBar = screen.getByRole("search");
@@ -152,16 +153,16 @@ describe("DataTableSearch", () => {
   });
 
   it("can filter with a custom filter function", async () => {
-    render(DataTableSearch, {
-      props: {
-        shouldFilterRows: (row, value) => {
-          return (
-            /(6|8)$/.test(row.name) &&
-            row.rule.toLowerCase().includes(value.toString().toLowerCase())
-          );
-        },
+    const props = {
+      shouldFilterRows: (row: any, value: any) => {
+        return (
+          /(6|8)$/.test(row.name) &&
+          row.rule.toLowerCase().includes(value.toString().toLowerCase())
+        );
       },
-    });
+    } satisfies ComponentProps<DataTableSearch>;
+
+    render(DataTableSearch, { props });
 
     allRowsRendered();
 

tests/Dropdown/Dropdown.test.ts

@@ -23,14 +23,15 @@ describe("Dropdown", () => {
   });
 
   it("should handle custom item display text", () => {
-    render(Dropdown, {
-      props: {
-        items,
-        selectedId: "0",
-        titleText: "Contact",
-        itemToString: (item) => `${item.text} (${item.id})`,
-      },
-    });
+    const props = {
+      items,
+      selectedId: "0",
+      titleText: "Contact",
+      itemToString: (item: (typeof items)[number]) =>
+        `${item.text} (${item.id})`,
+    };
+
+    render(Dropdown, { props });
 
     const button = screen.getByRole("button");
     expect(button.querySelector(".bx--list-box__label")).toHaveTextContent(

tests/ListBox/ListBoxField.test.ts

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import ListBoxField from "./ListBoxField.test.svelte";
 
@@ -105,13 +106,14 @@ describe("ListBoxField", () => {
       close: "Custom close",
     } as const;
 
-    render(ListBoxField, {
-      props: {
-        "aria-expanded": false,
-        translateWithId: (id) => customTranslations[id],
-        slotContent: "Custom field",
-      },
-    });
+    const props = {
+      "aria-expanded": false,
+      translateWithId: (id: keyof typeof customTranslations) =>
+        customTranslations[id],
+      slotContent: "Custom field",
+    } satisfies ComponentProps<ListBoxField>;
+
+    render(ListBoxField, { props });
 
     const field = screen
       .getByText("Custom field")
@@ -125,13 +127,14 @@ describe("ListBoxField", () => {
       close: "Custom close",
     } as const;
 
-    render(ListBoxField, {
-      props: {
-        "aria-expanded": true,
-        translateWithId: (id) => customTranslations[id],
-        slotContent: "Custom field",
-      },
-    });
+    const props = {
+      "aria-expanded": true,
+      translateWithId: (id: keyof typeof customTranslations) =>
+        customTranslations[id],
+      slotContent: "Custom field",
+    } satisfies ComponentProps<ListBoxField>;
+
+    render(ListBoxField, { props });
 
     const field = screen
       .getByText("Custom field")

tests/ListBox/ListBoxMenuIcon.test.ts

@@ -1,4 +1,5 @@
 import { render } from "@testing-library/svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import ListBoxMenuIcon from "./ListBoxMenuIcon.test.svelte";
 
@@ -51,12 +52,13 @@ describe("ListBoxMenuIcon", () => {
       close: "Custom close text",
     } as const;
 
-    const { component } = render(ListBoxMenuIcon, {
-      props: {
-        open: false,
-        translateWithId: (id) => customTranslations[id],
-      },
-    });
+    const props = {
+      open: false,
+      translateWithId: (id: keyof typeof customTranslations) =>
+        customTranslations[id],
+    } satisfies ComponentProps<ListBoxMenuIcon>;
+
+    const { component } = render(ListBoxMenuIcon, { props });
 
     let svg = document.querySelector(".bx--list-box__menu-icon svg");
     expect(svg).toHaveAttribute("aria-label", "Custom open text");

tests/ListBox/ListBoxSelection.test.ts

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import ListBoxSelection from "./ListBoxSelection.test.svelte";
 
@@ -169,11 +170,12 @@ describe("ListBoxSelection", () => {
       clearAll: "Remove all",
     } as const;
 
-    const { component } = render(ListBoxSelection, {
-      props: {
-        translateWithId: (id) => customTranslations[id],
-      },
-    });
+    const props = {
+      translateWithId: (id: keyof typeof customTranslations) =>
+        customTranslations[id],
+    } satisfies ComponentProps<ListBoxSelection>;
+
+    const { component } = render(ListBoxSelection, { props });
 
     const button = screen.getByRole("button");
     expect(button).toHaveAttribute("aria-label", "Remove item");

tests/MultiSelect/MultiSelect.test.ts

@@ -1,4 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
+import type { MultiSelectItem } from "carbon-components-svelte/MultiSelect/MultiSelect.svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import MultiSelect from "./MultiSelect.test.svelte";
 import MultiSelectSlot from "./MultiSelectSlot.test.svelte";
@@ -167,15 +169,15 @@ describe("MultiSelect", () => {
 
     it("uses custom filter function", async () => {
       const consoleLog = vi.spyOn(console, "log");
-      render(MultiSelect, {
-        props: {
-          items,
-          filterable: true,
-          filterItem: (item, value) => {
-            return item.text.toLowerCase().startsWith(value.toLowerCase());
-          },
+      const props = {
+        items,
+        filterable: true,
+        filterItem: (item: MultiSelectItem, value: string) => {
+          return item.text.toLowerCase().startsWith(value.toLowerCase());
         },
-      });
+      } satisfies ComponentProps<MultiSelect>;
+
+      render(MultiSelect, { props });
 
       const input = screen.getByRole("combobox");
       await user.click(input);
@@ -492,27 +494,27 @@ describe("MultiSelect", () => {
 
   describe("custom formatting", () => {
     it("handles custom itemToString", () => {
-      render(MultiSelect, {
-        props: {
-          items,
-          selectedIds: ["0"],
-          itemToString: (item) => `${item.text} (${item.id})`,
-        },
-      });
+      const props = {
+        items,
+        selectedIds: ["0"],
+        itemToString: (item: MultiSelectItem) => `${item.text} (${item.id})`,
+      } satisfies ComponentProps<MultiSelect>;
+
+      render(MultiSelect, { props });
 
       expect(screen.getByText("Slack (0)")).toBeInTheDocument();
     });
 
     it("handles custom itemToInput", async () => {
-      render(MultiSelect, {
-        props: {
-          items,
-          itemToInput: (item) => ({
-            name: `contact_${item.id}`,
-            value: item.text.toLowerCase(),
-          }),
-        },
-      });
+      const props = {
+        items,
+        itemToInput: (item: MultiSelectItem) => ({
+          name: `contact_${item.id}`,
+          value: item.text.toLowerCase(),
+        }),
+      } satisfies ComponentProps<MultiSelect>;
+
+      render(MultiSelect, { props });
 
       await openMenu();
       const checkbox = screen.getByText("Slack");

tests/NumberInput/NumberInput.test.ts

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import NumberInput from "./NumberInput.test.svelte";
 import NumberInputCustom from "./NumberInputCustom.test.svelte";
@@ -295,15 +296,15 @@ describe("NumberInput", () => {
   });
 
   it("should support custom translateWithId function", () => {
-    render(NumberInput, {
-      props: {
-        translateWithId: (id) => {
-          if (id === "increment") return "Custom Increment";
-          if (id === "decrement") return "Custom Decrement";
-          return id;
-        },
+    const props = {
+      translateWithId: (id: string) => {
+        if (id === "increment") return "Custom Increment";
+        if (id === "decrement") return "Custom Decrement";
+        return id;
       },
-    });
+    } satisfies ComponentProps<NumberInput>;
+
+    render(NumberInput, { props });
 
     expect(
       screen.getByRole("button", { name: "Custom Increment" }),

tests/Pagination/Pagination.test.ts

@@ -1,4 +1,5 @@
 import { render, screen, within } from "@testing-library/svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import Pagination from "./Pagination.test.svelte";
 
@@ -225,35 +226,37 @@ describe("Pagination", () => {
   });
 
   it("handles custom page text", () => {
-    render(Pagination, {
-      props: {
-        pagesUnknown: true,
-        totalItems: 100_000,
-        pageText: (page) => `Current page ${page}`,
-      },
-    });
+    const props = {
+      pagesUnknown: true,
+      totalItems: 100_000,
+      pageText: (page: number) => `Current page ${page}`,
+    } satisfies ComponentProps<Pagination>;
+
+    render(Pagination, { props });
 
     expect(screen.getByText(/Current page 1/)).toBeInTheDocument();
   });
 
   it("handles custom page range text", () => {
-    render(Pagination, {
-      props: {
-        totalItems: 100_000,
-        pageRangeText: (current, total) => `${current} of ${total}`,
-      },
-    });
+    const props = {
+      totalItems: 100_000,
+      pageRangeText: (current: number, total: number) =>
+        `${current} of ${total}`,
+    } satisfies ComponentProps<Pagination>;
+
+    render(Pagination, { props });
 
     expect(screen.getByText(/1 of 10000/)).toBeInTheDocument();
   });
 
   it("handles custom item range text", () => {
-    render(Pagination, {
-      props: {
-        totalItems: 100_000,
-        itemRangeText: (min, max, total) => `${min}–${max} of ${total}`,
-      },
-    });
+    const props = {
+      totalItems: 100_000,
+      itemRangeText: (min: number, max: number, total: number) =>
+        `${min}–${max} of ${total}`,
+    } satisfies ComponentProps<Pagination>;
+
+    render(Pagination, { props });
 
     expect(screen.getByText(/1–10 of 100000/)).toBeInTheDocument();
   });