From f25a23dd26a8b6f91c541ed9c478be4898386709 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 9 Nov 2024 09:59:04 -0800
Subject: [PATCH] test: fix type errors

---
 tests/ContextMenu.test.svelte         | 10 +++++++---
 tests/DataTable.test.svelte           |  5 +++--
 tests/Dropdown.test.svelte            |  6 ++----
 tests/HeaderSearch.svelte             |  3 ++-
 tests/InlineLoadingUx.test.svelte     | 10 ++++++----
 tests/LocalStorage.test.svelte        |  2 +-
 tests/SelectableDataTable.test.svelte |  4 ++--
 tests/TextInput.test.svelte           |  3 ++-
 tests/TooltipIcon.test.svelte         |  2 +-
 tests/TreeView.test.svelte            |  6 +++---
 10 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/tests/ContextMenu.test.svelte b/tests/ContextMenu.test.svelte
index 03de065e..9af40696 100644
--- a/tests/ContextMenu.test.svelte
+++ b/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>
diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte
index 3f8b4c89..9b81625d 100644
--- a/tests/DataTable.test.svelte
+++ b/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);
         }}"
diff --git a/tests/Dropdown.test.svelte b/tests/Dropdown.test.svelte
index 4cd3c36f..8a8ee934 100644
--- a/tests/Dropdown.test.svelte
+++ b/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" };
   }
   $: {
diff --git a/tests/HeaderSearch.svelte b/tests/HeaderSearch.svelte
index 5ccb7533..62887f0b 100644
--- a/tests/HeaderSearch.svelte
+++ b/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;
diff --git a/tests/InlineLoadingUx.test.svelte b/tests/InlineLoadingUx.test.svelte
index dfd93a30..571b666c 100644
--- a/tests/InlineLoadingUx.test.svelte
+++ b/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 state: State = "dormant";
+  let timeout: NodeJS.Timeout | undefined = undefined;
+  let state: State= "dormant";
 
   function reset(incomingState?: State) {
     if (typeof timeout === "number") {
diff --git a/tests/LocalStorage.test.svelte b/tests/LocalStorage.test.svelte
index 8828ad8b..69d48e2d 100644
--- a/tests/LocalStorage.test.svelte
+++ b/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();
diff --git a/tests/SelectableDataTable.test.svelte b/tests/SelectableDataTable.test.svelte
index af6743d5..2424c7a2 100644
--- a/tests/SelectableDataTable.test.svelte
+++ b/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>
diff --git a/tests/TextInput.test.svelte b/tests/TextInput.test.svelte
index ce453fb0..c0c64d0d 100644
--- a/tests/TextInput.test.svelte
+++ b/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
diff --git a/tests/TooltipIcon.test.svelte b/tests/TooltipIcon.test.svelte
index fd3290e1..4f69a3e9 100644
--- a/tests/TooltipIcon.test.svelte
+++ b/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 />
diff --git a/tests/TreeView.test.svelte b/tests/TreeView.test.svelte
index 7ca4d27a..04c633c2 100644
--- a/tests/TreeView.test.svelte
+++ b/tests/TreeView.test.svelte
@@ -6,8 +6,8 @@
 
   let treeview: TreeView;
   let activeId: TreeNodeId = "";
-  let selectedIds = [];
-  let expandedIds = [1];
+  let selectedIds: TreeNodeId[] = [];
+  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);
   }