diff --git a/src/dragAndDropHandler/index.ts b/src/dragAndDropHandler/index.ts index b74f6a2e..6d341957 100644 --- 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 index 9728a55a..62fe0295 100644 --- 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 index 8aca1854..7d17d4ca 100644 --- 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; } };