[Files app] Fix up fake touch and right click events

Fix fakeTouchClick to only issue touch related events when emulating
touch in the integration tests. The test helper function fakeTouchClick
was issuing "mousedown" and "contextmenu" to make the only test using it
to set the desired state. The actual problem in the test is that the
fakeMouseRightClick helper function wasn't issuing "click" to trigger
the correct event listener to set the desired state.

Fix fakeMouseRightClick to issue all mouse events as it happens if real
user interactions:
* mouseover
* mousedown
* mouseup
* click
* contextmenu

Refactor fakeMouseClick to receive an optional button to be able to
re-use it for right-click.

Test: browser_tests --gtest_filter="ContextMenu/FilesAppBrowserTest.Test/checkContextMenusForInputElements"
Change-Id: I4eb6d93f46b5602256dc03fd49400b3e8e8aa6c0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1642751
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#666143}

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

@@ -421,11 +421,13 @@ test.util.sync.fakeKeyDown =
  *     the first element, and so on.
  * @param {{shift: boolean, alt: boolean, ctrl: boolean}=} opt_keyModifiers
  *     Object containing common key modifiers : shift, alt, and ctrl.
+ * @param {number=} opt_button Mouse button number as per spec, e.g.: 2 for
+ *     right-click.
  * @return {boolean} True if the all events are sent to the target, false
  *     otherwise.
  */
 test.util.sync.fakeMouseClick =
-    (contentWindow, targetQuery, opt_keyModifiers) => {
+    (contentWindow, targetQuery, opt_keyModifiers, opt_button) => {
       const modifiers = opt_keyModifiers || {};
       const props = {
         bubbles: true,
@@ -435,6 +437,9 @@ test.util.sync.fakeMouseClick =
         shiftKey: modifiers.shift,
         altKey: modifiers.alt,
       };
+      if (opt_button !== undefined) {
+        props.button = opt_button;
+      }
       const mouseOverEvent = new MouseEvent('mouseover', props);
       const resultMouseOver =
           test.util.sync.sendEvent(contentWindow, targetQuery, mouseOverEvent);
@@ -507,28 +512,39 @@ test.util.sync.fakeMouseOut =
     };
 
 /**
- * Simulates a fake mouse click (right button, single click) on the element
- * specified by |targetQuery|.
+ * Simulates a fake full mouse right-click  on the element specified by
+ * |targetQuery|.
+ *
+ * It generates the sequence of the following MouseEvents:
+ * 1. mouseover
+ * 2. mousedown
+ * 3. mouseup
+ * 4. click
+ * 5. contextmenu
  *
  * @param {Window} contentWindow Window to be tested.
  * @param {string} targetQuery Query to specify the element.
+ * @param {{shift: boolean, alt: boolean, ctrl: boolean}=} opt_keyModifiers
+ *     Object containing common key modifiers : shift, alt, and ctrl.
  * @return {boolean} True if the event is sent to the target, false
  *     otherwise.
  */
-test.util.sync.fakeMouseRightClick = (contentWindow, targetQuery) => {
-  const mouseDownEvent =
-      new MouseEvent('mousedown', {bubbles: true, button: 2, composed: true});
-  if (!test.util.sync.sendEvent(contentWindow, targetQuery, mouseDownEvent)) {
-    return false;
-  }
+test.util.sync.fakeMouseRightClick =
+    (contentWindow, targetQuery, opt_keyModifiers) => {
+      const clickResult = test.util.sync.fakeMouseClick(
+          contentWindow, targetQuery, opt_keyModifiers, 2 /* right button */);
+      if (!clickResult) {
+        return false;
+      }
 
-  const contextMenuEvent =
-      new MouseEvent('contextmenu', {bubbles: true, composed: true});
-  return test.util.sync.sendEvent(contentWindow, targetQuery, contextMenuEvent);
-};
+      const contextMenuEvent =
+          new MouseEvent('contextmenu', {bubbles: true, composed: true});
+      return test.util.sync.sendEvent(
+          contentWindow, targetQuery, contextMenuEvent);
+    };
 
 /**
- * Simulates a fake touch event (touch start, touch end) on the element
+ * Simulates a fake touch event (touch start and touch end) on the element
  * specified by |targetQuery|.
  *
  * @param {Window} contentWindow Window to be tested.
@@ -542,20 +558,12 @@ test.util.sync.fakeTouchClick = (contentWindow, targetQuery) => {
     return false;
   }
 
-  const mouseDownEvent =
-      new MouseEvent('mousedown', {bubbles: true, button: 2, composed: true});
-  if (!test.util.sync.sendEvent(contentWindow, targetQuery, mouseDownEvent)) {
-    return false;
-  }
-
   const touchEndEvent = new TouchEvent('touchend');
   if (!test.util.sync.sendEvent(contentWindow, targetQuery, touchEndEvent)) {
     return false;
   }
 
-  const contextMenuEvent =
-      new MouseEvent('contextmenu', {bubbles: true, composed: true});
-  return test.util.sync.sendEvent(contentWindow, targetQuery, contextMenuEvent);
+  return true;
 };
 
 /**

ui/file_manager/integration_tests/file_manager/context_menu.js

@@ -260,6 +260,9 @@ testcase.checkContextMenusForInputElements = async () => {
   // Open FilesApp on Downloads.
   const appId = await setupAndWaitUntilReady(RootPath.DOWNLOADS);
 
+  // Click on the search button to display the search box.
+  await remoteCall.waitAndClickElement(appId, '#search-button');
+
   // Query all input elements.
   const elements = await remoteCall.callRemoteTestUtil(
       'queryAllElements', appId,
@@ -605,4 +608,4 @@ testcase.checkRenameDisabledInDocProvider = () => {
 testcase.checkRenameEnabledInDocProvider = () => {
   return checkDocumentsProviderContextMenu(
       'rename', 'Renamable File.txt', true);
-};
\ No newline at end of file
+};