fix: Fixed an issue where isFolder returns incorrect values for leafs if they are not visibly rendered (#166)

Author: lukasbach

.changeset/dirty-beans-punch.md

@@ -0,0 +1,5 @@
+---
+"@headless-tree/core": patch
+---
+
+Fixed an issue where `isFolder` returns incorrect values for leafs if they are not visibly rendered (#166)

packages/core/src/features/checkboxes/checkboxes.spec.ts

@@ -102,7 +102,6 @@ describe("core-feature/checkboxes", () => {
     it("should turn folder checked if all children are checked", async () => {
       const testTree = await tree
         .with({
-          isItemFolder: (item: any) => item.getItemData().length < 4,
           propagateCheckedState: true,
           canCheckFolders: false,
         })

packages/core/src/features/tree/feature.ts

@@ -203,8 +203,8 @@ export const treeFeature: FeatureImplementation<any> = {
     isFocused: ({ tree, item, itemId }) =>
       tree.getState().focusedItem === itemId ||
       (tree.getState().focusedItem === null && item.getItemMeta().index === 0),
-    isFolder: ({ tree, item }) =>
-      item.getItemMeta().level === -1 ||
+    isFolder: ({ tree, item, itemId }) =>
+      itemId === tree.getConfig().rootItemId ||
       tree.getConfig().isItemFolder(item as ItemInstance<any>),
     getItemName: ({ tree, item }) => {
       const config = tree.getConfig();

packages/core/src/features/tree/tree.spec.ts

@@ -4,8 +4,8 @@ import { propMemoizationFeature } from "../prop-memoization/feature";
 
 const factory = TestTree.default({}).withFeatures(propMemoizationFeature);
 
-describe("core-feature/selections", () => {
-  factory.forSuits((tree) => {
+describe("core-feature/tree", () => {
+  factory.forSuits((tree, title) => {
     describe("expanded items", () => {
       it("can expand via tree instance", () => {
         const setExpandedItems = tree.mockedHandler("setExpandedItems");
@@ -156,6 +156,17 @@ describe("core-feature/selections", () => {
         });
       });
 
+      it("unloaded item", () => {
+        expect(tree.instance.getItemInstance("x444").getItemMeta()).toEqual({
+          index: -1,
+          itemId: "x444",
+          level: -1,
+          parentId: null,
+          posInSet: 0,
+          setSize: 1,
+        });
+      });
+
       it("expanded container", () => {
         expect(tree.instance.getItemInstance("x11").getItemMeta()).toEqual({
           index: 1,
@@ -312,8 +323,23 @@ describe("core-feature/selections", () => {
         expect(tree.instance.getItemInstance("x1").isFolder()).toBe(true);
       });
 
-      it("returns correctly for false cases of isFolder()", () => {
-        expect(tree.instance.getItemInstance("x111").isFolder()).toBe(false);
+      it("returns correctly for true cases of isFolder() ", () => {
+        expect(tree.instance.getItemInstance("x1").isFolder()).toBe(true);
+      });
+
+      it("returns correct isFolder for hidden items", () => {
+        if (title.toLocaleLowerCase().includes("async")) {
+          // async test tree defaults to "loading" item names
+          return;
+        }
+
+        // Reference: https://github.com/lukasbach/headless-tree/issues/166
+        expect(tree.instance.getItemInstance("x44").isFolder()).toBe(true);
+        expect(tree.instance.getItemInstance("x444").isFolder()).toBe(false);
+      });
+
+      it("returns isFolder=true for root item", () => {
+        expect(tree.instance.getItemInstance("x").isFolder()).toBe(true);
       });
 
       it("returns correctly for getParent()", () => {

packages/core/src/test-utils/test-tree.ts

@@ -63,15 +63,15 @@ export class TestTree<T = string> {
     }),
   };
 
-  forSuits(runSuite: (tree: TestTree<T>) => void) {
+  forSuits(runSuite: (tree: TestTree<T>, title: string) => void) {
     describe.for([
       this.suits.sync(),
       this.suits.async(),
       this.suits.proxifiedSync(),
       this.suits.proxifiedAsync(),
-    ])("$title", ({ tree }) => {
+    ])("$title", ({ tree, title }) => {
       tree.resetBeforeEach();
-      runSuite(tree);
+      runSuite(tree, title);
     });
   }
 
@@ -122,7 +122,7 @@ export class TestTree<T = string> {
       },
       getItemName: (item) => item.getItemData(),
       indent: 20,
-      isItemFolder: (item) => item.getItemMeta().level < 2,
+      isItemFolder: (item) => item.getItemData().length < 4,
       initialState: {
         expandedItems: ["x1", "x11"],
       },