test(tree-view): coverage for expandAll and expandNodes (#2063)

tests/App.test.svelte

@@ -1,5 +1,54 @@
-<script>
+<script lang="ts">
+  import { TreeView as TreeViewNav } from "carbon-components-svelte";
   import TreeView from "./TreeView/TreeView.test.svelte";
+  import { onMount } from "svelte";
+
+  const routes = [
+    {
+      path: "/treeview",
+      name: "TreeView",
+      component: TreeView,
+    },
+  ] as const;
+
+  let currentPath = window.location.pathname;
+
+  function navigate(path: string) {
+    history.pushState({}, "", path);
+    currentPath = path;
+  }
+
+  onMount(() => {
+    const handlePopState = () => {
+      currentPath = window.location.pathname;
+    };
+
+    window.addEventListener("popstate", handlePopState);
+
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  });
 </script>
 
-<TreeView />
+<div style:display="flex">
+  <div>
+    <TreeViewNav
+      labelText="Routes"
+      nodes={routes.map((route) => ({
+        id: route.path,
+        text: route.name,
+      }))}
+      on:select={(e) => {
+        navigate(e.detail.id.toString());
+      }}
+    />
+  </div>
+  <div style:flex="1">
+    {#each routes as route (route.path)}
+      {#if currentPath === route.path}
+        <svelte:component this={route.component} />
+      {/if}
+    {/each}
+  </div>
+</div>

tests/TreeView/TreeView.test.svelte

@@ -7,7 +7,7 @@
   let treeview: TreeView;
   let activeId: TreeNodeId = "";
   let selectedIds: TreeNodeId[] = [];
-  let expandedIds: TreeNodeId[] = [1];
+  let expandedIds: TreeNodeId[] = [];
   let nodes: ComponentProps<TreeView>["nodes"] = [
     { id: 0, text: "AI / Machine learning", icon: Analytics },
     {
@@ -81,3 +81,12 @@
 </TreeView>
 
 <Button on:click={treeview.expandAll}>Expand all</Button>
+<Button
+  on:click={() => {
+    treeview.expandNodes((node) => {
+      return /^IBM/.test(node.text);
+    });
+  }}
+>
+  Expand some nodes
+</Button>

tests/TreeView/TreeView.test.ts

@@ -17,6 +17,16 @@ describe("TreeView", () => {
     });
   };
 
+  const noExpandedItems = () => {
+    expect(screen.queryAllByRole("treeitem", { expanded: true })).toHaveLength(
+      0,
+    );
+  };
+
+  const getAllExpandedItems = () => {
+    return screen.getAllByRole("treeitem", { expanded: true });
+  };
+
   it("can select a node", async () => {
     const consoleLog = vi.spyOn(console, "log");
 
@@ -37,4 +47,30 @@ describe("TreeView", () => {
       text: "AI / Machine learning",
     });
   });
+
+  it("can expand all nodes", async () => {
+    render(TreeView);
+
+    noExpandedItems();
+
+    const expandAllButton = screen.getByText("Expand all");
+    await user.click(expandAllButton);
+
+    expect(getAllExpandedItems()).toHaveLength(5);
+  });
+
+  it("can expand some nodes", async () => {
+    render(TreeView);
+
+    noExpandedItems();
+
+    const expandSomeNodesButton = screen.getByText("Expand some nodes");
+    await user.click(expandSomeNodesButton);
+
+    expect(getAllExpandedItems()).toHaveLength(2);
+
+    expect(
+      screen.getByText("IBM Analytics Engine").parentNode?.parentNode,
+    ).toHaveAttribute("aria-expanded", "true");
+  });
 });