FilesApp quickview: test to ensure that info box opens/closes on enter key

* Added quickview integration test pressEnterOnInfoBoxToOpenClose.
* Updated test.util.sync.deepQueryAllElements to accept targetQuery
  as either string or !Array<string>.
* Changed RemoteCall waitForElement* functions to call
  deepQueryAllElements to allow for usage with nested elements.
* Updated javadoc on RemoteCall functions to show which already
  support query as string|!Array<string>.


Bug: 893093
Change-Id: I7c542e7a2bc914e16fa8142fb696f5b3fe370752
Reviewed-on: https://chromium-review.googlesource.com/c/1345693Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Joel Hockey <joelhockey@chromium.org>
Cr-Commit-Position: refs/heads/master@{#610326}

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -444,6 +444,7 @@ WRAPPED_INSTANTIATE_TEST_CASE_P(
                       TestCase("openQuickViewCrostini"),
                       TestCase("openQuickViewUsb"),
                       TestCase("openQuickViewMtp"),
+                      TestCase("pressEnterOnInfoBoxToOpenClose"),
                       TestCase("closeQuickView")));
 
 WRAPPED_INSTANTIATE_TEST_CASE_P(

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

@@ -171,14 +171,14 @@ test.util.sync.isWindowMaximized = function(contentWindow) {
 test.util.sync.queryAllElements = function(
     contentWindow, targetQuery, opt_styleNames) {
   return test.util.sync.deepQueryAllElements(
-      contentWindow, [targetQuery], opt_styleNames);
+      contentWindow, targetQuery, opt_styleNames);
 };
 
 /**
  * Queries elements inside shadow DOM.
  *
  * @param {!Window} contentWindow Window to be tested.
- * @param {!Array<string>} targetQuery Query to specify the element.
+ * @param {string|!Array<string>} targetQuery Query to specify the element.
  *   |targetQuery[0]| specifies the first element(s). |targetQuery[1]| specifies
  *   elements inside the shadow DOM of the first element, and so on.
  * @param {Array<string>=} opt_styleNames List of CSS property name to be
@@ -192,6 +192,8 @@ test.util.sync.deepQueryAllElements = function(
     contentWindow, targetQuery, opt_styleNames) {
   if (!contentWindow.document)
     return [];
+  if (typeof targetQuery === 'string')
+    targetQuery = [targetQuery];
 
   var elems =
       test.util.sync.deepQuerySelectorAll_(contentWindow.document, targetQuery);

ui/file_manager/integration_tests/file_manager/quick_view.js

@@ -907,3 +907,53 @@ testcase.openQuickViewVideo = function() {
     },
   ]);
 };
+
+/**
+ * Tests close/open metadata info via Enter key.
+ */
+testcase.pressEnterOnInfoBoxToOpenClose = function() {
+  const infoButton = ['#quick-view', '#metadata-button'];
+  const key = [infoButton, 'Enter', false, false, false];
+  const infoShown = ['#quick-view', '#contentPanel[metadata-box-active]'];
+  const infoHidden =
+      ['#quick-view', '#contentPanel:not([metadata-box-active])'];
+
+  let appId;
+
+  StepsRunner.run([
+    // Open Files app on Downloads containing ENTRIES.hello.
+    function() {
+      setupAndWaitUntilReady(
+          null, RootPath.DOWNLOADS, this.next, [ENTRIES.hello], []);
+    },
+    // Open the file in Quick View.
+    function(results) {
+      appId = results.windowId;
+      const openSteps = openQuickViewSteps(appId, ENTRIES.hello.nameText);
+      StepsRunner.run(openSteps).then(this.next);
+    },
+    // Press Enter on info button to close metadata box.
+    function() {
+      remoteCall.callRemoteTestUtil('fakeKeyDown', appId, key, this.next);
+    },
+    // Info should be hidden.
+    function() {
+      remoteCall.waitForElement(appId, infoHidden).then(this.next);
+    },
+    // Press Enter on info button to open metadata box.
+    function() {
+      remoteCall.callRemoteTestUtil('fakeKeyDown', appId, key, this.next);
+    },
+    // Info should be shown.
+    function() {
+      remoteCall.waitForElement(appId, infoShown).then(this.next);
+    },
+    // Close Quick View.
+    function() {
+      StepsRunner.run(closeQuickViewSteps(appId)).then(this.next);
+    },
+    function() {
+      checkIfNoErrorsOccured(this.next);
+    },
+  ]);
+};

ui/file_manager/integration_tests/remote_call.js

@@ -184,7 +184,10 @@ RemoteCall.prototype.waitForWindowGeometry = function(windowId, width, height) {
 /**
  * Waits for the specified element appearing in the DOM.
  * @param {string} windowId Target window ID.
- * @param {string} query Query string for the element.
+ * @param {string|!Array<string>} query Query to specify the element.
+ *     If query is an array, |query[0]| specifies the first
+ *     element(s), |query[1]| specifies elements inside the shadow DOM of
+ *     the first element, and so on.
  * @return {Promise} Promise to be fulfilled when the element appears.
  */
 RemoteCall.prototype.waitForElement = function(windowId, query) {
@@ -194,7 +197,10 @@ RemoteCall.prototype.waitForElement = function(windowId, query) {
 /**
  * Waits for the specified element appearing in the DOM.
  * @param {string} windowId Target window ID.
- * @param {string} query Query string for the element.
+ * @param {string|!Array<string>} query Query to specify the element.
+ *     If query is an array, |query[0]| specifies the first
+ *     element(s), |query[1]| specifies elements inside the shadow DOM of
+ *     the first element, and so on.
  * @param {!Array<string>} styleNames List of CSS property name to be
  *     obtained. NOTE: Causes element style re-calculation.
  * @return {Promise} Promise to be fulfilled when the element appears.
@@ -204,7 +210,8 @@ RemoteCall.prototype.waitForElementStyles = function(
   var caller = getCaller();
   return repeatUntil(() => {
     return this
-        .callRemoteTestUtil('queryAllElements', windowId, [query, styleNames])
+        .callRemoteTestUtil(
+            'deepQueryAllElements', windowId, [query, styleNames])
         .then(function(elements) {
           if (elements.length > 0)
             return elements[0];
@@ -248,13 +255,16 @@ RemoteCall.prototype.waitFor = function(
 /**
  * Waits for the specified element leaving from the DOM.
  * @param {string} windowId Target window ID.
- * @param {string} query Query string for the element.
+ * @param {string|!Array<string>} query Query to specify the element.
+ *     If query is an array, |query[0]| specifies the first
+ *     element(s), |query[1]| specifies elements inside the shadow DOM of
+ *     the first element, and so on.
  * @return {Promise} Promise to be fulfilled when the element is lost.
  */
 RemoteCall.prototype.waitForElementLost = function(windowId, query) {
   var caller = getCaller();
   return repeatUntil(function() {
-    return this.callRemoteTestUtil('queryAllElements', windowId, [query])
+    return this.callRemoteTestUtil('deepQueryAllElements', windowId, [query])
         .then(function(elements) {
           if (elements.length > 0)
             return pending(caller, 'Elements %j is still exists.', elements);
@@ -266,7 +276,10 @@ RemoteCall.prototype.waitForElementLost = function(windowId, query) {
 /**
  * Sends a fake key down event.
  * @param {string} windowId Window ID.
- * @param {string} query Query for the target element.
+ * @param {string|!Array<string>} query Query to specify the element.
+ *     If query is an array, |query[0]| specifies the first
+ *     element(s), |query[1]| specifies elements inside the shadow DOM of
+ *     the first element, and so on.
  * @param {string} key DOM UI Events Key value.
  * @param {boolean} ctrlKey Control key flag.
  * @param {boolean} shiftKey Shift key flag.
@@ -642,7 +655,10 @@ RemoteCallGallery.prototype.changeNameAndWait = function(windowId, newName) {
 /**
  * Shorthand for clicking an element.
  * @param {AppWindow} appWindow Application window.
- * @param {string} query Query for the element.
+ * @param {string|!Array<string>} query Query to specify the element.
+ *     If query is an array, |query[0]| specifies the first
+ *     element(s), |query[1]| specifies elements inside the shadow DOM of
+ *     the first element, and so on.
  * @param {Promise} Promise to be fulfilled with the clicked element.
  */
 RemoteCallGallery.prototype.waitAndClickElement = function(windowId, query) {