test: fix type errors

tests/ContextMenu.test.svelte

@@ -8,10 +8,11 @@
   } from "carbon-components-svelte";
   import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
   import Cut from "carbon-icons-svelte/lib/Cut.svelte";
+  import type { ComponentProps } from "svelte";
 
   let ref: HTMLElement;
   let selectedId = "0";
-  let selectedIds = [];
+  let selectedIds: ComponentProps<ContextMenuGroup>["selectedIds"] = [];
 
   $: console.log("selectedId", selectedId);
 </script>
@@ -29,7 +30,10 @@
   <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
   <ContextMenuDivider />
   <ContextMenuOption indented labelText="Export as">
-    <ContextMenuGroup labelText="Export options" bind:selectedIds>
+    <ContextMenuGroup
+      labelText="Export options"
+      bind:selectedIds="{selectedIds}"
+    >
       <ContextMenuOption id="pdf" labelText="PDF" />
       <ContextMenuOption id="txt" labelText="TXT" />
       <ContextMenuOption id="mp3" labelText="MP3" />
@@ -48,7 +52,7 @@
 <ContextMenu target="{[null, ref]}" on:open on:close>
   <ContextMenuOption indented labelText="Open" />
   <ContextMenuDivider />
-  <ContextMenuRadioGroup bind:selectedId labelText="Radio group">
+  <ContextMenuRadioGroup bind:selectedId="{selectedId}" labelText="Radio group">
     <ContextMenuOption id="0" labelText="Set as foreground" />
     <ContextMenuOption id="1" labelText="Set as background" />
   </ContextMenuRadioGroup>

tests/DataTable.test.svelte

@@ -12,6 +12,7 @@
   } from "carbon-components-svelte";
   import type { DataTableHeader } from "carbon-components-svelte/DataTable/DataTable.svelte";
   import Launch from "carbon-icons-svelte/lib/Launch.svelte";
+  import type { ComponentProps } from "svelte";
 
   const headers: DataTableHeader[] = [
     { key: "name", value: "Name" },
@@ -69,7 +70,7 @@
     return 0;
   }
 
-  let filteredRowIds = [];
+  let filteredRowIds: ComponentProps<ToolbarSearch>["filteredRowIds"] = [];
 </script>
 
 <DataTable
@@ -119,7 +120,7 @@
   <Toolbar>
     <ToolbarContent>
       <ToolbarSearch
-        bind:filteredRowIds
+        bind:filteredRowIds="{filteredRowIds}"
         shouldFilterRows="{(row, value) => {
           return row.name.includes(value);
         }}"

tests/Dropdown.test.svelte

@@ -2,11 +2,11 @@
   import { Dropdown, DropdownSkeleton } from "carbon-components-svelte";
   import type { DropdownProps } from "carbon-components-svelte/Dropdown/Dropdown.svelte";
 
-  let items: DropdownProps["items"] = [
+  let items = [
     { id: 0, text: "Slack" },
     { id: "1", text: "Email" },
     { id: "2", text: "Fax" },
-  ] as const;
+  ] satisfies NonNullable<DropdownProps["items"]>;
 
   let itemsWithoutConst = [...items];
 
@@ -14,10 +14,8 @@
 
   export const fieldId: FieldId = "bar";
 
-  // @ts-expect-error
   $: items[0] = { id: "0", text: "Slack" };
   $: {
-    // @ts-expect-error
     items[0] = { id: "0", text: "Slack" };
   }
   $: {

tests/HeaderSearch.svelte

@@ -18,11 +18,12 @@
     Row,
     Column,
   } from "carbon-components-svelte";
+    import type { ComponentProps } from "svelte";
 
   let isSideNavOpen = false;
   let isOpen = false;
 
-  let ref = null;
+  let ref: ComponentProps<HeaderSearch>["ref"] = null;
   let active = false;
   let value = "";
   let selectedResultIndex = 1;

tests/InlineLoadingUx.test.svelte

@@ -8,16 +8,18 @@
     active: "Submitting...",
     finished: "Success",
     inactive: "Cancelling...",
-  };
+    dormant: "Submit",
+  } as const satisfies Record<State, string>;
 
   const stateMap = {
     active: "finished",
     inactive: "dormant",
     finished: "dormant",
-  };
+    dormant: "inactive",
+  } as const satisfies Record<State, State>;
 
-  let timeout = undefined;
+  let timeout: NodeJS.Timeout | undefined = undefined;
-  let state: State = "dormant";
+  let state: State= "dormant";
 
   function reset(incomingState?: State) {
     if (typeof timeout === "number") {

tests/LocalStorage.test.svelte

@@ -3,7 +3,7 @@
 
   let storage: LocalStorage;
   let toggled = false;
-  let events = [];
+  let events: { event: string; detail?: any }[] = [];
 
   $: if (storage) storage.clearItem();
   $: if (storage) storage.clearAll();

tests/SelectableDataTable.test.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { DataTable } from "carbon-components-svelte";
-
+  import type { ComponentProps } from "svelte";
   const headers = [
     { key: "name", value: "Name" },
     { key: "port", value: "Port" },
@@ -16,7 +16,7 @@
     { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
   ];
 
-  let selectedRowIds = [];
+  let selectedRowIds: ComponentProps<DataTable>["selectedRowIds"] = [];
 
   $: console.log("selectedRowIds", selectedRowIds);
 </script>

tests/TextInput.test.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { TextInput, TextInputSkeleton } from "carbon-components-svelte";
+  import type { ComponentProps } from "svelte";
 
-  let value = null;
+  let value: ComponentProps<TextInput>["value"] = null;
 </script>
 
 <TextInput

tests/TooltipIcon.test.svelte

@@ -26,7 +26,7 @@
 </TooltipIcon>
 
 <TooltipIcon>
-  <span slot="text" style="color: red"
+  <span slot="tooltipText" style="color: red"
     >Carbon is an open source design system by IBM.</span
   >
   <Carbon />

tests/TreeView.test.svelte

@@ -6,8 +6,8 @@
 
   let treeview: TreeView;
   let activeId: TreeNodeId = "";
-  let selectedIds = [];
+  let selectedIds: TreeNodeId[] = [];
-  let expandedIds = [1];
+  let expandedIds: TreeNodeId[] = [1];
   let children: ComponentProps<TreeView>["children"] = [
     { id: 0, text: "AI / Machine learning", icon: Analytics },
     {
@@ -56,7 +56,7 @@
     });
     treeview.collapseAll();
     treeview.collapseNodes((node) => {
-      return node.disabled;
+      return node.disabled === true;
     });
     treeview.showNode(1);
   }