Files app: Generate JS module for <files_tooltip> and its unittest

Remove the reference to util.isFilesNg() to make easier to generate the
JS module because we're removing the support of running non FilesNg
version.

Add is_polymer3 option for js_test_gen_html.gni() to be able to closure
compile the unittest for Polymer elements.

Bug: 1133186,1152668
Change-Id: I6067d205ea962bc1fb1f1ee191eed356fc3bfd6f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2557886Reviewed-by: Jeremie Boulic <jboulic@chromium.org>
Commit-Queue: Jeremie Boulic <jboulic@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#832615}

chrome/browser/chromeos/file_manager/file_manager_jstest.cc

@@ -115,7 +115,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesToast) {
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesToolTip) {
-  RunTestURL("foreground/elements/files_tooltip_unittest_gen.html");
+  RunTestURL("foreground/elements/files_tooltip_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FileSystemMetadataProvider) {

ui/file_manager/BUILD.gn

@@ -62,6 +62,7 @@ group("unit_test_data") {
     "file_manager/common/js:js_test_gen_html",
     "file_manager/common/js:js_test_gen_html_modules",
     "file_manager/foreground/elements:js_test_gen_html",
+    "file_manager/foreground/elements:js_test_gen_html_modules",
     "file_manager/foreground/js:js_test_gen_html",
     "file_manager/foreground/js:js_test_gen_html_modules",
     "file_manager/foreground/js/metadata:js_test_gen_html",

ui/file_manager/base/gn/js_test_gen_html.gni

@@ -32,6 +32,9 @@ import("//third_party/closure_compiler/js_unit_tests.gni")
 #     contain <script type="module" src="..._unittest.m.js"> and traditional
 #     <script>s for mocks.
 #
+#   is_polymer3:
+#     Boolean indicating that it's a test for a Polymer 3 element.
+#
 #
 # Non-Polymer example:
 #   js_test_gen_html("folder_tests") {
@@ -77,6 +80,7 @@ template("js_test_gen_html") {
                              "mocks",
                              "html_import",
                              "js_module",
+                             "is_polymer3",
                            ])
     testonly = true
     sources = []
@@ -105,6 +109,11 @@ template("js_test_gen_html") {
       args += [ "--js_module" ]
     }
 
+    # Polymer3 implies --js_module for the generated HTML.
+    if (defined(is_polymer3) && is_polymer3) {
+      args += [ "--js_module" ]
+    }
+
     if (defined(mocks)) {
       args += [ "--mocks" ] + rebase_path(mocks, root_build_dir)
       data = mocks
@@ -118,6 +127,9 @@ template("js_test_gen_html") {
       if (defined(invoker.js_module) && invoker.js_module) {
         uses_js_modules = true
       }
+      if (defined(invoker.is_polymer3) && invoker.is_polymer3) {
+        is_polymer3 = true
+      }
       testonly = true
       forward_variables_from(invoker, [ "closure_flags" ])
       deps = [ dep ]

ui/file_manager/file_manager/foreground/elements/BUILD.gn

@@ -24,6 +24,7 @@ group("closure_compile") {
   deps = [
     ":closure_compile_internal",
     ":closure_compile_jsmodules",
+    ":js_test_gen_html_modules_type_check_auto",
     ":js_test_gen_html_type_check_auto",
   ]
 }
@@ -60,6 +61,7 @@ js_type_check("closure_compile_jsmodules") {
     ":files_ripple.m",
     ":files_safe_media.m",
     ":files_toggle_ripple.m",
+    ":files_tooltip.m",
   ]
 }
 
@@ -275,14 +277,29 @@ js_library("files_tooltip") {
   deps = [ "//ui/file_manager/file_manager/common/js:util" ]
 }
 
-js_unittest("files_tooltip_unittest") {
+js_unittest("files_tooltip_unittest.m") {
   deps = [
-    ":files_tooltip",
-    "//ui/file_manager/base/js:test_error_reporting",
-    "//ui/webui/resources/js:webui_resource_test",
+    ":files_tooltip.m",
+    "//chrome/test/data/webui:chai_assert",
+    "//ui/file_manager/base/js:test_error_reporting.m",
   ]
 }
 
+polymer_modulizer("files_tooltip") {
+  js_file = "files_tooltip.js"
+  html_file = "files_tooltip.html"
+  html_type = "dom-module"
+  preserve_url_scheme = true
+}
+
+js_library("files_tooltip.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/files_tooltip.m.js" ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":files_tooltip_module" ]
+}
+
 js_unittest("files_toast_unittest") {
   deps = [
     ":files_toast",
@@ -303,7 +320,6 @@ js_test_gen_html("js_test_gen_html") {
     ":files_message_unittest",
     ":files_password_dialog_unittest",
     ":files_toast_unittest",
-    ":files_tooltip_unittest",
     ":files_xf_elements_unittest",
   ]
   html_import = true
@@ -326,6 +342,19 @@ js_library("xf_display_panel") {
   ]
 }
 
+js_test_gen_html("js_test_gen_html_modules") {
+  is_polymer3 = true
+  deps = [ ":files_tooltip_unittest.m" ]
+
+  closure_flags =
+      strict_error_checking_closure_args + [
+        "js_module_root=./gen/ui",
+        "js_module_root=../../ui",
+        "browser_resolver_prefix_replacements=\"chrome://test/=./\"",
+        "hide_warnings_for=third_party/",
+      ]
+}
+
 js_library("xf_panel_item") {
   deps = [
     ":xf_button",

ui/file_manager/file_manager/foreground/elements/files_tooltip.html

@@ -86,6 +86,5 @@
     </style>
     <div id="label"></div>
   </template>
-
   <script src="files_tooltip.js"></script>
 </dom-module>

ui/file_manager/file_manager/foreground/elements/files_tooltip.js

@@ -12,7 +12,7 @@
  * document.querySelector('files-tooltip').addTargets(
  *     document.querySelectorAll('[has-tooltip]'))
  */
-const FilesTooltip = Polymer({
+/* #export */ const FilesTooltip = Polymer({
   is: 'files-tooltip',
 
   properties: {
@@ -62,7 +62,7 @@ const FilesTooltip = Polymer({
     /**
      * Add <files-tooltip files-ng> for files-ng specific CSS styles.
      */
-    this.toggleAttribute('files-ng', util.isFilesNg());
+    this.toggleAttribute('files-ng', true);
   },
 
   /**
@@ -82,9 +82,6 @@ const FilesTooltip = Polymer({
    */
   addTargets: function(targets) {
     for (let i = 0; i < targets.length; i++) {
-      if (targets[i].hasAttribute('show-card-tooltip') && !util.isFilesNg()) {
-        continue;
-      }
       this.addTarget(targets[i]);
     }
   },
@@ -185,7 +182,7 @@ const FilesTooltip = Polymer({
     const rect = target.getBoundingClientRect();
 
     let top = rect.top + rect.height;
-    if (util.isFilesNg() && !useCardTooltip) {
+    if (!useCardTooltip) {
       top += 8;
     }
 

ui/file_manager/file_manager/foreground/elements/files_tooltip_unittest.js → ui/file_manager/file_manager/foreground/elements/files_tooltip_unittest.m.js

@@ -2,6 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+import {assertEquals, assertFalse, assertNotEquals, assertTrue} from 'chrome://test/chai_assert.js';
+
+import {reportPromise} from '../../../base/js/test_error_reporting.m.js';
+
+import {FilesTooltip} from './files_tooltip.m.js';
+// clang-format on
+
 /** @type {Element} */
 let chocolateButton;
 
@@ -57,20 +65,10 @@ const bodyContent = `
 
 const windowEdgePadding = 6;
 
-function setUp() {
+export function setUp() {
   /** @const {boolean} Assume files-ng in unittest. */
   const enableFilesNg = true;
 
-  // Mock LoadTimeData strings for files-ng case. These tests check top and
-  // left position values, which can differ in files-ng vs not-files-ng.
-  window.loadTimeData.data = {
-    FILES_NG_ENABLED: enableFilesNg,
-  };
-
-  window.loadTimeData.getString = id => {
-    return window.loadTimeData.data_[id] || id;
-  };
-
   /** @return {boolean} */
   window.isFilesNg = () => {
     return enableFilesNg;
@@ -83,7 +81,7 @@ function setUp() {
   otherButton = document.querySelector('#other');
 
   tooltip = document.querySelector('files-tooltip');
-  assertNotEqual('none', window.getComputedStyle(tooltip).display);
+  assertNotEquals('none', window.getComputedStyle(tooltip).display);
   assertEquals('0', window.getComputedStyle(tooltip).opacity);
   assertEquals(enableFilesNg, tooltip.hasAttribute('files-ng'));
 
@@ -100,7 +98,7 @@ function waitForMutation(target) {
   });
 }
 
-function testFocus(callback) {
+export function testFocus(callback) {
   chocolateButton.focus();
 
   return reportPromise(
@@ -145,7 +143,7 @@ function testFocus(callback) {
       callback);
 }
 
-function testHover(callback) {
+export function testHover(callback) {
   chocolateButton.dispatchEvent(new MouseEvent('mouseover'));
 
   return reportPromise(
@@ -191,7 +189,7 @@ function testHover(callback) {
       callback);
 }
 
-function testClickHides(callback) {
+export function testClickHides(callback) {
   chocolateButton.dispatchEvent(new MouseEvent('mouseover', {bubbles: true}));
 
   return reportPromise(
@@ -214,7 +212,7 @@ function testClickHides(callback) {
       callback);
 }
 
-function testCardTooltipHover(callback) {
+export function testCardTooltipHover(callback) {
   cheeseButton.dispatchEvent(new MouseEvent('mouseover'));
 
   return reportPromise(
@@ -240,7 +238,7 @@ function testCardTooltipHover(callback) {
       callback);
 }
 
-function testCardtooltipRTL(callback) {
+export function testCardtooltipRTL(callback) {
   document.documentElement.setAttribute('dir', 'rtl');
   document.body.setAttribute('dir', 'rtl');
 
@@ -269,4 +267,4 @@ function testCardtooltipRTL(callback) {
             document.body.setAttribute('dir', 'ltr');
           }),
       callback);
-}
\ No newline at end of file
+}