tests to show metadata is flowing down to nodeRenderer

src/__tests__/FlattenTree.test.ts

@@ -198,3 +198,58 @@ describe("FlattenTree helper", () => {
     );
   });
 });
+
+test("should retain metadata", () => {
+  const initialTreeNode = {
+    name: "",
+    children: [
+      {
+        name: "Fruits",
+        children: [
+          { name: "Avocados", metadata: { color: "green" } },
+          { name: "Bananas", metadata: { color: "yellow" } },
+        ],
+      },
+      {
+        name: "Drinks",
+        children: [
+          { name: "Apple Juice", metadata: { color: "yellow" } },
+          { name: "Coffee", metadata: { color: "brown" } },
+          {
+            name: "Tea",
+            children: [
+              { name: "Black Tea", metadata: { color: "brown" } },
+              { name: "Green Tea", metadata: { color: "green" } },
+              {
+                name: "Matcha",
+                children: [{ name: "Matcha 1", metadata: { color: "green" } }],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        name: "Vegetables",
+      },
+    ],
+  };
+
+  const expectedTree = [
+    { id: 0, name: "", parent: null, children: [1, 4, 12] },
+    { id: 1, name: "Fruits", children: [2, 3], parent: 0 },
+    { id: 2, name: "Avocados", children: [], parent: 1, metadata: { color: "green" } },
+    { id: 3, name: "Bananas", children: [], parent: 1, metadata: { color: "yellow" } },
+    { id: 4, name: "Drinks", children: [5, 6, 7], parent: 0 },
+    { id: 5, name: "Apple Juice", children: [], parent: 4 , metadata: { color: "yellow" } },
+    { id: 6, name: "Coffee", children: [], parent: 4, metadata: { color: "brown" } },
+    { id: 7, name: "Tea", children: [8, 9, 10], parent: 4 },
+    { id: 8, name: "Black Tea", children: [], parent: 7, metadata: { color: "brown" } },
+    { id: 9, name: "Green Tea", children: [], parent: 7, metadata: { color: "green" } },
+    { id: 10, name: "Matcha", children: [11], parent: 7 },
+    { id: 11, name: "Matcha 1", children: [], parent: 10,  metadata: { color: "green" } },
+    { id: 12, name: "Vegetables", children: [], parent: 0 },
+  ];
+
+  const expected = flattenTree(initialTreeNode);
+  expect(expected).toEqual(expectedTree);
+});

src/__tests__/TreeViewMetadata.test.tsx

@@ -0,0 +1,110 @@
+import "@testing-library/jest-dom/extend-expect";
+import React from "react";
+import TreeView from "../TreeView";
+import { render } from "@testing-library/react";
+import { flattenTree } from "../TreeView/utils";
+import { INode } from "../TreeView/types";
+
+const initialTreeNode = {
+  name: "",
+  id: 12,
+  children: [
+    {
+      name: "Fruits",
+      id: 54,
+      children: [
+        { name: "Avocados", id: 98, metadata: { color: 'green' } },
+        { name: "Bananas", id: 789, metadata: { color: 'yellow' } },
+      ],
+    },
+    {
+      id: 888,
+      name: "Drinks",
+      children: [
+        { name: "Apple Juice", id: 990, metadata: { color: 'yellow' } },
+        { name: "Coffee", id: 9 , metadata: { color: 'brown' }},
+        {
+          id: 43,
+          name: "Tea",
+          children: [
+            { name: "Black Tea", id: 4,  metadata: { color: 'black' } },
+            { name: "Green Tea", id: 44, metadata: { color: 'green' } },
+            {
+              id: 53,
+              name: "Matcha",
+              metadata: { color: 'green' },
+              children: [{ name: "Matcha 1", id: 2, metadata: { color: 'green' } }],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 24,
+      name: "Vegetables",
+    },
+  ],
+};
+
+const mapDataType = flattenTree(initialTreeNode);
+
+interface TreeViewDataTypeProps {
+  data: INode[];
+}
+
+function TreeViewMetadata(props: TreeViewDataTypeProps) {
+    const { data } = props;
+    return (
+      <div>
+        <TreeView
+          data={data}
+          aria-label="Data type"
+          multiSelect
+          defaultExpandedIds={[54, 88]}
+          propagateSelect
+          propagateSelectUpwards
+          togglableSelect
+          nodeAction="check"
+          nodeRenderer={({
+            element,
+            getNodeProps,
+            handleSelect,
+            handleExpand,
+          }) => {
+            return (
+
+              <div {...getNodeProps({ onClick: handleExpand })}>
+                <div
+                  className="checkbox-icon"
+                  onClick={(e) => {
+                    handleSelect(e);
+                    e.stopPropagation();
+                  }}
+                />
+                <span className="element" >
+                  { element.metadata ? `-${element.metadata.color}`: `${element.name}-${element.id}` }
+                </span>
+              </div>
+            );
+          }}
+        />
+      </div>
+    );
+  }
+
+  test("Treeview should propogate any meta data that it has", () => {
+    const { queryAllByRole } = render(<TreeViewMetadata data={mapDataType} />);
+
+    const nodes = queryAllByRole("treeitem");
+
+    mapDataType.forEach(nodeData => {
+      if (nodeData.metadata) {
+        const node = nodes.find((x) => x.innerHTML.includes(`${nodeData.metadata.color}`));
+        expect(node).toBeDefined;
+     } else {
+        const node = nodes.find((x) => x.innerHTML.includes(`${nodeData.name}-${nodeData.id}`));
+        expect(node).toBeDefined;
+      }
+    })
+  });
+