Draft: fix(tree): consistent usage of referenced item (#482)

* fix(tree): consistent usage of referenced item

...instead of item.id while passing filtered and expanded items.

* test(tree-node): differentiate supplied arguments

the tree-node component behaves differently when
 supplied w/o the "activeItem" and "expandedItems" arguments.

addon/components/tree-node.js

@@ -33,9 +33,9 @@ export default class TreeNodeComponent extends Component {
 
   get expanded() {
     return (
-      this.args.filteredItems?.includes(this.args.item.id) ||
+      this.args.filteredItems?.includes(this.args.item) ||
       (this.args.item.children &&
-        (this.args.expandedItems?.includes(this.args.item.id) ||
+        (this.args.expandedItems?.includes(this.args.item) ||
           (this.expandedByUser !== null
             ? this.expandedByUser
             : this.expandedDefault)))
@@ -46,11 +46,11 @@ export default class TreeNodeComponent extends Component {
     const item = this.args.item;
     if (
       this.args.filteredItems &&
-      !this.args.filteredItems?.includes(item.id) &&
-      this.args.expandedItems?.includes(item.id)
+      !this.args.filteredItems?.includes(item) &&
+      this.args.expandedItems?.includes(item)
     ) {
       return item.children.filter((child) =>
-        this.args.expandedItems.includes(child.id)
+        this.args.expandedItems.includes(child)
       );
     }
     return item.children;

addon/components/tree.js

@@ -35,7 +35,7 @@ export default class TreeComponent extends Component {
     }
     const rootNodes = this.args.items?.filter((i) => i.level === 0);
     return this.args.activeItem?.findParents
-      ? this.args.activeItem?.findParents().map((item) => item.id)
+      ? this.args.activeItem?.findParents()
       : rootNodes.length === 1
       ? rootNodes
       : [];
@@ -71,7 +71,7 @@ export default class TreeComponent extends Component {
   }
 
   @action
-  filterItemList(id) {
-    return this.expandedItems.includes(id);
+  filterItemList(item) {
+    return this.expandedItems.includes(item);
   }
 }

tests/integration/components/tree-node-test.js

@@ -33,10 +33,21 @@ module("Integration | Component | tree-node", function (hooks) {
     this.set("item", items[0]);
     this.set("itemRoute", "/scope/edit");
     this.set("activeItem", items[1]);
-    this.set("expandedItems", [items[0].id, items[1].id]);
+    this.set("expandedItems", [items[0], items[1]]);
   });
 
   test("it renders", async function (assert) {
+    await render(hbs`
+      <TreeNode
+        @item={{this.item}}
+        @itemRoute={{this.itemRoute}}
+      />`);
+
+    const item = this.items[0];
+    assert.dom(this.element).hasText(`${item.name} (1)`);
+  });
+
+  test("it expands when expanedItems are supplied", async function (assert) {
     await render(hbs`
       <TreeNode
         @item={{this.item}}