[FilesApp] Add a navigation list vertical scroll integration test

Add navigationListVerticalScroll test.
Rename navigationScrollsWhenClipped to navigationListHorizontalScroll.
Add TODO to cleanup navigationListHorizontalScroll.

Test: browser_tests --gtest_filter="FilesApp*navigationList*Scroll"
Bug: 966807
Change-Id: Ia1a3eade2b9fbbe1341db2333ee4939dc13eb8a9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1726871
Commit-Queue: Brendan Hansknecht <bhansknecht@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#683637}

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -1064,7 +1064,8 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
 WRAPPED_INSTANTIATE_TEST_SUITE_P(
     NavigationList, /* navigation_list.js */
     FilesAppBrowserTest,
-    ::testing::Values(TestCase("navigationScrollsWhenClipped")));
+    ::testing::Values(TestCase("navigationListHorizontalScroll"),
+                      TestCase("navigationListVerticalScroll")));
 
 WRAPPED_INSTANTIATE_TEST_SUITE_P(
     Search, /* search.js */

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

@@ -62,6 +62,7 @@ function extractElementInfo(element, contentWindow, opt_styleNames) {
 
   // Get the scroll position of the element.
   result.scrollLeft = element.scrollLeft;
+  result.scrollTop = element.scrollTop;
 
   return result;
 }
@@ -312,7 +313,6 @@ test.util.sync.inputText = (contentWindow, query, text) => {
 
 /**
  * Sets the left scroll position of an element.
- * Used to enable testing of horizontal scrolled areas.
  * @param {Window} contentWindow Window to be tested.
  * @param {string} query Query for the test element.
  * @param {number} position scrollLeft position to set.
@@ -322,6 +322,17 @@ test.util.sync.setScrollLeft = (contentWindow, query, position) => {
   scrollablElement.scrollLeft = position;
 };
 
+/**
+ * Sets the top scroll position of an element.
+ * @param {Window} contentWindow Window to be tested.
+ * @param {string} query Query for the test element.
+ * @param {number} position scrollTop position to set.
+ */
+test.util.sync.setScrollTop = (contentWindow, query, position) => {
+  const scrollablElement = contentWindow.document.querySelector(query);
+  scrollablElement.scrollTop = position;
+};
+
 /**
  * Sets style properties for an element using the CSS OM.
  * @param {Window} contentWindow Window to be tested.

ui/file_manager/integration_tests/file_manager/navigation_list.js

@@ -4,44 +4,83 @@
 
 'use strict';
 (() => {
+  /**
+   * Tests that the directory tree area can be vertically scrolled.
+   */
+  testcase.navigationListVerticalScroll = async () => {
+    // Add directory entries to overflow the navigation list container.
+    let folders = [ENTRIES.photos];
+    for (let i = 0; i < 30; i++) {
+      folders.push(new TestEntryInfo({
+        type: EntryType.DIRECTORY,
+        targetPath: '' + i,
+        lastModifiedTime: 'Jan 1, 1980, 11:59 PM',
+        nameText: '' + i,
+        sizeText: '--',
+        typeText: 'Folder'
+      }));
+    }
+
+    // Open FilesApp on Downloads. Expand the navigation list view of Downloads.
+    const appId = await setupAndWaitUntilReady(RootPath.DOWNLOADS, folders, []);
+    await expandRoot(appId, TREEITEM_DOWNLOADS);
+
+    // Get the navigationList and verify it is not scrolled.
+    const navigationList = '.dialog-navigation-list';
+    const originalList = await remoteCall.waitForElementStyles(
+        appId, navigationList, ['scrollTop']);
+    chrome.test.assertTrue(originalList.scrollTop === 0);
+
+    // Scroll the navigation list down (vertical scroll).
+    await remoteCall.callRemoteTestUtil(
+        'setScrollTop', appId, [navigationList, 100]);
+
+    // Check: the navigation list should be scrolled.
+    const newList = await remoteCall.waitForElementStyles(
+        appId, navigationList, ['scrollTop']);
+    chrome.test.assertTrue(newList.scrollTop > 0);
+  };
+
   /**
    * Tests that the directory tree area can be horizontally scrolled.
-   * TODO(crbug.com/966807) add a vertical scroll case.
+   * TODO(crbug.com/966807): Clean up test case to match the comment style and
+   * organization of navigationListVerticalScroll.
+   * Remove unnecessary check that originalWidth > 0.
    */
-  testcase.navigationScrollsWhenClipped = async () => {
-    // Open FilesApp with the Downloads folder visible.
+  testcase.navigationListHorizontalScroll = async () => {
+    // Open FilesApp on Downloads. Expand the navigation list view of Downloads.
     const appId = await setupAndWaitUntilReady(
         RootPath.DOWNLOADS, BASIC_LOCAL_ENTRY_SET, []);
     await expandRoot(appId, TREEITEM_DOWNLOADS);
 
     // Get the navigationList width property and make sure it has non-zero size.
     const navigationList = '.dialog-navigation-list';
-    let list =
+    const originalList =
         await remoteCall.waitForElementStyles(appId, navigationList, ['width']);
-    const originalWidth = Number(list.styles['width'].match(/[0-9]*/));
+    const originalWidth = Number(originalList.styles['width'].match(/[0-9]*/));
     chrome.test.assertTrue(originalWidth > 0);
 
-    // Shrink the navigation list tree area to 100px.
+    // Shrink the navigation list tree area to 50px.
     await remoteCall.callRemoteTestUtil(
         'setElementStyles', appId, [navigationList, {width: '50px'}]);
 
     // Check the navigation list area is scrolled completely to the left side.
-    chrome.test.assertTrue(list.scrollLeft == 0);
+    chrome.test.assertTrue(originalList.scrollLeft === 0);
 
-    // Attempt to scroll the navigation list area to the right.
+    // Scroll the navigation list down (horizontal scroll).
     await remoteCall.callRemoteTestUtil(
         'setScrollLeft', appId, [navigationList, 100]);
 
     // Get the current state of the NavigationWidth width and left scroll
     // offset.
-    list =
+    const newList =
         await remoteCall.waitForElementStyles(appId, navigationList, ['width']);
 
     // Check that the width has been reduced.
-    const newWidth = Number(list.styles['width'].match(/[0-9]*/));
+    const newWidth = Number(newList.styles['width'].match(/[0-9]*/));
     chrome.test.assertTrue(newWidth < originalWidth);
 
-    // Check the navigation list area has scrolled.
-    chrome.test.assertTrue(list.scrollLeft > 0);
+    // Check: the navigation list should be scrolled.
+    chrome.test.assertTrue(newList.scrollLeft > 0);
   };
 })();