Files app: Fix the unittest HTML to work with Polymer elements

For our unittests Polymer wasn't working, this CL changes it by:
1. Always adding the HTML import polyfil.
2. Always importing the the Polymer config at the top, so any test using
Polymer elements work.
3. If there is any dependency in the Files app Polymer elements (files
inside //ui/file_manager/file_manager/foreground/elements/) it uses the
elements_bundle.html instead of individual JS files.

When I activated Polymer and imported the elements_bundle.html some
tests started failing because they require the chrome.fileManagerPrivate
mock.

FileTransferController test uses ListContainer that requires the
<files-spinner>.  Also add the closing tag </cr-input> so the adjacent
<input> remains outside the <cr-input> allowing the focus to flow
properly as the test setting the focus on #test-input started failing
once <cr-input> Polymer became fully functional.

NOTE: This fix is only relevant for non-JS module unittest, we're
migrating unittest to JS module and this problem doesn't happen when
using the built-in JS import.

Bug: 1102263
Change-Id: I2ea80bbe93afca2521bfa5ab9fcd6c32fcf8ecc0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2573696
Commit-Queue: Noel Gordon <noel@chromium.org>
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833573}

ui/file_manager/base/gn/js_test_gen_html.py

@@ -44,6 +44,12 @@ _HTML_FOOTER = r"""
 </html>
 """
 
+_ELEMENTS_BUNDLE_IMPORTED = False
+_ELEMENTS_BUNDLE = _IMPORT % (
+  'chrome://file_manager_test/ui/file_manager/file_manager/foreground/elements'
+  '/elements_bundle.html')
+
+
 
 def _process_deps(unique_deps, dep_type, target_name):
   """Processes all deps strings, yielding each HTML tag to include the dep.
@@ -72,6 +78,26 @@ def _process_deps(unique_deps, dep_type, target_name):
       # just ignore other files files from /jstemplate/
       continue
 
+    # Ignoring Polymer files, because they're loaded by the HTML imports from
+    # other files.
+    if 'third_party/polymer/' in dep:
+      continue
+
+    # These files are loaded via HTML import. Don't load them again here: that
+    # would cause the tests to fail.
+    if 'parse_html_subset.js' in dep:
+      continue
+    if 'i18n_behavior.js' in dep:
+      continue
+
+    # Any JS from /elements/ will be HTML imported via the elements_bundle.html.
+    if 'file_manager/foreground/elements/' in dep and not'_unittest' in dep:
+      global _ELEMENTS_BUNDLE_IMPORTED
+      if not _ELEMENTS_BUNDLE_IMPORTED:
+        yield _ELEMENTS_BUNDLE
+        _ELEMENTS_BUNDLE_IMPORTED = True
+      continue
+
     # Map file_manager files:
     dep = dep.replace('ui/file_manager/',
                       'chrome://file_manager_test/ui/file_manager/', 1)
@@ -83,10 +109,6 @@ def _process_deps(unique_deps, dep_type, target_name):
     # WebUI files (both Polymer and non-Polymer):
     dep = dep.replace('ui/webui/resources/', 'chrome://resources/', 1)
 
-    # Polymer Files:
-    dep = dep.replace('third_party/polymer/', 'chrome://resources/polymer/', 1)
-    dep = dep.replace('components-chromium/', '', 1)
-
     # Remove the relative because all replaces above map to an absolute path in
     # chrome://* and this URL scheme doesn't allow "..".
     dep = dep.replace('../', '')
@@ -150,8 +172,9 @@ def _process(deps, output_filename, mocks, html_import, target_name):
   with open(output_filename, 'w') as out:
     out.write(_HTML_FILE)
 
-    if html_import:
-      out.write(_HTML_IMPORT_POLYFIL + '\n')
+    # Always add the HTML polyfil and the Polymer config.
+    out.write(_HTML_IMPORT_POLYFIL + '\n')
+    out.write(_IMPORT % ('chrome://resources/html/polymer.html') + '\n')
 
     dep_type = 'html_import' if html_import else 'classic_script'
     for dep in _process_deps(mocks, dep_type, target_name):

ui/file_manager/file_manager/foreground/elements/files_message_unittest.js

@@ -2,6 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * TODO(lucmult): Remove this when converting to JS modules.
+ * @suppress {checkTypes}
+ */
+chrome.fileManagerPrivate = {
+  FormatFileSystemType: {
+    VFAT: 'vfat',
+    EXFAT: 'exfat',
+    NTFS: 'ntfs',
+  },
+};
+
 /**
  * Adds a FilesMessage element to the page, initially hidden.
  */
@@ -17,7 +29,7 @@ function setUpPage() {
 function setFilesMessageContent() {
   // Get the FilesMessage element.
   /** @type {!FilesMessage|!Element} */
-  let message = assert(document.querySelector('#test-files-message'));
+  const message = assert(document.querySelector('#test-files-message'));
 
   // Use the FilesMessage.setContent() method to assign all its settable
   // properties in one go.

ui/file_manager/file_manager/foreground/elements/files_password_dialog_unittest.js

@@ -15,6 +15,18 @@ let cancel;
 /** @type {!CrButtonElement} */
 let unlock;
 
+/**
+ * TODO(lucmult): Remove this when converting to JS modules.
+ * @suppress {checkTypes}
+ */
+chrome.fileManagerPrivate = {
+  FormatFileSystemType: {
+    VFAT: 'vfat',
+    EXFAT: 'exfat',
+    NTFS: 'ntfs',
+  },
+};
+
 /**
  * Mock LoadTimeData strings.
  */

ui/file_manager/file_manager/foreground/elements/files_xf_elements_unittest.js

@@ -2,6 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * TODO(lucmult): Remove this when converting to JS modules.
+ * @suppress {checkTypes, constantProperty}
+ */
+chrome.fileManagerPrivate = {
+  FormatFileSystemType: {
+    VFAT: 'vfat',
+    EXFAT: 'exfat',
+    NTFS: 'ntfs',
+  },
+};
+
 /** @type {!DisplayPanel|!Element} */
 let displayPanel;
 
@@ -496,4 +508,4 @@ async function testFilesDisplayPanelTransferDetailsSummary(done) {
   assertEquals('expanded', summaryPanelItem.getAttribute('data-category'));
 
   done();
-}
\ No newline at end of file
+}

ui/file_manager/file_manager/foreground/js/file_transfer_controller_unittest.js

@@ -36,6 +36,7 @@ function setUp() {
     '  <div tabindex="0" id="directory-tree">',
     '  </div>',
     '  <div id="list-container">',
+    '    <files-spinner class="loading-indicator" hidden></files-spinner>',
     '    <div id="detail-table">',
     '      <list id="file-list" contextmenu="#file-context-menu" tabindex="0">',
     '      </list>',
@@ -49,7 +50,7 @@ function setUp() {
     '  </div>',
     '  <div id="test-elements">',
     '    <input type="text" id="free-text">',
-    '    <cr-input id="test-input" tabindex="0">',
+    '    <cr-input id="test-input" tabindex="0"></cr-input>',
     '    <input type="button" id="button">',
     '</div>',
   ].join('');

ui/file_manager/gallery/js/slide_mode_unittest.js

@@ -2,6 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * @suppress {checkTypes, constantProperty}
+ */
+chrome.fileManagerPrivate = {
+  FormatFileSystemType: {
+    VFAT: 'vfat',
+    EXFAT: 'exfat',
+    NTFS: 'ntfs',
+  },
+};
+
 /**
  * Mock implementation of strf function.
  */