@headless-tree/core 0.0.13 → 0.0.15

package/src/features/async-data-loader/async-data-loader.spec.ts

@@ -41,11 +41,17 @@ describe("core-feature/selections", () => {
 
   describe("calls handlers", () => {
     it("updates setLoadingItems", async () => {
-      const setLoadingItems = tree.mockedHandler("setLoadingItems");
+      const setLoadingItemChildrens = tree.mockedHandler(
+        "setLoadingItemChildrens",
+      );
+      const setLoadingItemData = tree.mockedHandler("setLoadingItemData");
       tree.do.selectItem("x12");
-      expect(setLoadingItems).toHaveBeenCalledWith(["x12"]);
+      expect(setLoadingItemChildrens).toHaveBeenCalledWith(["x12"]);
+      expect(setLoadingItemData).not.toHaveBeenCalled();
       await tree.resolveAsyncVisibleItems();
-      expect(setLoadingItems).toHaveBeenCalledWith([]);
+      expect(setLoadingItemChildrens).toHaveBeenCalledWith([]);
+      expect(setLoadingItemData).toHaveBeenCalledWith(["x121"]);
+      expect(setLoadingItemData).toHaveBeenCalledWith([]);
     });
 
     it("calls onLoadedItem", async () => {
@@ -76,7 +82,7 @@ describe("core-feature/selections", () => {
       `${id}3`,
       `${id}4`,
     ]);
-    const suiteTree = tree.with({ asyncDataLoader: { getItem, getChildren } });
+    const suiteTree = tree.with({ dataLoader: { getItem, getChildren } });
     suiteTree.resetBeforeEach();
 
     it("invalidates item data on item instance", async () => {
@@ -119,6 +125,4 @@ describe("core-feature/selections", () => {
       expect(getChildren).toHaveBeenCalledTimes(1);
     });
   });
-
-  describe.todo("getChildrenWithData");
 });

package/src/features/async-data-loader/feature.ts

@@ -1,28 +1,57 @@
 import { FeatureImplementation } from "../../types/core";
-import { AsyncDataLoaderRef } from "./types";
+import { AsyncDataLoaderDataRef } from "./types";
 import { makeStateUpdater } from "../../utils";
 
 export const asyncDataLoaderFeature: FeatureImplementation = {
   key: "async-data-loader",
 
   getInitialState: (initialState) => ({
-    loadingItems: [],
+    loadingItemData: [],
+    loadingItemChildrens: [],
     ...initialState,
   }),
 
   getDefaultConfig: (defaultConfig, tree) => ({
-    setLoadingItems: makeStateUpdater("loadingItems", tree),
+    setLoadingItemData: makeStateUpdater("loadingItemData", tree),
+    setLoadingItemChildrens: makeStateUpdater("loadingItemChildrens", tree),
     ...defaultConfig,
   }),
 
   stateHandlerNames: {
-    loadingItems: "setLoadingItems",
+    loadingItemData: "setLoadingItemData",
+    loadingItemChildrens: "setLoadingItemChildrens",
   },
 
   treeInstance: {
+    waitForItemDataLoaded: async ({ tree }, itemId) => {
+      tree.retrieveItemData(itemId);
+      if (!tree.getState().loadingItemData.includes(itemId)) {
+        return;
+      }
+      await new Promise<void>((resolve) => {
+        const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
+        dataRef.current.awaitingItemDataLoading ??= {};
+        dataRef.current.awaitingItemDataLoading[itemId] ??= [];
+        dataRef.current.awaitingItemDataLoading[itemId].push(resolve);
+      });
+    },
+
+    waitForItemChildrenLoaded: async ({ tree }, itemId) => {
+      tree.retrieveChildrenIds(itemId);
+      if (!tree.getState().loadingItemChildrens.includes(itemId)) {
+        return;
+      }
+      await new Promise<void>((resolve) => {
+        const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
+        dataRef.current.awaitingItemChildrensLoading ??= {};
+        dataRef.current.awaitingItemChildrensLoading[itemId] ??= [];
+        dataRef.current.awaitingItemChildrensLoading[itemId].push(resolve);
+      });
+    },
+
     retrieveItemData: ({ tree }, itemId) => {
       const config = tree.getConfig();
-      const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
+      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
       dataRef.current.itemData ??= {};
       dataRef.current.childrenIds ??= {};
 
@@ -30,18 +59,25 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
         return dataRef.current.itemData[itemId];
       }
 
-      if (!tree.getState().loadingItems.includes(itemId)) {
-        tree.applySubStateUpdate("loadingItems", (loadingItems) => [
-          ...loadingItems,
+      if (!tree.getState().loadingItemData.includes(itemId)) {
+        tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
+          ...loadingItemData,
           itemId,
         ]);
-        config.asyncDataLoader?.getItem(itemId).then((item) => {
+
+        (async () => {
+          const item = await config.dataLoader.getItem(itemId);
           dataRef.current.itemData[itemId] = item;
           config.onLoadedItem?.(itemId, item);
-          tree.applySubStateUpdate("loadingItems", (loadingItems) =>
-            loadingItems.filter((id) => id !== itemId),
+          tree.applySubStateUpdate("loadingItemData", (loadingItemData) =>
+            loadingItemData.filter((id) => id !== itemId),
           );
-        });
+
+          dataRef.current.awaitingItemDataLoading?.[itemId].forEach((cb) =>
+            cb(),
+          );
+          delete dataRef.current.awaitingItemDataLoading?.[itemId];
+        })();
       }
 
       return config.createLoadingItemData?.() ?? null;
@@ -49,46 +85,37 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
 
     retrieveChildrenIds: ({ tree }, itemId) => {
       const config = tree.getConfig();
-      const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
-      dataRef.current.itemData ??= {};
+      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
       dataRef.current.childrenIds ??= {};
       if (dataRef.current.childrenIds[itemId]) {
         return dataRef.current.childrenIds[itemId];
       }
 
-      if (tree.getState().loadingItems.includes(itemId)) {
+      if (tree.getState().loadingItemChildrens.includes(itemId)) {
         return [];
       }
 
-      tree.applySubStateUpdate("loadingItems", (loadingItems) => [
-        ...loadingItems,
-        itemId,
-      ]);
-
-      if (config.asyncDataLoader?.getChildrenWithData) {
-        config.asyncDataLoader?.getChildrenWithData(itemId).then((children) => {
-          for (const { id, data } of children) {
-            dataRef.current.itemData[id] = data;
-            config.onLoadedItem?.(id, data);
-          }
-          const childrenIds = children.map(({ id }) => id);
-          dataRef.current.childrenIds[itemId] = childrenIds;
-          config.onLoadedChildren?.(itemId, childrenIds);
-          tree.applySubStateUpdate("loadingItems", (loadingItems) =>
-            loadingItems.filter((id) => id !== itemId),
-          );
-          tree.rebuildTree();
-        });
-      } else {
-        config.asyncDataLoader?.getChildren(itemId).then((childrenIds) => {
-          dataRef.current.childrenIds[itemId] = childrenIds;
-          config.onLoadedChildren?.(itemId, childrenIds);
-          tree.applySubStateUpdate("loadingItems", (loadingItems) =>
-            loadingItems.filter((id) => id !== itemId),
-          );
-          tree.rebuildTree();
-        });
-      }
+      tree.applySubStateUpdate(
+        "loadingItemChildrens",
+        (loadingItemChildrens) => [...loadingItemChildrens, itemId],
+      );
+
+      (async () => {
+        const childrenIds = await config.dataLoader.getChildren(itemId);
+        dataRef.current.childrenIds[itemId] = childrenIds;
+        config.onLoadedChildren?.(itemId, childrenIds);
+        tree.applySubStateUpdate(
+          "loadingItemChildrens",
+          (loadingItemChildrens) =>
+            loadingItemChildrens.filter((id) => id !== itemId),
+        );
+        tree.rebuildTree();
+
+        dataRef.current.awaitingItemChildrensLoading?.[itemId]?.forEach((cb) =>
+          cb(),
+        );
+        delete dataRef.current.awaitingItemChildrensLoading?.[itemId];
+      })();
 
       return [];
     },
@@ -96,19 +123,20 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
 
   itemInstance: {
     isLoading: ({ tree, item }) =>
-      tree.getState().loadingItems.includes(item.getItemMeta().itemId),
+      tree.getState().loadingItemData.includes(item.getItemMeta().itemId) ||
+      tree.getState().loadingItemChildrens.includes(item.getItemMeta().itemId),
     invalidateItemData: ({ tree, itemId }) => {
-      const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
+      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
       delete dataRef.current.itemData?.[itemId];
       tree.retrieveItemData(itemId);
     },
     invalidateChildrenIds: ({ tree, itemId }) => {
-      const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
+      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
       delete dataRef.current.childrenIds?.[itemId];
       tree.retrieveChildrenIds(itemId);
     },
     updateCachedChildrenIds: ({ tree, itemId }, childrenIds) => {
-      const dataRef = tree.getDataRef<AsyncDataLoaderRef>();
+      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
       dataRef.current.childrenIds[itemId] = childrenIds;
       tree.rebuildTree();
     },

package/src/features/async-data-loader/types.ts

@@ -1,33 +1,40 @@
 import { SetStateFn } from "../../types/core";
 import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
 
-export type AsyncTreeDataLoader<T> = {
-  getItem: (itemId: string) => Promise<T>;
-  getChildren: (itemId: string) => Promise<string[]>;
-  getChildrenWithData?: (itemId: string) => Promise<{ id: string; data: T }[]>;
-};
+type AwaitingLoaderCallbacks = Record<string, (() => void)[]>;
 
-export type AsyncDataLoaderRef<T = any> = {
+export interface AsyncDataLoaderDataRef<T = any> {
   itemData: Record<string, T>;
   childrenIds: Record<string, string[]>;
-};
+  awaitingItemDataLoading: AwaitingLoaderCallbacks;
+  awaitingItemChildrensLoading: AwaitingLoaderCallbacks;
+}
 
 /**
  * @category Async Data Loader/General
  * */
 export type AsyncDataLoaderFeatureDef<T> = {
   state: {
-    loadingItems: string[];
+    loadingItemData: string[];
+    loadingItemChildrens: string[];
   };
   config: {
     rootItemId: string;
+
+    /** Will be called when HT retrieves item data for an item whose item data is asynchronously being loaded.
+     * Can be used to create placeholder data to use for rendering the tree item while it is loaded. If not defined,
+     * the tree item data will be null. */
     createLoadingItemData?: () => T;
-    setLoadingItems?: SetStateFn<string[]>;
+
+    setLoadingItemData?: SetStateFn<string[]>;
+    setLoadingItemChildrens?: SetStateFn<string[]>;
     onLoadedItem?: (itemId: string, item: T) => void;
     onLoadedChildren?: (itemId: string, childrenIds: string[]) => void;
-    asyncDataLoader?: AsyncTreeDataLoader<T>;
   };
-  treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"];
+  treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"] & {
+    waitForItemDataLoaded: (itemId: string) => Promise<void>;
+    waitForItemChildrenLoaded: (itemId: string) => Promise<void>;
+  };
   itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
     /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible */
     invalidateItemData: () => void;

package/src/features/drag-and-drop/drag-and-drop.spec.ts

@@ -31,10 +31,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -44,10 +40,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x2");
         tree.expect.dropped(["x111"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x2"),
         });
       });
@@ -57,10 +49,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x12");
         tree.expect.dropped(["x111"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x12"),
         });
       });
@@ -109,33 +97,52 @@ describe("core-feature/drag-and-drop", () => {
         });
       });
 
-      it("drop reparented one level", () => {
+      it("drop reparented one level", async () => {
+        tree.item("x14").expand();
+        await tree.resolveAsyncVisibleItems();
         tree.do.ctrlSelectItem("x111");
         tree.do.startDrag("x111");
-        tree.setElementBoundingBox("x114");
+        tree.setElementBoundingBox("x144");
         const event = tree.createBottomDragEvent(1);
-        tree.do.dragOverAndDrop("x114", event);
+        tree.do.dragOverAndDrop("x144", event);
         tree.expect.dropped(["x111"], {
-          dragLineIndex: 6,
+          dragLineIndex: 13,
           dragLineLevel: 1,
+          childIndex: 4,
+          insertionIndex: 4,
+          item: tree.item("x1"),
+        });
+      });
+
+      it("drop reparented two levels", async () => {
+        tree.item("x14").expand();
+        await tree.resolveAsyncVisibleItems();
+        tree.do.ctrlSelectItem("x111");
+        tree.do.startDrag("x111");
+        tree.setElementBoundingBox("x144");
+        const event = tree.createBottomDragEvent(0);
+        tree.do.dragOverAndDrop("x144", event);
+        tree.expect.dropped(["x111"], {
+          dragLineIndex: 13,
+          dragLineLevel: 0,
           childIndex: 1,
           insertionIndex: 1,
-          item: tree.item("x1"),
+          item: tree.item("x"),
         });
       });
 
-      it("drop reparented two levels", () => {
-        // TODO reparenting two levels should work at x144, but not at x114
+      it("doesnt drop reparented higher than it can", () => {
         tree.do.ctrlSelectItem("x111");
         tree.do.startDrag("x111");
+        tree.setElementBoundingBox("x114");
         const event = tree.createBottomDragEvent(0);
         tree.do.dragOverAndDrop("x114", event);
         tree.expect.dropped(["x111"], {
           dragLineIndex: 6,
-          dragLineLevel: 0,
+          dragLineLevel: 1,
           childIndex: 1,
           insertionIndex: 1,
-          item: tree.item("x"),
+          item: tree.item("x1"),
         });
       });
 
@@ -147,10 +154,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111", "x112", "x113", "x114"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -163,10 +166,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111", "x112", "x113", "x114"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -179,10 +178,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111", "x112", "x113", "x114"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -199,10 +194,6 @@ describe("core-feature/drag-and-drop", () => {
           draggedItems: [tree.item("x111")],
           draggingOverItem: tree.item("x21"),
           dragTarget: {
-            childIndex: null,
-            dragLineIndex: null,
-            dragLineLevel: null,
-            insertionIndex: null,
             item: tree.item("x21"),
           },
         });
@@ -270,13 +261,15 @@ describe("core-feature/drag-and-drop", () => {
         tree.expect.defaultDragLineProps(1);
       });
 
-      it("drop reparented two levels", () => {
+      it("drop reparented two levels", async () => {
+        tree.item("x14").expand();
+        await tree.resolveAsyncVisibleItems();
         tree.do.ctrlSelectItem("x111");
         tree.do.startDrag("x111");
         const event = tree.createBottomDragEvent(0);
-        tree.setElementBoundingBox("x12");
-        tree.setElementBoundingBox("x114");
-        tree.do.dragOver("x114", event);
+        tree.setElementBoundingBox("x2");
+        tree.setElementBoundingBox("x144");
+        tree.do.dragOver("x144", event);
         tree.expect.defaultDragLineProps(0);
       });
     });
@@ -316,10 +309,6 @@ describe("core-feature/drag-and-drop", () => {
         expect(onDropForeignDragObject).toHaveBeenCalledWith(
           event.dataTransfer,
           {
-            childIndex: null,
-            dragLineIndex: null,
-            dragLineLevel: null,
-            insertionIndex: null,
             item: tree.item("x11"),
           },
         );
@@ -371,10 +360,10 @@ describe("core-feature/drag-and-drop", () => {
 
       suiteTree.resetBeforeEach();
 
-      it("drags within same tree on folder", () => {
+      it("drags within same tree on expanded folder", async () => {
         suiteTree.do.selectMultiple("x111", "x112");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop("x21");
+        await suiteTree.do.dragOverAndDrop("x21");
         expect(changeChildren).toHaveBeenCalledWith("x11", ["x113", "x114"]);
         expect(changeChildren).toHaveBeenCalledWith("x21", [
           "x211",
@@ -386,10 +375,26 @@ describe("core-feature/drag-and-drop", () => {
         ]);
       });
 
-      it("drags within same tree inside folder", () => {
+      it("drags within same tree on collapsed folder", async () => {
         suiteTree.do.selectMultiple("x111", "x112");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop(
+        suiteTree.do.dragOverAndDrop("x22");
+        await suiteTree.resolveAsyncVisibleItems();
+        expect(changeChildren).toHaveBeenCalledWith("x11", ["x113", "x114"]);
+        expect(changeChildren).toHaveBeenCalledWith("x22", [
+          "x221",
+          "x222",
+          "x223",
+          "x224",
+          "x111",
+          "x112",
+        ]);
+      });
+
+      it("drags within same tree inside folder", async () => {
+        suiteTree.do.selectMultiple("x111", "x112");
+        suiteTree.do.startDrag("x111");
+        await suiteTree.do.dragOverAndDrop(
           "x212",
           suiteTree.createBottomDragEvent(2),
         );
@@ -456,10 +461,6 @@ describe("core-feature/drag-and-drop", () => {
         const e = TestTree.dragEvent();
         suiteTree.do.drop("x21", e);
         expect(onDropForeignDragObject).toBeCalledWith(e.dataTransfer, {
-          childIndex: null,
-          dragLineIndex: null,
-          dragLineLevel: null,
-          insertionIndex: null,
           item: suiteTree.item("x21"),
         });
       });
@@ -476,10 +477,13 @@ describe("core-feature/drag-and-drop", () => {
         expect(onDropForeignDragObject).not.toHaveBeenCalled();
       });
 
-      it("drags multiple within in retained order (correct order)", () => {
+      it("drags multiple within in retained order (correct order)", async () => {
         suiteTree.do.selectMultiple("x111", "x112", "x113", "x114");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop("x212", suiteTree.createBottomDragEvent());
+        await suiteTree.do.dragOverAndDrop(
+          "x212",
+          suiteTree.createBottomDragEvent(),
+        );
         expect(changeChildren).toHaveBeenCalledWith("x11", []);
         expect(changeChildren).toHaveBeenCalledWith("x21", [
           "x211",
@@ -493,10 +497,13 @@ describe("core-feature/drag-and-drop", () => {
         ]);
       });
 
-      it("drags multiple within in retained order (inverse order)", () => {
+      it("drags multiple within in retained order (inverse order)", async () => {
         suiteTree.do.selectMultiple("x114", "x113", "x112", "x111");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop("x212", suiteTree.createBottomDragEvent());
+        await suiteTree.do.dragOverAndDrop(
+          "x212",
+          suiteTree.createBottomDragEvent(),
+        );
         expect(changeChildren).toHaveBeenCalledWith("x11", []);
         expect(changeChildren).toHaveBeenCalledWith("x21", [
           "x211",
@@ -510,10 +517,13 @@ describe("core-feature/drag-and-drop", () => {
         ]);
       });
 
-      it("drags multiple within in retained order (scrambled order)", () => {
+      it("drags multiple within in retained order (scrambled order)", async () => {
         suiteTree.do.selectMultiple("x111", "x114", "x112", "x113");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop("x212", suiteTree.createBottomDragEvent());
+        await suiteTree.do.dragOverAndDrop(
+          "x212",
+          suiteTree.createBottomDragEvent(),
+        );
         expect(changeChildren).toHaveBeenCalledWith("x11", []);
         expect(changeChildren).toHaveBeenCalledWith("x21", [
           "x211",
@@ -540,10 +550,6 @@ describe("core-feature/drag-and-drop", () => {
         testTree.do.startDrag("x111");
         testTree.do.dragOverAndDrop("x212", testTree.createBottomDragEvent(2));
         testTree.expect.dropped(["x111"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -603,21 +609,9 @@ describe("core-feature/drag-and-drop", () => {
         tree.expect.dragOverNotAllowed("x2");
         expect(canDrop).toHaveBeenCalledWith([tree.item("x111")], {
           item: tree.item("x2"),
-          childIndex: null,
-          dragLineIndex: null,
-          dragLineLevel: null,
-          insertionIndex: null,
         });
       });
 
-      it.todo("item with canDrag=false is not draggable", () => {
-        const canDrag = tree.mockedHandler("canDrag").mockReturnValue(false);
-        expect(tree.instance.getItemInstance("x111").getProps().draggable).toBe(
-          false,
-        );
-        expect(canDrag).toHaveBeenCalledWith([tree.item("x111")]);
-      });
-
       it("item with canDrag=false does not invoke drag handler when dragged", () => {
         const canDrag = tree.mockedHandler("canDrag").mockReturnValue(false);
         const setDndState = tree.mockedHandler("setDndState");
@@ -637,10 +631,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111", "x112", "x113"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -652,30 +642,26 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x114");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x114"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
     });
 
     describe("item instance methods", () => {
-      it("returns isDropTarget() correct for folders", () => {
+      it("returns isDragTarget() correct for folders", () => {
         tree.do.startDrag("x111");
         tree.do.dragOver("x21");
-        expect(tree.instance.getItemInstance("x21").isDropTarget()).toBe(true);
-        expect(tree.instance.getItemInstance("x211").isDropTarget()).toBe(
+        expect(tree.instance.getItemInstance("x21").isDragTarget()).toBe(true);
+        expect(tree.instance.getItemInstance("x211").isDragTarget()).toBe(
           false,
         );
       });
 
-      it("returns isDropTarget() correct for items", () => {
+      it("returns isDragTarget() correct for items", () => {
         tree.do.startDrag("x111");
         tree.do.dragOver("x211");
-        expect(tree.instance.getItemInstance("x21").isDropTarget()).toBe(true);
-        expect(tree.instance.getItemInstance("x211").isDropTarget()).toBe(
+        expect(tree.instance.getItemInstance("x21").isDragTarget()).toBe(true);
+        expect(tree.instance.getItemInstance("x211").isDragTarget()).toBe(
           false,
         );
       });