diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts
index d824c7547ab..e334816edc3 100644
--- a/projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts
+++ b/projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts
@@ -934,4 +934,71 @@ export class QueryBuilderFunctions {
 
         return [dropGhost, prevElement, nextElement, newChipContents];
     }
+
+    public static verifyGhostPositionOnMouseDrag(fix: ComponentFixture<any>, draggedChip: any, X: number, Y: number, moveDown: boolean) {
+        const ghostPositionVisits: boolean[] = [false, false, false, false, false, false, false, false];
+        const draggedChipCenter = QueryBuilderFunctions.getElementCenter(draggedChip.chipArea.nativeElement);
+        const dragDir = draggedChip.dragDirective;
+
+        //pickup chip
+        dragDir.onPointerDown({ pointerId: 1, pageX: draggedChipCenter.X, pageY: draggedChipCenter.Y });
+        fix.detectChanges();
+
+        //trigger ghost
+        QueryBuilderFunctions.dragMove(dragDir, draggedChipCenter.X + 10, draggedChipCenter.Y + 10);
+        fix.detectChanges();
+
+        spyOn(dragDir.ghostElement, 'dispatchEvent').and.callThrough();
+
+        let target = moveDown ? 350 : 0;
+        let shift = moveDown ? 1 : -1
+        //Drag ghost up or down and check if drop ghost is rendered in the expected positions
+        for (let i = moveDown ? 0 : 350; moveDown ? i <= target : i >= target; i += shift) {
+            Y += moveDown ? 1 : -1;
+
+            QueryBuilderFunctions.dragMove(dragDir, X, Y);
+            tick();
+            fix.detectChanges();
+
+            const [dropGhost, prevElement, nextElement] = QueryBuilderFunctions.getDropGhostAndItsSiblings(fix);
+
+            if (i < 40 && !ghostPositionVisits[0]) {
+                if (i <= 42) tick(50);
+                if (!dropGhost) ghostPositionVisits[0] = true;
+            }
+
+            if (i > 35 && i < 122 && !ghostPositionVisits[1]) {
+                if (dropGhost && !prevElement && nextElement == 'OrderName  Equals  foo') ghostPositionVisits[1] = true;
+            }
+
+            if (i > 120 && i < 165 && !ghostPositionVisits[2]) {
+                if (dropGhost && prevElement == 'OrderName  Equals  foo' && nextElement === 'or  OrderName  Ends With  a  OrderDate  Today') ghostPositionVisits[2] = true;
+            }
+
+            if (i > 166 && i < 201 && !ghostPositionVisits[3]) {
+                if (dropGhost && !prevElement && nextElement == 'OrderName  Ends With  a') ghostPositionVisits[3] = true;
+            }
+
+            if (i > 202 && i < 241 && !ghostPositionVisits[4]) {
+                if (dropGhost && prevElement == 'OrderName  Ends With  a' && nextElement === 'OrderDate  Today') ghostPositionVisits[4] = true;
+            }
+
+            if (i > 240 && i < 273 && !ghostPositionVisits[5]) {
+                if (dropGhost && prevElement == 'OrderDate  Today' && !nextElement) ghostPositionVisits[5] = true;
+            }
+
+            if (i > 256 && i < 316 && !ghostPositionVisits[6]) {
+                if (X > 400 || (dropGhost && prevElement == 'or  OrderName  Ends With  a  OrderDate  Today' && !nextElement)) ghostPositionVisits[6] = true;
+            }
+
+            if (i > 320 && !ghostPositionVisits[7]) {
+                if (i >= 340) tick(50);
+                if (!dropGhost) ghostPositionVisits[7] = true;
+            }
+        }
+
+        //When dragged to the end, check results
+        expect(ghostPositionVisits).not.toContain(false,
+            `Ghost was not rendered on position(s) ${ghostPositionVisits.reduce((arr, e, ix) => ((e == false) && arr.push(ix), arr), []).toString()}`);
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts
index ce1d8ee6441..497ff573299 100644
--- a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts
@@ -2511,88 +2511,24 @@ describe('IgxQueryBuilder', () => {
       expect(chipComponents[1].nativeElement.getBoundingClientRect().height).toBe(0);
     });
 
-    xit('Should render drop ghost properly when mouse dragged.', fakeAsync(() => {
+    it('Should render drop ghost properly when mouse dragged down on the left.', fakeAsync(() => {
       const draggedChip = chipComponents[1].componentInstance;
-      const draggedChipCenter = QueryBuilderFunctions.getElementCenter(draggedChip.chipArea.nativeElement);
-      const dragDir = draggedChip.dragDirective;
-
-      let X = 100, Y = 75;
-
-      //pickup chip
-      dragDir.onPointerDown({ pointerId: 1, pageX: draggedChipCenter.X, pageY: draggedChipCenter.Y });
-      fix.detectChanges();
-
-      //trigger ghost
-      QueryBuilderFunctions.dragMove(dragDir, draggedChipCenter.X + 10, draggedChipCenter.Y + 10);
-      fix.detectChanges();
-
-      spyOn(dragDir.ghostElement, 'dispatchEvent').and.callThrough();
-
-      const ghostPositionVisits: boolean[] = [false, false, false, false, false, false, false, false]
-
-      let i = 0, pass = 1, inc = 1;
-
-      //Drag ghost up and down four times and check if drop ghost is rendered in the expected positions
-      while (pass <= 4) {
-        i += inc;
-        Y += inc;
-
-        QueryBuilderFunctions.dragMove(dragDir, X, Y);
-        tick();
-        fix.detectChanges();
-
-        const [dropGhost, prevElement, nextElement] = QueryBuilderFunctions.getDropGhostAndItsSiblings(fix);
-
-        if (i < 40 && !ghostPositionVisits[0]) {
-          if (i <= 42) tick(50);
-          if (!dropGhost) ghostPositionVisits[0] = true;
-        }
-
-        if (i > 35 && i < 122 && !ghostPositionVisits[1]) {
-          if (dropGhost && !prevElement && nextElement == 'OrderName  Equals  foo') ghostPositionVisits[1] = true;
-        }
-
-        if (i > 120 && i < 165 && !ghostPositionVisits[2]) {
-          if (dropGhost && prevElement == 'OrderName  Equals  foo' && nextElement === 'or  OrderName  Ends With  a  OrderDate  Today') ghostPositionVisits[2] = true;
-        }
-
-        if (i > 166 && i < 201 && !ghostPositionVisits[3]) {
-          if (dropGhost && !prevElement && nextElement == 'OrderName  Ends With  a') ghostPositionVisits[3] = true;
-        }
-
-        if (i > 202 && i < 241 && !ghostPositionVisits[4]) {
-          if (dropGhost && prevElement == 'OrderName  Ends With  a' && nextElement === 'OrderDate  Today') ghostPositionVisits[4] = true;
-        }
-
-        if (i > 240 && i < 273 && !ghostPositionVisits[5]) {
-          if (dropGhost && prevElement == 'OrderDate  Today' && !nextElement) ghostPositionVisits[5] = true;
-        }
-
-        if (i > 256 && i < 316 && !ghostPositionVisits[6]) {
-          if (pass > 2 || (dropGhost && prevElement == 'or  OrderName  Ends With  a  OrderDate  Today' && !nextElement)) ghostPositionVisits[6] = true;
-        }
-
-        if (i > 320 && !ghostPositionVisits[7]) {
-          if (i >= 340) tick(50);
-          if (!dropGhost) ghostPositionVisits[7] = true;
-        }
-
-        //When dragged to the end, check results and reverse direction for next pass
-        if (i === 350 || i === 0) {
-          expect(ghostPositionVisits).not.toContain(false,
-            `Ghost was not rendered on position(s) ${ghostPositionVisits.reduce((arr, e, ix) => ((e == false) && arr.push(ix), arr), []).toString()} on pass:${pass}`);
+      QueryBuilderFunctions.verifyGhostPositionOnMouseDrag(fix, draggedChip, 100, 75, true);
+    }));
 
-          ghostPositionVisits.fill(false);
-          pass++;
-          inc *= -1;
-          if (pass % 2 === 0) Y -= ROW_HEIGHT;
-          if (pass % 2 !== 0) Y += ROW_HEIGHT;
+    it('Should render drop ghost properly when mouse dragged up on the left.', fakeAsync(() => {
+      const draggedChip = chipComponents[1].componentInstance;
+      QueryBuilderFunctions.verifyGhostPositionOnMouseDrag(fix, draggedChip, 100, 75 + 350, false);
+    }));
 
-          //go to the left and test the whole chip div as well(blank space to the right)
-          if (pass == 3) X += 400;
-        }
-      }
+    it('Should render drop ghost properly when mouse dragged down on the right.', fakeAsync(() => {
+      const draggedChip = chipComponents[1].componentInstance;
+      QueryBuilderFunctions.verifyGhostPositionOnMouseDrag(fix, draggedChip, 500, 75, true);
+    }));
 
+    it('Should render drop ghost properly when mouse dragged up on the right.', fakeAsync(() => {
+      const draggedChip = chipComponents[1].componentInstance;
+      QueryBuilderFunctions.verifyGhostPositionOnMouseDrag(fix, draggedChip, 500, 75 + 350, false);
     }));
 
     it('Should position drop ghost below the target condition on dragging down.', () => {