[dragdrop] Add FakeDragLeaveOrDrop test helper

Test helper fakeDragAndDrop has an option to hover the drop target and
skip the drop and dragend event sending part. The browser thinks drag-
drop operations are still active on the page in that case.

Add fakeDragLeaveOrDrop helper to terminate drag-drop operations: send
a dragleave or drop event to the target, and then send a dragend event
to the source.

Tbr: adanilo
Bug: 1062902
Change-Id: Id2ff6d8addbdcb0bce8625ff3e59b0d28712b94f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2275974Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Auto-Submit: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#784268}

ui/file_manager/file_manager/background/js/runtime_loaded_test_util.js

@@ -802,7 +802,7 @@ test.util.sync.rightClickOffset =
  * @param {string} sourceQuery Query to specify the source element.
  * @param {string} targetQuery Query to specify the target element.
  * @param {boolean} skipDrop Set true to drag over (hover) the target
- *    element only, and not send it drop and dragEnd events.
+ *    only, and not send target drop or source dragend events.
  * @param {function(boolean)} callback Function called with result
  *    true on success, or false on failure.
  */
@@ -881,6 +881,75 @@ test.util.async.fakeDragAndDrop =
       sendPhasedDragDropEvents();
     };
 
+/**
+ * Sends a target dragleave or drop event, and source dragend event, to finish
+ * the drag a source over target simulation started by fakeDragAndDrop for the
+ * case where the target was hovered.
+ *
+ * @param {Window} contentWindow Window to be tested.
+ * @param {string} sourceQuery Query to specify the source element.
+ * @param {string} targetQuery Query to specify the target element.
+ * @param {boolean} dragLeave Set true to send a dragleave event to
+ *    the target instead of a drop event.
+ * @param {function(boolean)} callback Function called with result
+ *    true on success, or false on failure.
+ */
+test.util.async.fakeDragLeaveOrDrop =
+    (contentWindow, sourceQuery, targetQuery, dragLeave, callback) => {
+      const source = contentWindow.document.querySelector(sourceQuery);
+      const target = contentWindow.document.querySelector(targetQuery);
+
+      if (!source || !target) {
+        setTimeout(() => {
+          callback(false);
+        }, 0);
+        return;
+      }
+
+      const targetOptions = {
+        bubbles: true,
+        composed: true,
+        dataTransfer: new DataTransfer(),
+      };
+
+      // Get the middle of the source element since some of Files app
+      // logic requires clientX and clientY.
+      const sourceRect = source.getBoundingClientRect();
+      const sourceOptions = Object.assign({}, targetOptions);
+      sourceOptions.clientX = sourceRect.left + (sourceRect.width / 2);
+      sourceOptions.clientY = sourceRect.top + (sourceRect.height / 2);
+
+      // Define the target event type.
+      const targetType = dragLeave ? 'dragleave' : 'drop';
+
+      let dragEventPhase = 0;
+      let event = null;
+
+      function sendPhasedDragEndEvents() {
+        let result = false;
+        switch (dragEventPhase) {
+          case 0:
+            event = new DragEvent(targetType, targetOptions);
+            result = target.dispatchEvent(event);
+            break;
+          case 1:
+            event = new DragEvent('dragend', sourceOptions);
+            result = source.dispatchEvent(event);
+            break;
+        }
+
+        if (!result) {
+          callback(false);
+        } else if (++dragEventPhase <= 1) {
+          contentWindow.requestIdleCallback(sendPhasedDragEndEvents);
+        } else {
+          callback(true);
+        }
+      }
+
+      sendPhasedDragEndEvents();
+    };
+
 /**
  * Sends a resize event to the content window.
  *