[directorytree] Add a keyboard horizontal scroll test

CL:1924341 limited the horizontal scroll of the directorytree to 0, to
resolve issue 1025581, and needs a test of this behavior.

Test: create a nested set of test folders, and use keyboard arrow-left
(provided by expandSelectedFolderInTree, note) to navigate to the last
of those folders. Post navigation, verify the navigation, and that the
directory tree is not horizontally scrolled.

This new test passes with CL:1924341, and fails before that CL (good).
The CL used requestAnimationFrame (rAF) to limit the scroll. Add async
test rAF helper and call it to ensure the scroll rAF is done, and that
expandSelectedFolderInTree events have been processed.

Test: browser_tests --gtest_filter="*TreeKeyboardHorizontalScroll*"
Bug: 1025581
Change-Id: Iff79b963559d282841f1d2045aadcee7e5840cea
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1936579Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Alex Danilo <adanilo@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#719411}

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -460,6 +460,7 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
     DirectoryTree, /* directory_tree.js */
     FilesAppBrowserTest,
     ::testing::Values(TestCase("directoryTreeHorizontalScroll"),
+                      TestCase("directoryTreeKeyboardHorizontalScroll"),
                       TestCase("directoryTreeVerticalScroll")));
 
 WRAPPED_INSTANTIATE_TEST_SUITE_P(

ui/file_manager/file_manager/background/js/test_util.js

@@ -492,5 +492,17 @@ test.util.sync.overrideFormat = contentWindow => {
       (volumeId, filesystem, volumeLabel) => {};
 };
 
+/**
+ * Run a contentWindow.requestAnimationFrame() cycle and resolve the callback
+ * when that requestAnimationFrame completes.
+ * @param {Window} contentWindow Window to be tested.
+ * @param {function(boolean)} callback Completion callback.
+ */
+test.util.async.requestAnimationFrame = (contentWindow, callback) => {
+  contentWindow.requestAnimationFrame(() => {
+    callback(true);
+  });
+};
+
 // Register the test utils.
 test.util.registerRemoteTestUtils();

ui/file_manager/integration_tests/file_manager/directory_tree.js

@@ -9,7 +9,7 @@
    */
   testcase.directoryTreeVerticalScroll = async () => {
     // Add directory entries to overflow the directory tree container.
-    let folders = [ENTRIES.photos];
+    const folders = [ENTRIES.photos];
     for (let i = 0; i < 30; i++) {
       folders.push(new TestEntryInfo({
         type: EntryType.DIRECTORY,
@@ -70,4 +70,73 @@
         appId, directoryTree, ['scrollLeft']);
     chrome.test.assertTrue(scrolled.scrollLeft === 0, 'Tree should not scroll');
   };
+
+  /**
+   * Tests that the directory tree does not horizontally scroll when using the
+   * keyboard right-arrow to navigate nested folders.
+   */
+  testcase.directoryTreeKeyboardHorizontalScroll = async () => {
+    /**
+     * Helper to create a test folder from a full |path|.
+     * @param {string} path The folder path.
+     * @return {TestEntryInfo}
+     */
+    function createTestFolder(path) {
+      const name = path.split('/').pop();
+      return new TestEntryInfo({
+        targetPath: path,
+        nameText: name,
+        type: EntryType.DIRECTORY,
+        lastModifiedTime: 'Jan 1, 1980, 11:59 PM',
+        sizeText: '--',
+        typeText: 'Folder',
+      });
+    }
+
+    // Build an array of nested folder test entries.
+    const nestedFolderTestEntries = [];
+    for (let path = 'nested-folder0', i = 0; i < 8; ++i) {
+      nestedFolderTestEntries.push(createTestFolder(path));
+      path += `/nested-folder${i + 1}`;
+    }
+
+    // Open FilesApp on Downloads containing the test entries.
+    const appId = await setupAndWaitUntilReady(
+        RootPath.DOWNLOADS, nestedFolderTestEntries, []);
+
+    // Verify the directory tree is not horizontally scrolled.
+    const directoryTree = '#directory-tree';
+    const original = await remoteCall.waitForElementStyles(
+        appId, directoryTree, ['scrollLeft']);
+    chrome.test.assertTrue(original.scrollLeft === 0);
+
+    // Shrink the tree to 150px, enough to elide the deep folder names.
+    const navigationList = '.dialog-navigation-list';
+    await remoteCall.callRemoteTestUtil(
+        'setElementStyles', appId, [navigationList, {width: '150px'}]);
+
+    // Select Downloads folder.
+    chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
+        'selectFolderInTree', appId, ['Downloads']));
+
+    // Keyboard expand Downloads > nested-folder0 > nested-folder1 > ...
+    for (let i = 0; i < nestedFolderTestEntries.length; ++i) {
+      chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
+          'expandSelectedFolderInTree', appId, []));
+      chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
+          'expandSelectedFolderInTree', appId, []));
+      chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
+          'requestAnimationFrame', appId, []));
+    }
+
+    // Wait until the directory tree has selected the last folder.
+    await remoteCall.waitForElement(
+        appId, '.tree-item[selected][entry-label="nested-folder7"]');
+
+    // Check: the directory tree should not be horizontally scrolled.
+    const scrolled = await remoteCall.waitForElementStyles(
+        appId, directoryTree, ['scrollLeft']);
+    const noScrollLeft = scrolled.scrollLeft === 0;
+    chrome.test.assertTrue(noScrollLeft, 'Tree should not scroll left');
+  };
 })();