Files app: Add test for search box collapsing with Tab keydown

Add tests for fix on CL:2097775.

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

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -944,6 +944,7 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
                       TestCase("searchDownloadsWithNoResults"),
                       TestCase("searchDownloadsClearSearchKeyDown"),
                       TestCase("searchDownloadsClearSearch"),
+                      TestCase("searchHidingViaTab"),
                       TestCase("searchHidingTextEntryField")));
 
 WRAPPED_INSTANTIATE_TEST_SUITE_P(

ui/file_manager/integration_tests/file_manager/search.js

@@ -163,4 +163,52 @@
         await remoteCall.waitForElement(appId, ['#search-box cr-input']);
     chrome.test.assertEq('false', textInputElement.attributes['aria-disabled']);
   };
+
+  /**
+   * Tests that the search box collapses when empty and Tab out of the box.
+   */
+  testcase.searchHidingViaTab = async () => {
+    const entry = ENTRIES.hello;
+
+    // Open Files app on Downloads.
+    const appId = await setupAndWaitUntilReady(RootPath.DOWNLOADS, [entry], []);
+
+    // Measure the width of the search box when it's collapsed.
+    const collapsedSearchBox = await remoteCall.waitForElementStyles(
+        appId, '#search-wrapper', ['width']);
+
+    // Click the toolbar search button.
+    chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
+        'fakeEvent', appId, ['#search-button', 'click']));
+
+    // Wait search box to be expanded.
+    const caller = getCaller();
+    await repeatUntil(async () => {
+      const element = await remoteCall.waitForElementStyles(
+          appId, '#search-wrapper', ['width']);
+      if (collapsedSearchBox.renderedWidth > element.renderedWidth) {
+        return pending(caller, 'Waiting search box to expand');
+      }
+    });
+
+    // Verify the search input has focus.
+    const input =
+        await remoteCall.callRemoteTestUtil('deepGetActiveElement', appId, []);
+    chrome.test.assertEq(input.attributes['id'], 'input');
+    chrome.test.assertEq(input.attributes['aria-label'], 'Search');
+
+    // Send Tab key to focus the next element.
+    const result = await sendTestMessage({name: 'dispatchTabKey'});
+    chrome.test.assertEq(
+        result, 'tabKeyDispatched', 'Tab key dispatch failure');
+
+    // Check: the search box should collapse.
+    await repeatUntil(async () => {
+      const element = await remoteCall.waitForElementStyles(
+          appId, '#search-wrapper', ['width']);
+      if (collapsedSearchBox.renderedWidth < element.renderedWidth) {
+        return pending(caller, 'Waiting search box to collapse');
+      }
+    });
+  };
 })();