Add tests for PDF thumbnails keyboard navigation

Specifically, test that:
- Focus is forwarded to the thumbnail of the active page when focusing
  on the thumbnail bar.
- Pressing the up/down arrows focuses on the correct thumbnails.
- Pressing the left/right arrows changes the page.

Bug: 1133840
Change-Id: Id689db821cff3c33e9d3ecee103532c5a3ee4b95
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2485564
Commit-Queue: Daniel Hosseinian <dhoss@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819467}

chrome/browser/resources/pdf/elements/viewer-thumbnail-bar.js

@@ -84,7 +84,7 @@ export class ViewerThumbnailBarElement extends PolymerElement {
    */
   activePageChanged_() {
     if (this.shadowRoot.activeElement) {
-      this.getThumbnailForPage_(this.activePage).focusAndScroll();
+      this.getThumbnailForPage(this.activePage).focusAndScroll();
     }
   }
 
@@ -97,7 +97,16 @@ export class ViewerThumbnailBarElement extends PolymerElement {
       return;
     }
 
-    this.getThumbnailForPage_(pageNumber).getClickTarget().click();
+    this.getThumbnailForPage(pageNumber).getClickTarget().click();
+  }
+
+  /**
+   * @param {number} pageNumber
+   * @return {?ViewerThumbnailElement}
+   */
+  getThumbnailForPage(pageNumber) {
+    return /** @type {ViewerThumbnailElement} */ (this.shadowRoot.querySelector(
+        `viewer-thumbnail:nth-child(${pageNumber})`));
   }
 
   /**
@@ -117,16 +126,6 @@ export class ViewerThumbnailBarElement extends PolymerElement {
     return loadTimeData.getStringF('thumbnailPageAriaLabel', pageNumber);
   }
 
-  /**
-   * @param {number} pageNumber
-   * @return {ViewerThumbnailElement}
-   * @private
-   */
-  getThumbnailForPage_(pageNumber) {
-    return /** @type {ViewerThumbnailElement} */ (this.shadowRoot.querySelector(
-        `viewer-thumbnail:nth-child(${pageNumber})`));
-  }
-
   /**
    * @param {number} page
    * @return {boolean} Whether the page is the current page.

chrome/test/data/pdf/BUILD.gn

@@ -193,9 +193,13 @@ js_library("viewer_pdf_toolbar_new_test") {
 
 js_library("viewer_thumbnail_bar_test") {
   deps = [
+    ":test_util",
+    "../webui:test_util.m",
     "//chrome/browser/resources/pdf/elements:viewer-thumbnail",
     "//chrome/browser/resources/pdf/elements:viewer-thumbnail-bar",
+    "//third_party/polymer/v3_0/components-chromium/iron-test-helpers:mock-interactions",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js/cr/ui:focus_outline_manager.m",
   ]
   externs_list = [ "$externs_path/test.js" ]
 }

chrome/test/data/pdf/viewer_thumbnail_bar_test.js

@@ -5,6 +5,8 @@
 import {eventToPromise} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/_test_resources/webui/test_util.m.js';
 import {ViewerThumbnailBarElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-thumbnail-bar.js';
 import {ViewerThumbnailElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-thumbnail.js';
+import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.m.js';
+import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {testAsync} from './test_util.js';
@@ -30,6 +32,14 @@ function getTestThumbnailBarHeight() {
   return thumbnailBarHeight;
 }
 
+/**
+ * @param {!HTMLElement} element
+ * @param {string} key
+ */
+function keydown(element, key) {
+  keyDownOn(element, 0, [], key);
+}
+
 // Unit tests for the viewer-thumbnail-bar element.
 const tests = [
   // Test that the thumbnail bar has the correct number of thumbnails and
@@ -55,7 +65,7 @@ const tests = [
        */
       function testNavigateThumbnail(thumbnail, expectedPageIndex) {
         const whenChanged = eventToPromise('change-page', thumbnailBar);
-        thumbnail.shadowRoot.querySelector('#thumbnail').click();
+        thumbnail.getClickTarget().click();
         return whenChanged.then(e => {
           chrome.test.assertEq(expectedPageIndex, e.detail.page);
           chrome.test.assertEq('thumbnail', e.detail.origin);
@@ -156,6 +166,129 @@ const tests = [
       }
     });
   },
+  function testThumbnailForwardFocus() {
+    const testDocLength = 10;
+    const thumbnailBar = createThumbnailBar();
+    thumbnailBar.docLength = testDocLength;
+
+    flush();
+
+    testAsync(async () => {
+      /**
+       * @param {number} pageNumber
+       * @return {!Promise}
+       */
+      function waitForwardFocus(pageNumber) {
+        // Reset focus.
+        thumbnailBar.blur();
+
+        const toThumbnail = /** @type {!ViewerThumbnailElement} */ (
+            thumbnailBar.getThumbnailForPage(pageNumber));
+        const whenActiveThumbnailFocused = eventToPromise('focus', toThumbnail);
+
+        // Calling focus() on `thumbnailBar` in this test doesn't trigger the
+        // event listener, but manually dispatching an event does.
+        thumbnailBar.dispatchEvent(new FocusEvent('focus'));
+        return whenActiveThumbnailFocused;
+      }
+
+      // When there's no active page, focus should forward to the first
+      // thumbnail.
+      await waitForwardFocus(1);
+
+      // When there's an active page, focus should forward to the thumbnail of
+      // the active page.
+      let activePage = 3;
+      thumbnailBar.activePage = activePage;
+      await waitForwardFocus(activePage);
+
+      activePage = 10;
+      thumbnailBar.activePage = activePage;
+      await waitForwardFocus(activePage);
+    });
+  },
+  function testThumbnailUpDownFocus() {
+    const testDocLength = 3;
+    const thumbnailBar = createThumbnailBar();
+    thumbnailBar.docLength = testDocLength;
+
+    flush();
+
+    testAsync(async () => {
+      /**
+       * @param {!ViewerThumbnailElement} fromThumbnail
+       * @param {boolean} up
+       */
+      async function pressUpDownArrow(fromThumbnail, up) {
+        const fromPageNumber = fromThumbnail.pageNumber;
+        const toPageNumber = up ? fromPageNumber - 1 : fromPageNumber + 1;
+        const toThumbnail = /** @type {!ViewerThumbnailElement} */ (
+            thumbnailBar.getThumbnailForPage(toPageNumber));
+
+        const whenToThumbnailFocused = eventToPromise('focus', toThumbnail);
+        keydown(fromThumbnail, up ? 'ArrowUp' : 'ArrowDown');
+        await whenToThumbnailFocused;
+      }
+
+      const thumbnails =
+          /** @type {!NodeList<!ViewerThumbnailElement>} */ (
+              thumbnailBar.shadowRoot.querySelectorAll('viewer-thumbnail'));
+
+      // Start focus on the second of three thumbnails.
+      // Simulate this focus by mouse so `ViewerThumbnailElement.onFocus_()`
+      // doesn't forward the focus.
+      FocusOutlineManager.forDocument(document).visible = false;
+      let focusedIndex = 1;
+      thumbnails[focusedIndex].focus();
+
+      await pressUpDownArrow(thumbnails[focusedIndex], /*up=*/ true);
+      focusedIndex -= 1;
+      chrome.test.assertEq(
+          thumbnails[focusedIndex], thumbnailBar.shadowRoot.activeElement);
+
+      await pressUpDownArrow(thumbnails[focusedIndex], /*up=*/ false);
+      focusedIndex += 1;
+      chrome.test.assertEq(
+          thumbnails[focusedIndex], thumbnailBar.shadowRoot.activeElement);
+
+      await pressUpDownArrow(thumbnails[focusedIndex], /*up=*/ false);
+      focusedIndex += 1;
+      chrome.test.assertEq(
+          thumbnails[focusedIndex], thumbnailBar.shadowRoot.activeElement);
+
+      await pressUpDownArrow(thumbnails[focusedIndex], /*up=*/ true);
+      focusedIndex -= 1;
+      chrome.test.assertEq(
+          thumbnails[focusedIndex], thumbnailBar.shadowRoot.activeElement);
+    });
+  },
+  function testThumbnailLeftRightSelect() {
+    const testDocLength = 2;
+    const thumbnailBar = createThumbnailBar();
+    thumbnailBar.docLength = testDocLength;
+
+    flush();
+
+    thumbnailBar.activePage = 1;
+    let whenChanged = eventToPromise('change-page', thumbnailBar);
+    keydown(thumbnailBar, 'ArrowRight');
+    return whenChanged
+        .then(e => {
+          // The event contains the zero-based page index.
+          chrome.test.assertEq(1, e.detail.page);
+
+          thumbnailBar.activePage = 2;
+          whenChanged = eventToPromise('change-page', thumbnailBar);
+          keydown(thumbnailBar, 'ArrowLeft');
+          return whenChanged;
+        })
+        .then(e => {
+          // The event contains the zero-based page index.
+          chrome.test.assertEq(0, e.detail.page);
+
+          chrome.test.succeed();
+        });
+  }
 ];
 
 chrome.test.runTests(tests);