Update dragging resolver unit tests and add a lot more comments

elastic · May 8, 2020 · 0fcdd06 · 0fcdd06
1 parent eff46b0
commit 0fcdd06
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git a/...ication/components/pipeline_processors_editor/components/drag_and_drop_tree/utils.test.ts b/...ication/components/pipeline_processors_editor/components/drag_and_drop_tree/utils.test.ts
@@ -11,10 +11,17 @@ const testBaseSelector = ['TEST'];
 describe('Resolve destination location', () => {
   it('resolves to root level when dragged to top', () => {
     const testItems = [
+      /* pos 0 -- this should displace item below, same with rest */
       ['processors', '0'],
+      /* pos 1 */
       ['processors', '0', 'onFailure', '0'],
     ];
-    const result = resolveDestinationLocation(testItems, 0, testBaseSelector, 'up');
+    const result = resolveDestinationLocation(
+      testItems,
+      0 /* corresponds to position 0, when dragging up */,
+      testBaseSelector,
+      'up'
+    );
     expect(result).toEqual({ selector: ['processors'], index: 0 });
   });
 
@@ -37,17 +44,45 @@ describe('Resolve destination location', () => {
   it('nests an element at the position it was placed', () => {
     const testItems = [
       ['processors', '0'],
+      /* pos 0 -- this should displace item below, same with rest */
+      ['processors', '0', 'onFailure', '0'],
+      /* pos 1 */
       ['processors', '1'],
+      /* pos 2 */
       ['processors', '1', 'onFailure', '0'],
+      /* pos 3 */
+      ['processors', '2'],
     ];
     const result2 = resolveDestinationLocation(
       testItems,
-      testItems.length - 1,
+      2 /* corresponds to pos 2, when dragging down */,
       testBaseSelector,
       'down',
       false
     );
-    expect(result2).toEqual({ selector: ['processors', '1', 'onFailure'], index: 1 });
+    expect(result2).toEqual({ selector: ['processors', '1', 'onFailure'], index: 0 });
+  });
+
+  it('handles special case of dragging to bottom with root level item', () => {
+    const testItems = [
+      ['processors', '0'],
+      /* pos 0 -- this should displace item below, same with rest */
+      ['processors', '0', 'onFailure', '0'],
+      /* pos 1 */
+      ['processors', '1'],
+      /* pos 2 */
+      ['processors', '1', 'onFailure', '0'],
+      /* pos 3 */
+      ['processors', '2'],
+    ];
+    const result2 = resolveDestinationLocation(
+      testItems,
+      3 /* corresponds to pos 3, when dragging down */,
+      testBaseSelector,
+      'down',
+      true
+    );
+    expect(result2).toEqual({ selector: ['processors'], index: 2 });
   });
 
   it('sets the base selector if there are no items', () => {
@@ -70,13 +105,23 @@ describe('Resolve destination location', () => {
   it('displaces bottom item if surrounding items are at different levels', () => {
     const testItems1 = [
       ['0'],
+      /* pos 0 -- this should displace item below, same with rest */
       ['0', 'onFailure', '0'],
+      /* pos 1 */
       ['0', 'onFailure', '1'],
+      /* pos 2 */
       ['0', 'onFailure', '1', 'onFailure', '0'],
+      /* pos 3 */
       ['0', 'onFailure', '1', 'onFailure', '1'],
+      /* pos 4 */
     ];
 
-    const result1 = resolveDestinationLocation(testItems1, 3, testBaseSelector, 'down');
+    const result1 = resolveDestinationLocation(
+      testItems1,
+      2 /* corresponds to pos 2, when dragging from above */,
+      testBaseSelector,
+      'down'
+    );
     expect(result1).toEqual({
       selector: ['0', 'onFailure', '1', 'onFailure'],
       index: 0,
@@ -91,7 +136,7 @@ describe('Resolve destination location', () => {
       ['0', 'onFailure', '3'],
     ];
 
-    const result2 = resolveDestinationLocation(testItems2, 4, testBaseSelector, 'down');
+    const result2 = resolveDestinationLocation(testItems2, 3, testBaseSelector, 'down');
     expect(result2).toEqual({ selector: ['0', 'onFailure'], index: 2 });
   });
 

diff --git a/.../application/components/pipeline_processors_editor/components/drag_and_drop_tree/utils.ts b/.../application/components/pipeline_processors_editor/components/drag_and_drop_tree/utils.ts
@@ -59,7 +59,7 @@ export const resolveDestinationLocation = (
 
   if (dragDirection === 'down') {
     const below: ProcessorSelector = items[destinationIndex + 1];
-    return mapSelectorToDragLocation(below);
+    return mapSelectorToDragLocation(below ?? displacing);
   } else {
     return mapSelectorToDragLocation(displacing);
   }