From 56ebbb4cbfa89c850d2b4c6a2ddc4bb85f755ca0 Mon Sep 17 00:00:00 2001
From: Bram <bramhavers@gmail.com>
Date: Tue, 26 Nov 2024 23:57:44 +0100
Subject: [PATCH] Added test for flat array input data

---
 src/TreeView/TreeView.svelte                 |  5 +-
 tests/TreeView/TreeView.test.ts              | 11 +++
 tests/TreeView/TreeViewFlatArray.test.svelte | 75 ++++++++++++++++++++
 3 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 tests/TreeView/TreeViewFlatArray.test.svelte

diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte
index 8ad02f40..80c769ed 100644
--- a/src/TreeView/TreeView.svelte
+++ b/src/TreeView/TreeView.svelte
@@ -44,7 +44,7 @@
 
   /**
    * Provide a flat array of nodes to render
-   * @type {Array<TreeNode>}
+   * @type {Array<TreeNode & {pid?: any}>}
    */
   export let nodesFlat = [];
 
@@ -203,8 +203,7 @@
 
   /**
    * Create a nested array from a flat array
-   * TODO: accept a parent key
-   * @type {(flatArray: TreeNode[] & { pid: any }[]) => TreeNode[]}
+   * @type {(flatArray: TreeNode[] & { pid?: any }[]) => TreeNode[]}
    */
   function createNestedArray(flatArray) {
     /** @type TreeNode[] */
diff --git a/tests/TreeView/TreeView.test.ts b/tests/TreeView/TreeView.test.ts
index b2a0a6a3..0e29a9d9 100644
--- a/tests/TreeView/TreeView.test.ts
+++ b/tests/TreeView/TreeView.test.ts
@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/svelte";
 import { user } from "../setup-tests";
 import TreeView from "./TreeView.test.svelte";
+import TreeViewFlatArray from "./TreeViewFlatArray.test.svelte";
 
 describe("TreeView", () => {
   const getItemByName = (name: RegExp) => {
@@ -37,4 +38,14 @@ describe("TreeView", () => {
       text: "AI / Machine learning",
     });
   });
+
+  it("can turn flat array into nested array", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(TreeViewFlatArray);
+    const firstItem = getItemByName(/Blockchain/);
+    expect(firstItem).toBeInTheDocument();
+    await user.click(firstItem);
+    expect(getSelectedItemByName(/Blockchain/)).toBeInTheDocument();
+    expect(consoleLog).toBeCalledWith("selectedIds", [7]);
+  });
 });
diff --git a/tests/TreeView/TreeViewFlatArray.test.svelte b/tests/TreeView/TreeViewFlatArray.test.svelte
new file mode 100644
index 00000000..86b7fe71
--- /dev/null
+++ b/tests/TreeView/TreeViewFlatArray.test.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { ComponentProps } from "svelte";
+  import { Button, TreeView } from "carbon-components-svelte";
+  import type { TreeNodeId } from "carbon-components-svelte/TreeView/TreeView.svelte";
+  import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
+  import WatsonMachineLearning from "carbon-icons-svelte/lib/WatsonMachineLearning.svelte";
+  import Blockchain from "carbon-icons-svelte/lib/Blockchain.svelte";
+  import DataBase from "carbon-icons-svelte/lib/DataBase.svelte";
+  import SignalStrength from "carbon-icons-svelte/lib/SignalStrength.svelte";
+
+  let treeview: TreeView;
+  let activeId: TreeNodeId = "";
+  let selectedIds: TreeNodeId[] = [];
+  let expandedIds: TreeNodeId[] = [1];
+
+  let nodesFlat: ComponentProps<TreeView>["nodesFlat"] = [
+    { id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning },
+    { id: 1, text: "Analytics", icon: Analytics },
+    { id: 2, text: "IBM Analytics Engine", pid: 1, icon: Analytics },
+    { id: 3, text: "Apache Spark", pid: 2, icon: Analytics },
+    { id: 4, text: "Hadoop", icon: Analytics, pid: 2 },
+    { id: 5, text: "IBM Cloud SQL Query", icon: Analytics, pid: 1 },
+    { id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics, pid: 1 },
+    { id: 7, text: "Blockchain", icon: Blockchain },
+    { id: 8, text: "IBM Blockchain Platform", icon: Blockchain, pid: 7 },
+    { id: 9, text: "Databases", icon: DataBase },
+    {
+      id: 10,
+      text: "IBM Cloud Databases for Elasticsearch",
+      icon: DataBase,
+      pid: 9,
+    },
+    {
+      id: 11,
+      text: "IBM Cloud Databases for Enterprise DB",
+      icon: DataBase,
+      pid: 9,
+    },
+    { id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase, pid: 9 },
+    {
+      id: 13,
+      text: "IBM Cloud Databases for PostgreSQL",
+      icon: DataBase,
+      pid: 9,
+    },
+    { id: 14, text: "Integration", icon: SignalStrength, disabled: true },
+    {
+      id: 15,
+      text: "IBM API Connect",
+      icon: SignalStrength,
+      disabled: true,
+      pid: 14,
+    },
+  ];
+
+  $: console.log("selectedIds", selectedIds);
+</script>
+
+<TreeView
+  bind:this={treeview}
+  size="compact"
+  labelText="Cloud Products"
+  {nodesFlat}
+  bind:activeId
+  bind:selectedIds
+  bind:expandedIds
+  on:select={({ detail }) => console.log("select", detail)}
+  on:toggle={({ detail }) => console.log("toggle", detail)}
+  on:focus={({ detail }) => console.log("focus", detail)}
+  let:node
+>
+  {node.text}
+</TreeView>
+
+<Button on:click={treeview.expandAll}>Expand all</Button>