From 4137c14109e7934cbce97996206aa06c8834383c Mon Sep 17 00:00:00 2001
From: Marco Braak <marco@floryn.com>
Date: Sat, 14 Dec 2024 13:48:25 +0100
Subject: [PATCH] Test mouseDrag

---
 src/dragAndDropHandler/index.ts           |  1 +
 src/test/dragAndDropHandler/index.test.ts | 49 ++++++++++++++++++++++-
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/dragAndDropHandler/index.ts b/src/dragAndDropHandler/index.ts
index 1d50a081..747bd48d 100644
--- a/src/dragAndDropHandler/index.ts
+++ b/src/dragAndDropHandler/index.ts
@@ -184,6 +184,7 @@ export class DragAndDropHandler {
         };
     }
 
+    /* Move the dragged node to the selected position in the tree. */
     private moveItem(positionInfo: PositionInfo): void {
         if (
             this.currentItem &&
diff --git a/src/test/dragAndDropHandler/index.test.ts b/src/test/dragAndDropHandler/index.test.ts
index 9673436e..5978758f 100644
--- a/src/test/dragAndDropHandler/index.test.ts
+++ b/src/test/dragAndDropHandler/index.test.ts
@@ -75,6 +75,10 @@ const createDragAndDropHandler = ({
     });
 };
 
+beforeEach(() => {
+    document.body.innerHTML = "";
+});
+
 describe(".mouseCapture", () => {
     it("sets the current item and returns true when a node can be moved", () => {
         const tree = new Node(null, true);
@@ -279,6 +283,7 @@ describe(".mouseStart", () => {
         tree.addChild(node2);
 
         const dragAndDropHandler = createDragAndDropHandler({ tree });
+
         // Set current item
         const positionInfo = {
             originalEvent: new Event("click"),
@@ -335,10 +340,11 @@ describe(".mouseDrag", () => {
         };
 
         dragAndDropHandler.mouseCapture(positionInfo);
+
         dragAndDropHandler.mouseStart(positionInfo);
         expect(dragAndDropHandler.isDragging).toBeTrue();
 
-        // mouse start
+        // Move mouse
         dragAndDropHandler.mouseDrag({
             originalEvent: new Event("mousemove"),
             pageX: 15,
@@ -353,6 +359,47 @@ describe(".mouseDrag", () => {
             top: "20px",
         });
     });
+
+    it("changes the hovered area", () => {
+        const tree = new Node(null, true);
+        const node1 = new Node({ name: "node1" });
+        tree.addChild(node1);
+        const node2 = new Node({ name: "node2" });
+        tree.addChild(node2);
+
+        const dragAndDropHandler = createDragAndDropHandler({ 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();
+        expect(dragAndDropHandler.hoveredArea).toBeNull();
+
+        // Move mouse
+        dragAndDropHandler.mouseDrag({
+            originalEvent: new Event("mousemove"),
+            pageX: 15,
+            pageY: 30,
+            target: node2.element as HTMLElement,
+        });
+
+        expect(dragAndDropHandler.hoveredArea).toEqual(
+            expect.objectContaining({
+                bottom: 38,
+                node: node2,
+                position: Position.Inside,
+                top: 20,
+            }),
+        );
+    });
 });
 
 describe(".refresh", () => {