Fix timeout for opening folder

mbraak · Jan 6, 2025 · 144547f · 144547f
1 parent 385dded
commit 144547f
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 5 deletions.
diff --git a/src/dragAndDropHandler/index.ts b/src/dragAndDropHandler/index.ts
@@ -86,6 +86,7 @@ export class DragAndDropHandler {
         onDragMove,
         onDragStop,
         onIsMoveHandle,
+        openFolderDelay,
         openNode,
         refreshElements,
         slide,
@@ -102,6 +103,7 @@ export class DragAndDropHandler {
         this.onDragMove = onDragMove;
         this.onDragStop = onDragStop;
         this.onIsMoveHandle = onIsMoveHandle;
+        this.openFolderDelay = openFolderDelay;
         this.openNode = openNode;
         this.refreshElements = refreshElements;
         this.slide = slide;

diff --git a/src/test/dragAndDropHandler/index.test.ts b/src/test/dragAndDropHandler/index.test.ts
@@ -1,5 +1,5 @@
 import { DragAndDropHandler } from "../../dragAndDropHandler";
-import { GetTree } from "../../jqtreeMethodTypes";
+import { GetTree, OpenNode } from "../../jqtreeMethodTypes";
 import {
     DragMethod,
     OnCanMove,
@@ -17,6 +17,8 @@ interface CreateDragAndDropHandlerParams {
     onDragMove?: DragMethod;
     onDragStop?: DragMethod;
     onIsMoveHandle?: OnIsMoveHandle;
+    openFolderDelay?: false | number;
+    openNode?: OpenNode;
     tree: Node;
 }
 
@@ -27,10 +29,11 @@ const createDragAndDropHandler = ({
     onDragMove,
     onDragStop,
     onIsMoveHandle,
+    openFolderDelay,
+    openNode,
     tree,
 }: CreateDragAndDropHandlerParams) => {
     const getScrollLeft = jest.fn();
-    const openNode = jest.fn();
     const refreshElements = jest.fn();
 
     const treeElement = generateHtmlElementsForTree(tree);
@@ -89,8 +92,8 @@ const createDragAndDropHandler = ({
         onDragMove,
         onDragStop,
         onIsMoveHandle,
-        openFolderDelay: false,
-        openNode,
+        openFolderDelay: openFolderDelay ?? false,
+        openNode: openNode ?? jest.fn(),
         refreshElements,
         slide: false,
         treeElement: treeElement,
@@ -104,6 +107,10 @@ beforeEach(() => {
     document.body.innerHTML = "";
 });
 
+afterEach(() => {
+    jest.useRealTimers();
+});
+
 describe(".mouseCapture", () => {
     it("sets the current item and returns true when a node can be moved", () => {
         const tree = new Node(null, true);
@@ -810,6 +817,52 @@ describe(".mouseDrag", () => {
 
         expect(node2.element?.querySelector(".jqtree-border")).toBeNull();
     });
+
+    it("opens a closed folder when it is hovered for a certain time", () => {
+        jest.useFakeTimers();
+
+        const tree = new Node(null, true);
+        const node1 = new Node({ name: "node1" });
+        tree.addChild(node1);
+        const node2 = new Node({ name: "node2" });
+        tree.addChild(node2);
+        node2.addChild(new Node({ name: "child" }));
+
+        const openNode = jest.fn();
+
+        const { dragAndDropHandler } = createDragAndDropHandler({
+            openFolderDelay: 100,
+            openNode,
+            tree,
+        });
+
+        // Start dragging
+        const positionInfo = {
+            originalEvent: new Event("click"),
+            pageX: 10,
+            pageY: 10,
+            target: node1.element as HTMLElement,
+        };
+
+        dragAndDropHandler.mouseCapture(positionInfo);
+
+        dragAndDropHandler.mouseStart(positionInfo);
+        expect(dragAndDropHandler.isDragging).toBeTrue();
+
+        // Move mouse
+        dragAndDropHandler.mouseDrag({
+            originalEvent: new Event("mousemove"),
+            pageX: 15,
+            pageY: 30,
+            target: node2.element as HTMLElement,
+        });
+
+        jest.advanceTimersByTime(10);
+        expect(openNode).not.toHaveBeenCalled();
+
+        jest.advanceTimersByTime(100);
+        expect(openNode).toHaveBeenCalled();
+    });
 });
 
 describe(".refresh", () => {

diff --git a/src/test/support/testUtil.ts b/src/test/support/testUtil.ts
@@ -55,7 +55,17 @@ export const generateHtmlElementsForTree = (tree: Node) => {
             element.className = "jqtree-tree";
             return element;
         } else {
-            return document.createElement("li");
+            const li = document.createElement("li");
+
+            if (node.isFolder()) {
+                li.className = "jqtree-folder";
+
+                if (!node.is_open) {
+                    li.classList.add("jqtree-closed");
+                }
+            }
+
+            return li;
         }
     };