[Files app] Migrate <files-tooltip> tests to integration tests

Migrate tests for <files-tooltip> component from unittest to integration
tests, because unittest environment can't load chrome://resources which
is required for our setup for Polymer.

The unittest will be removed in follow up CL.

Bug: 924873
Change-Id: I2c17fd07e2a2f2c1f062a6c4e7f29105a6917613
Reviewed-on: https://chromium-review.googlesource.com/c/1485623
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Joel Hockey <joelhockey@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#635941}

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -894,6 +894,13 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
         TestCase("newFolderInDownloads"),
         TestCase("showSendFeedbackAction")));
 
+WRAPPED_INSTANTIATE_TEST_SUITE_P(
+    FilesTooltip, /* files_tooltip.js */
+    FilesAppBrowserTest,
+    ::testing::Values(TestCase("filesTooltipFocus"),
+                      TestCase("filesTooltipMouseOver"),
+                      TestCase("filesTooltipClickHides")));
+
 WRAPPED_INSTANTIATE_TEST_SUITE_P(
     Crostini, /* crostini.js */
     FilesAppBrowserTest,

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

@@ -333,7 +333,7 @@ test.util.sync.sendEvent = (contentWindow, targetQuery, event) => {
  * @param {Window} contentWindow Window to be tested.
  * @param {string} targetQuery Query to specify the element.
  * @param {string} eventType Type of event.
- * @param {Object=} opt_additionalProperties Object contaning additional
+ * @param {Object=} opt_additionalProperties Object containing additional
  *     properties.
  * @return {boolean} True if the event is sent to the target, false otherwise.
  */
@@ -385,8 +385,8 @@ test.util.sync.fakeKeyDown = (contentWindow, targetQuery, key, ctrl, shift, alt)
  *     If targetQuery is an array, |targetQuery[0]| specifies the first
  *     element(s), |targetQuery[1]| specifies elements inside the shadow DOM of
  *     the first element, and so on.
- * @param {{shift: boolean, alt: boolean, ctrl: boolean}=} opt_keyModifiers Object
- *     contaning common key modifiers : shift, alt, and ctrl.
+ * @param {{shift: boolean, alt: boolean, ctrl: boolean}=} opt_keyModifiers
+ *     Object containing common key modifiers : shift, alt, and ctrl.
  * @return {boolean} True if the all events are sent to the target, false
  *     otherwise.
  */
@@ -415,6 +415,62 @@ test.util.sync.fakeMouseClick = (contentWindow, targetQuery, opt_keyModifiers) =
   return resultMouseOver && resultMouseDown && resultMouseUp && resultClick;
 };
 
+/**
+ * Simulates a mouse hover on an element specified by |targetQuery|.
+ *
+ * @param {Window} contentWindow Window to be tested.
+ * @param {string|Array<string>} targetQuery Query to specify the element.
+ *     If targetQuery is an array, |targetQuery[0]| specifies the first
+ *     element(s), |targetQuery[1]| specifies elements inside the shadow DOM of
+ *     the first element, and so on.
+ * @param {{shift: boolean, alt: boolean, ctrl: boolean}=} opt_keyModifiers
+ *     Object containing common key modifiers : shift, alt, and ctrl.
+ * @return {boolean} True if the event was sent to the target, false otherwise.
+ */
+test.util.sync.fakeMouseOver =
+    (contentWindow, targetQuery, opt_keyModifiers) => {
+      const modifiers = opt_keyModifiers || {};
+      const props = {
+        bubbles: true,
+        detail: 1,
+        composed: true,  // Allow the event to bubble past shadow DOM root.
+        ctrlKey: modifiers.ctrl,
+        shiftKey: modifiers.shift,
+        altKey: modifiers.alt,
+      };
+      const mouseOverEvent = new MouseEvent('mouseover', props);
+      return test.util.sync.sendEvent(
+          contentWindow, targetQuery, mouseOverEvent);
+    };
+
+/**
+ * Simulates a mouseout event on an element specified by |targetQuery|.
+ *
+ * @param {Window} contentWindow Window to be tested.
+ * @param {string|Array<string>} targetQuery Query to specify the element.
+ *     If targetQuery is an array, |targetQuery[0]| specifies the first
+ *     element(s), |targetQuery[1]| specifies elements inside the shadow DOM of
+ *     the first element, and so on.
+ * @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.fakeMouseOut =
+    (contentWindow, targetQuery, opt_keyModifiers) => {
+      const modifiers = opt_keyModifiers || {};
+      const props = {
+        bubbles: true,
+        detail: 1,
+        composed: true,  // Allow the event to bubble past shadow DOM root.
+        ctrlKey: modifiers.ctrl,
+        shiftKey: modifiers.shift,
+        altKey: modifiers.alt,
+      };
+      const mouseOutEvent = new MouseEvent('mouseout', props);
+      return test.util.sync.sendEvent(
+          contentWindow, targetQuery, mouseOutEvent);
+    };
+
 /**
  * Simulates a fake mouse click (right button, single click) on the element
  * specified by |targetQuery|.

ui/file_manager/integration_tests/file_manager/files_tooltip.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+'use strict';
+
+(function() {
+
+const tooltipQueryHidden = 'files-tooltip:not([visible])';
+const tooltipQueryVisible = 'files-tooltip[visible=true]';
+const searchButton = '#search-button[has-tooltip]';
+const viewButton = '#view-button[has-tooltip]';
+const breadcrumbs = '#breadcrumb-path-0';
+
+/**
+ * Tests that tooltip is displayed when focusing an element with tooltip.
+ */
+testcase.filesTooltipFocus = async () => {
+  const appId =
+      await setupAndWaitUntilReady(RootPath.DOWNLOADS, [ENTRIES.beautiful], []);
+
+  // Focus a button with tooltip.
+  let tooltip = await remoteCall.waitForElement(appId, tooltipQueryHidden);
+  chrome.test.assertTrue(
+      await remoteCall.callRemoteTestUtil('focus', appId, [searchButton]));
+
+  // The tooltip should be visible.
+  tooltip = await remoteCall.waitForElement(appId, tooltipQueryVisible);
+  let label =
+      await remoteCall.waitForElement(appId, [tooltipQueryVisible, '#label']);
+  chrome.test.assertEq('Search', label.text);
+
+  // Focus another button with tooltip.
+  chrome.test.assertTrue(
+      await remoteCall.callRemoteTestUtil('focus', appId, [viewButton]));
+
+  // The tooltip should be visible.
+  tooltip = await remoteCall.waitForElement(appId, tooltipQueryVisible);
+  label =
+      await remoteCall.waitForElement(appId, [tooltipQueryVisible, '#label']);
+  chrome.test.assertEq('Switch to thumbnail view', label.text);
+
+  // Focus a button without tooltip.
+  chrome.test.assertTrue(
+      await remoteCall.callRemoteTestUtil('focus', appId, [breadcrumbs]));
+
+  // The tooltip should be hidden.
+  tooltip = await remoteCall.waitForElement(appId, tooltipQueryHidden);
+};
+
+/**
+ * Tests that tooltip is displayed when hovering an element with tooltip.
+ */
+testcase.filesTooltipMouseOver = async () => {
+  const appId =
+      await setupAndWaitUntilReady(RootPath.DOWNLOADS, [ENTRIES.beautiful], []);
+
+  // Hover a button with tooltip.
+  let tooltip = await remoteCall.waitForElement(appId, tooltipQueryHidden);
+  chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
+      'fakeMouseOver', appId, [searchButton]));
+
+  // The tooltip should be visible.
+  tooltip = await remoteCall.waitForElement(appId, tooltipQueryVisible);
+  let label =
+      await remoteCall.waitForElement(appId, [tooltipQueryVisible, '#label']);
+  chrome.test.assertEq('Search', label.text);
+
+  // Hover another button with tooltip.
+  chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
+      'fakeMouseOver', appId, [viewButton]));
+
+  // The tooltip should be visible.
+  tooltip = await remoteCall.waitForElement(appId, tooltipQueryVisible);
+  label =
+      await remoteCall.waitForElement(appId, [tooltipQueryVisible, '#label']);
+  chrome.test.assertEq('Switch to thumbnail view', label.text);
+
+  // Send a mouseout event.
+  chrome.test.assertTrue(
+      await remoteCall.callRemoteTestUtil('fakeMouseOut', appId, [viewButton]));
+
+  // The tooltip should be hidden.
+  tooltip = await remoteCall.waitForElement(appId, tooltipQueryHidden);
+};
+
+/**
+ * Tests that tooltip is hidden when clicking on body (or anything else).
+ */
+testcase.filesTooltipClickHides = async () => {
+  const appId =
+      await setupAndWaitUntilReady(RootPath.DOWNLOADS, [ENTRIES.beautiful], []);
+
+  // Hover a button with tooltip.
+  let tooltip = await remoteCall.waitForElement(appId, tooltipQueryHidden);
+  chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
+      'fakeMouseOver', appId, [searchButton]));
+
+  // The tooltip should be visible.
+  tooltip = await remoteCall.waitForElement(appId, tooltipQueryVisible);
+  let label =
+      await remoteCall.waitForElement(appId, [tooltipQueryVisible, '#label']);
+  chrome.test.assertEq('Search', label.text);
+
+  // Hover another button with tooltip.
+  chrome.test.assertTrue(
+      await remoteCall.callRemoteTestUtil('fakeMouseClick', appId, ['body']));
+
+  // The tooltip should be visible.
+  tooltip = await remoteCall.waitForElement(appId, tooltipQueryHidden);
+};
+})();

ui/file_manager/integration_tests/file_manager_test_manifest.json

@@ -24,6 +24,7 @@
       "file_manager/drive_specific.js",
       "file_manager/file_dialog.js",
       "file_manager/file_display.js",
+      "file_manager/files_tooltip.js",
       "file_manager/folder_shortcuts.js",
       "file_manager/gear_menu.js",
       "file_manager/grid_view.js",