feat: unit tests for reparenting (#148)

Author: lukasbach

packages/core/src/controlledEnvironment/DraggingPositionEvaluation.ts

@@ -78,12 +78,14 @@ export class DraggingPositionEvaluation {
   private maybeReparentUpwards(): DraggingPosition | undefined {
     const treeLinearItems = this.env.linearItems[this.treeId];
     const deepestDepth = treeLinearItems[this.linearIndex].depth;
+
+    // Default to zero on last position to allow dropping on root when
+    // dropping at bottom
     const legalDropDepthCount = // itemDepthDifferenceToNextItem/isLastInGroup
       deepestDepth - (treeLinearItems[this.linearIndex + 1]?.depth ?? 0);
+
     const canReparentUpwards =
       this.offset === 'bottom' && legalDropDepthCount > 0;
-    // Default to zero on last position to allow dropping on root when
-    // dropping at bottom
 
     if (!canReparentUpwards) {
       return undefined;

packages/core/test/dnd-basics.spec.tsx

@@ -371,4 +371,84 @@ describe('dnd basics', () => {
       await test.expectItemContentsVisibleAndUnchanged('a', 'b', 'bb');
     });
   });
+
+  describe('special drop positions', () => {
+    describe('reparent upwards', () => {
+      it('doesnt reparent in the on normal item', async () => {
+        const test = await new TestUtil().renderOpenTree();
+        await test.startDrag('bbb');
+        await test.dragOver('aac', 'bottom', 0);
+        await test.drop();
+        await test.expectItemContentsUnchanged('a', 'b');
+        await test.expectItemContents('aa', [
+          'aaa',
+          'aab',
+          'aac',
+          'bbb',
+          'aad',
+        ]);
+      });
+
+      it('doesnt reparent in the middle of a subtree', async () => {
+        const test = await new TestUtil().renderTree();
+        await test.clickItem('a');
+        await test.clickItem('target-parent');
+        await test.startDrag('target');
+        await test.dragOver('ab', 'bottom', 0);
+        await test.drop();
+        await test.expectItemContentsUnchanged('ab', 'ac', 'root');
+        await test.expectItemContents('a', ['aa', 'ab', 'target', 'ac', 'ad']);
+      });
+
+      it('doesnt reparent at the top of a subtree', async () => {
+        const test = await new TestUtil().renderOpenTree();
+        await test.startDrag('bbb');
+        await test.dragOver('aaa', 'top', 0);
+        await test.drop();
+        await test.expectItemContentsUnchanged('a', 'b');
+        await test.expectItemContents('aa', [
+          'bbb',
+          'aaa',
+          'aab',
+          'aac',
+          'aad',
+        ]);
+      });
+
+      it('reparents inner level', async () => {
+        const test = await new TestUtil().renderOpenTree();
+        await test.startDrag('bbb');
+        await test.dragOver('add', 'bottom', 1);
+        await test.drop();
+        await test.expectItemContentsUnchanged('ad', 'b');
+        await test.expectItemContents('a', ['aa', 'ab', 'ac', 'ad', 'bbb']);
+      });
+
+      it('reparents mid level', async () => {
+        const test = await new TestUtil().renderOpenTree();
+        await test.startDrag('bbb');
+        await test.dragOver('add', 'bottom', 1);
+        await test.drop();
+        await test.expectItemContentsUnchanged('ad', 'b', 'root');
+        await test.expectItemContents('a', ['aa', 'ab', 'ac', 'ad', 'bbb']);
+      });
+
+      it('reparents outer level', async () => {
+        const test = await new TestUtil().renderOpenTree();
+        await test.startDrag('bbb');
+        await test.dragOver('add', 'bottom', 0);
+        await test.drop();
+        await test.expectItemContentsUnchanged('ad', 'a', 'b');
+        await test.expectItemContents('root', [
+          'target-parent',
+          'a',
+          'bbb',
+          'b',
+          'c',
+          'deep1',
+          'special',
+        ]);
+      });
+    });
+  });
 });

packages/core/test/helpers/TestUtil.tsx

@@ -146,15 +146,19 @@ export class TestUtil {
     });
   }
 
-  public async dragOver(title: string, position?: 'top' | 'bottom') {
+  public async dragOver(
+    title: string,
+    position?: 'top' | 'bottom',
+    indent?: number
+  ) {
     await act(async () => {
       const items = await this.renderProps!.findAllByTestId('title');
       const itemIndex = items.findIndex(item => item.innerHTML === title);
 
-      // jsom doesnt support drag events :( let's mock it directly on the dnd context
+      // jsdom doesnt support drag events :( let's mock it directly on the dnd context
       this.environmentRef?.dragAndDropContext.onDragOverTreeHandler(
         {
-          clientX: 0,
+          clientX: indent !== undefined ? indent * 10 : 9999,
           clientY:
             itemIndex * 10 +
             (position === 'top' ? 1 : position === 'bottom' ? 9 : 5),