WebUI: Add JS type checking for more cr_elements/ tests, part 3.

Specifically:
 - cr_fingerprint_progress_arc_tests.js
 - cr_icon_button_focus_tests.js
 - cr_icon_button_tests.js

Bug: 1000989
Change-Id: I46baa47a8019b4434ea52e62a8bf89475fbdef08
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2217033
Auto-Submit: dpapad <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#772371}

chrome/test/data/webui/cr_elements/BUILD.gn

@@ -60,10 +60,10 @@ js_type_check("closure_compile") {
     ":cr_drawer_tests.m",
     ":cr_expand_button_focus_tests.m",
     ":cr_expand_button_tests.m",
+    ":cr_fingerprint_progress_arc_tests.m",
+    ":cr_icon_button_focus_tests.m",
+    ":cr_icon_button_tests.m",
 
-    #":cr_fingerprint_progress_arc_tests",
-    #":cr_icon_button_focus_tests",
-    #":cr_icon_button_tests",
     #":cr_input_test",
     #":cr_lazy_render_tests",
     #":cr_link_row_tests",
@@ -207,3 +207,37 @@ js_library("cr_expand_button_tests.m") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
   extra_deps = [ ":modulize" ]
 }
+
+js_library("cr_fingerprint_progress_arc_tests.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_fingerprint_progress_arc_tests.m.js" ]
+  deps = [
+    "..:chai_assert",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_fingerprint:cr_fingerprint_progress_arc.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_icon_button_focus_tests.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_icon_button_focus_tests.m.js" ]
+  deps = [
+    "..:chai_assert",
+    "..:test_util.m",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_icon_button_tests.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_icon_button_tests.m.js" ]
+  deps = [
+    "..:chai_assert",
+    "..:test_util.m",
+    "//third_party/polymer/v3_0/components-chromium/iron-test-helpers:mock-interactions",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}

chrome/test/data/webui/cr_elements/cr_fingerprint_progress_arc_tests.js

@@ -5,6 +5,7 @@
 // clang-format off
 // #import 'chrome://resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.m.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {assertEquals} from '../chai_assert.js';
 // clang-format on
 
 /** @fileoverview Suite of tests for cr-fingerprint-progress-arc. */
@@ -28,22 +29,25 @@ suite('cr_fingerprint_progress_arc_test', function() {
    */
   let Color;
 
-  /** @type {?SettingsFingerprintProgressArcElement} */
-  let progressArc = null;
+  /** @type {!CrFingerprintProgressArcElement} */
+  let progressArc;
 
-  /** @type {?HTMLCanvasElement} */
-  let canvas = null;
+  /** @type {!HTMLCanvasElement} */
+  let canvas;
 
-  /** @type {Color} */
+  /** @type {!Color} */
   const black = {r: 0, g: 0, b: 0};
-  /** @type {Color} */
+
+  /** @type {!Color} */
   const blue = {r: 0, g: 0, b: 255};
-  /** @type {Color} */
+
+  /** @type {!Color} */
   const white = {r: 255, g: 255, b: 255};
 
   setup(function() {
-    PolymerTest.clearBody();
-    progressArc = document.createElement('cr-fingerprint-progress-arc');
+    document.body.innerHTML = '';
+    progressArc = /** @type {!CrFingerprintProgressArcElement} */ (
+        document.createElement('cr-fingerprint-progress-arc'));
     document.body.appendChild(progressArc);
 
     // Override some parameters and function for testing purposes.
@@ -51,10 +55,9 @@ suite('cr_fingerprint_progress_arc_test', function() {
     canvas.width = 300;
     canvas.height = 150;
     progressArc.circleRadius = 50;
-    progressArc.canvasCircleStrokeWidth_ = 3;
-    progressArc.canvasCircleBackgroundColor_ = 'rgba(0,0,0,1.0)';
-    progressArc.canvasCircleProgressColor_ = 'rgba(0,0,255,1.0)';
-    progressArc.canvasCircleShadowColor_ = 'rgba(0,0,0,1.0)';
+    progressArc.canvasCircleStrokeWidth = 3;
+    progressArc.canvasCircleBackgroundColor = 'rgba(0,0,0,1.0)';
+    progressArc.canvasCircleProgressColor = 'rgba(0,0,255,1.0)';
     progressArc.clearCanvas = function() {
       const ctx = canvas.getContext('2d');
       ctx.fillStyle = 'rgba(255,255,255,1.0)';
@@ -67,7 +70,7 @@ suite('cr_fingerprint_progress_arc_test', function() {
   /**
    * Helper function which gets the rgb values at |point| on the canvas.
    * @param {Point} point
-   * @return {Color}
+   * @return {!Color}
    */
   function getRGBData(point) {
     const ctx = canvas.getContext('2d');
@@ -78,8 +81,8 @@ suite('cr_fingerprint_progress_arc_test', function() {
   /**
    * Helper function which checks if the given color is matches the expected
    * color.
-   * @param {Color} expectedColor
-   * @param {Color} actualColor
+   * @param {!Color} expectedColor
+   * @param {!Color} actualColor
    */
   function assertColorEquals(expectedColor, actualColor) {
     assertEquals(expectedColor.r, actualColor.r);
@@ -90,8 +93,8 @@ suite('cr_fingerprint_progress_arc_test', function() {
   /**
    * Helper function which checks that a list of points match the color the are
    * expected to have on the canvas.
-   * @param {Color} expectedColor
-   * @param {!Array<Point>} listOfPoints
+   * @param {!Color} expectedColor
+   * @param {!Array<!Point>} listOfPoints
    */
   function assertListOfColorsEqual(expectedColor, listOfPoints) {
     for (const point of listOfPoints) {
@@ -103,13 +106,11 @@ suite('cr_fingerprint_progress_arc_test', function() {
     // Verify that by drawing an arc from 0 to PI/2 with radius 50 and center at
     // (150, 75), points along that arc should be blue, and points not on that
     // arc should remain white.
-    progressArc.drawArc(0, Math.PI / 2, progressArc.canvasCircleProgressColor_);
-    /** @type {Array<Point>} */
+    progressArc.drawArc(0, Math.PI / 2, progressArc.canvasCircleProgressColor);
     let expectedPointsOnArc = [
       {x: 200, y: 75} /* 0rad */, {x: 185, y: 110} /* PI/4rad */,
       {x: 150, y: 125} /* PI/2rad */
     ];
-    /** @type {Array<Point>} */
     let expectedPointsNotOnArc =
         [{x: 115, y: 110} /* 3PI/4rad */, {x: 100, y: 75} /* PI */];
     assertListOfColorsEqual(blue, expectedPointsOnArc);
@@ -124,7 +125,7 @@ suite('cr_fingerprint_progress_arc_test', function() {
     // on that arc should remain white.
     progressArc.drawArc(
         3 * Math.PI / 2, 5 * Math.PI / 2,
-        progressArc.canvasCircleProgressColor_);
+        progressArc.canvasCircleProgressColor);
     expectedPointsOnArc = [
       {x: 150, y: 25} /* 3PI/2 */, {x: 185, y: 40} /* 7PI/4 */,
       {x: 200, y: 75} /* 2PI */, {x: 185, y: 110} /* 9PI/4 */,
@@ -143,12 +144,10 @@ suite('cr_fingerprint_progress_arc_test', function() {
     // points along that arc should be black, and points not on that arc should
     // remain white.
     progressArc.drawBackgroundCircle();
-    /** @type {Array<Point>} */
     const expectedPointsInCircle = [
       {x: 200, y: 75} /* 0rad */, {x: 150, y: 125} /* PI/2rad */,
       {x: 100, y: 75} /* PIrad */, {x: 150, y: 25} /* 3PI/2rad */
     ];
-    /** @type {Array<Point>} */
     const expectedPointsNotInCircle = [
       {x: 110, y: 75} /* Too left, outside of stroke */,
       {x: 90, y: 75} /* Too right, inside of stroke */,

chrome/test/data/webui/cr_elements/cr_icon_button_focus_tests.js

@@ -6,14 +6,17 @@
 // #import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 //
 // #import {flushTasks} from '../test_util.m.js';
+// #import {assertFalse, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-icon-button-focus-tests', function() {
+  /** @type {!CrIconButtonElement} */
   let button;
 
   setup(async () => {
-    PolymerTest.clearBody();
-    button = document.createElement('cr-icon-button');
+    document.body.innerHTML = '';
+    button = /** @type {!CrIconButtonElement} */ (
+        document.createElement('cr-icon-button'));
     document.body.appendChild(button);
     await test_util.flushTasks();
   });

chrome/test/data/webui/cr_elements/cr_icon_button_tests.js

@@ -8,9 +8,11 @@
 
 // #import {downAndUp, pressAndReleaseKeyOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 // #import {eventToPromise, flushTasks} from '../test_util.m.js';
+// #import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-icon-button', function() {
+  /** @type {!CrIconButtonElement} */
   let button;
 
   /** @override */
@@ -26,8 +28,9 @@ suite('cr-icon-button', function() {
   }
 
   setup(async () => {
-    PolymerTest.clearBody();
-    button = document.createElement('cr-icon-button');
+    document.body.innerHTML = '';
+    button = /** @type {!CrIconButtonElement} */ (
+        document.createElement('cr-icon-button'));
     document.body.appendChild(button);
     await test_util.flushTasks();
   });
@@ -129,7 +132,8 @@ suite('cr-icon-button', function() {
     document.body.innerHTML =
         '<cr-icon-button custom-tab-index="-1"></cr-icon-button>';
     await test_util.flushTasks();
-    button = document.body.querySelector('cr-icon-button');
+    button = /** @type {!CrIconButtonElement} */ (
+        document.body.querySelector('cr-icon-button'));
     assertEquals('-1', button.getAttribute('tabindex'));
     button.disabled = true;
     assertEquals('-1', button.getAttribute('tabindex'));
@@ -139,7 +143,8 @@ suite('cr-icon-button', function() {
 
   test('tabindex update', async () => {
     document.body.innerHTML = '<cr-icon-button></cr-icon-button>';
-    button = document.body.querySelector('cr-icon-button');
+    button = /** @type {!CrIconButtonElement} */ (
+        document.body.querySelector('cr-icon-button'));
     assertEquals('0', button.getAttribute('tabindex'));
     button.customTabIndex = 1;
     assertEquals('1', button.getAttribute('tabindex'));

ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js

@@ -103,12 +103,15 @@ Polymer({
 
   // Also put these values as member values so they can be overridden by tests
   // and the tests do not need to be changed every time the UI is.
-  /** @private {number} */
-  canvasCircleStrokeWidth_: CANVAS_CIRCLE_STROKE_WIDTH,
-  /** @private {string} */
-  canvasCircleBackgroundColor_: CANVAS_CIRCLE_BACKGROUND_COLOR,
-  /** @private {string} */
-  canvasCircleProgressColor_: CANVAS_CIRCLE_PROGRESS_COLOR,
+
+  /** @type {number} */
+  canvasCircleStrokeWidth: CANVAS_CIRCLE_STROKE_WIDTH,
+
+  /** @type {string} */
+  canvasCircleBackgroundColor: CANVAS_CIRCLE_BACKGROUND_COLOR,
+
+  /** @type {string} */
+  canvasCircleProgressColor: CANVAS_CIRCLE_PROGRESS_COLOR,
 
   /**
    * Animation ID for fingerprint scan progress bar.
@@ -145,7 +148,7 @@ Polymer({
 
     ctx.beginPath();
     ctx.arc(c.width / 2, c.height / 2, this.circleRadius, startAngle, endAngle);
-    ctx.lineWidth = this.canvasCircleStrokeWidth_;
+    ctx.lineWidth = this.canvasCircleStrokeWidth;
     ctx.strokeStyle = color;
     ctx.stroke();
   },
@@ -155,7 +158,7 @@ Polymer({
    * |circleRadius| and color |CANVAS_CIRCLE_BACKGROUND_COLOR|.
    */
   drawBackgroundCircle() {
-    this.drawArc(0, 2 * Math.PI, this.canvasCircleBackgroundColor_);
+    this.drawArc(0, 2 * Math.PI, this.canvasCircleBackgroundColor);
   },
 
   /**
@@ -203,11 +206,10 @@ Polymer({
       // |start| + |currentAngle| to 7 * Math.PI / 2 (start is 3 * Math.PI /
       // 2) otherwise the regular draw from |start| to |currentAngle| will
       // draw nothing which will cause a flicker for one frame.
-      this.drawArc(
-          start, start + currentAngle, this.canvasCircleProgressColor_);
+      this.drawArc(start, start + currentAngle, this.canvasCircleProgressColor);
       this.drawArc(
           start + currentAngle, currentAngle <= 0 ? 7 * Math.PI / 2 : start,
-          this.canvasCircleBackgroundColor_);
+          this.canvasCircleBackgroundColor);
       currentAngle += step;
     };