PDFViewerUpdate: Add some basic tests for the new toolbar

Adding tests for zoom, fit, and rotate buttons.

Also fixing a small bug, where forceFit() was setting the icon to the
opposite of the desired type in the new toolbar (reproduce by opening
a PDF with #view=fit appended to the URL, with the new and old UI).

Bug: 1101146
Change-Id: I86b1e0b7cdb1e5a04cb10552c904e0d58cd6f20f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2310898
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#790977}

chrome/browser/pdf/pdf_extension_test.cc

@@ -809,6 +809,12 @@ IN_PROC_BROWSER_TEST_F(PDFExtensionJSTest, DownloadControls) {
   RunTestsInJsModule("download_controls_test.js", "test.pdf");
 }
 
+IN_PROC_BROWSER_TEST_F(PDFExtensionJSTest, ViewerPdfToolbarNew) {
+  // Although this test file does not require a PDF to be loaded, loading the
+  // elements without loading a PDF is difficult.
+  RunTestsInJsModule("viewer_pdf_toolbar_new_test.js", "test.pdf");
+}
+
 IN_PROC_BROWSER_TEST_F(PDFExtensionJSTest, ToolbarManager) {
   RunTestsInJsModule("toolbar_manager_test.js", "test.pdf");
 }

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.js

@@ -163,7 +163,11 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
 
   /** @param {!FittingType} fittingType */
   forceFit(fittingType) {
-    this.fittingType_ = fittingType;
+    // The fitting type is the new state. We want to set the button fitting type
+    // to the opposite value.
+    this.fittingType_ = fittingType === FittingType.FIT_TO_WIDTH ?
+        FittingType.FIT_TO_PAGE :
+        FittingType.FIT_TO_WIDTH;
   }
 
   fitToggle() {

chrome/test/data/pdf/BUILD.gn

@@ -36,6 +36,8 @@ js_type_check("closure_compile") {
 
     #":toolbar_manager_test",
     #":touch_handling_test",
+    ":viewer_pdf_toolbar_new_test",
+
     #":viewport_test",
     ":whitespace_title_test",
 
@@ -108,6 +110,14 @@ js_library("title_test") {
   externs_list = [ "$externs_path/test.js" ]
 }
 
+js_library("viewer_pdf_toolbar_new_test") {
+  deps = [
+    "//chrome/browser/resources/pdf:constants",
+    "//chrome/browser/resources/pdf/elements:viewer-pdf-toolbar-new",
+  ]
+  externs_list = [ "$externs_path/test.js" ]
+}
+
 js_library("whitespace_title_test") {
   externs_list = [ "$externs_path/test.js" ]
 }

chrome/test/data/pdf/viewer_pdf_toolbar_new_test.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {FittingType} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/constants.js';
+import {ViewerPdfToolbarNewElement} from 'chrome-extension://mhjfbmdgcfjbbpaeojofohoefgiehjai/elements/viewer-pdf-toolbar-new.js';
+
+/** @return {!ViewerPdfToolbarNewElement} */
+function createToolbar() {
+  document.body.innerHTML = '';
+  const toolbar = /** @type {!ViewerPdfToolbarNewElement} */ (
+      document.createElement('viewer-pdf-toolbar-new'));
+  document.body.appendChild(toolbar);
+  return toolbar;
+}
+
+/**
+ * Returns the cr-icon-buttons in |toolbar|'s shadowRoot under |parentId|.
+ * @param {!ViewerPdfToolbarNewElement} toolbar
+ * @param {string} parentId
+ * @return {!NodeList<!CrIconButtonElement>}
+ */
+function getCrIconButtons(toolbar, parentId) {
+  return /** @type {!NodeList<!CrIconButtonElement>} */ (
+      toolbar.shadowRoot.querySelectorAll(`#${parentId} cr-icon-button`));
+}
+
+// Unit tests for the viewer-pdf-toolbar-new element.
+const tests = [
+  /**
+   * Test that the toolbar toggles between showing the fit-to-page and
+   * fit-to-width buttons.
+   */
+  function testFitButton() {
+    const toolbar = createToolbar();
+    const fitButton = getCrIconButtons(toolbar, 'center')[2];
+    const fitWidthIcon = 'pdf:fit-to-width';
+    const fitHeightIcon = 'pdf:fit-to-height';
+
+    let lastFitType = '';
+    let numEvents = 0;
+    toolbar.addEventListener('fit-to-changed', e => {
+      lastFitType = e.detail;
+      numEvents++;
+    });
+
+    // Initially FIT_TO_WIDTH, show FIT_TO_PAGE.
+    chrome.test.assertEq(fitHeightIcon, fitButton.ironIcon);
+
+    // Tap 1: Fire fit-to-changed(FIT_TO_PAGE), show fit-to-width.
+    fitButton.click();
+    chrome.test.assertEq(FittingType.FIT_TO_PAGE, lastFitType);
+    chrome.test.assertEq(1, numEvents);
+    chrome.test.assertEq(fitWidthIcon, fitButton.ironIcon);
+
+    // Tap 2: Fire fit-to-changed(FIT_TO_WIDTH), show fit-to-page.
+    fitButton.click();
+    chrome.test.assertEq(FittingType.FIT_TO_WIDTH, lastFitType);
+    chrome.test.assertEq(2, numEvents);
+    chrome.test.assertEq(fitHeightIcon, fitButton.ironIcon);
+
+    // Do the same as above, but with fitToggle().
+    toolbar.fitToggle();
+    chrome.test.assertEq(FittingType.FIT_TO_PAGE, lastFitType);
+    chrome.test.assertEq(3, numEvents);
+    chrome.test.assertEq(fitWidthIcon, fitButton.ironIcon);
+    toolbar.fitToggle();
+    chrome.test.assertEq(FittingType.FIT_TO_WIDTH, lastFitType);
+    chrome.test.assertEq(4, numEvents);
+    chrome.test.assertEq(fitHeightIcon, fitButton.ironIcon);
+
+    // Test forceFit(FIT_TO_PAGE): Updates the icon, does not fire an event.
+    toolbar.forceFit(FittingType.FIT_TO_PAGE);
+    chrome.test.assertEq(4, numEvents);
+    chrome.test.assertEq(fitWidthIcon, fitButton.ironIcon);
+
+    // Force fitting the same fit as the existing fit should do nothing.
+    toolbar.forceFit(FittingType.FIT_TO_PAGE);
+    chrome.test.assertEq(4, numEvents);
+    chrome.test.assertEq(fitWidthIcon, fitButton.ironIcon);
+
+    // Force fit width.
+    toolbar.forceFit(FittingType.FIT_TO_WIDTH);
+    chrome.test.assertEq(4, numEvents);
+    chrome.test.assertEq(fitHeightIcon, fitButton.ironIcon);
+
+    // Force fit height.
+    toolbar.forceFit(FittingType.FIT_TO_HEIGHT);
+    chrome.test.assertEq(4, numEvents);
+    chrome.test.assertEq(fitWidthIcon, fitButton.ironIcon);
+
+    chrome.test.succeed();
+  },
+
+  function testZoomButtons() {
+    const toolbar = createToolbar();
+
+    let zoomInCount = 0;
+    let zoomOutCount = 0;
+    toolbar.addEventListener('zoom-in', () => zoomInCount++);
+    toolbar.addEventListener('zoom-out', () => zoomOutCount++);
+
+    const zoomButtons = getCrIconButtons(toolbar, 'zoom-controls');
+
+    // Zoom out
+    chrome.test.assertEq('pdf:remove', zoomButtons[0].ironIcon);
+    zoomButtons[0].click();
+    chrome.test.assertEq(0, zoomInCount);
+    chrome.test.assertEq(1, zoomOutCount);
+
+    // Zoom in
+    chrome.test.assertEq('pdf:add', zoomButtons[1].ironIcon);
+    zoomButtons[1].click();
+    chrome.test.assertEq(1, zoomInCount);
+    chrome.test.assertEq(1, zoomOutCount);
+
+    chrome.test.succeed();
+  },
+
+  function testRotateButton() {
+    const toolbar = createToolbar();
+    const rotateButton = getCrIconButtons(toolbar, 'center')[3];
+    chrome.test.assertEq('pdf:rotate-left', rotateButton.ironIcon);
+
+    toolbar.addEventListener('rotate-left', e => chrome.test.succeed());
+    rotateButton.click();
+  },
+];
+
+chrome.test.runTests(tests);