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

Specifically:
  - cr_profile_avatar_selector_tests.js
  - cr_radio_button_test.js
  - cr_radio_group_test.js
  - cr_scrollable_behavior_tests.js

Bug: 1000989
Change-Id: Ie4dae518c872a9222eccac3f12d63f8f202edae3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2220707
Commit-Queue: dpapad <dpapad@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#773465}

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

@@ -73,11 +73,11 @@ js_type_check("closure_compile") {
     ":cr_policy_indicator_tests.m",
     ":cr_policy_pref_indicator_tests.m",
     ":cr_policy_strings",
+    ":cr_profile_avatar_selector_tests.m",
+    ":cr_radio_button_test.m",
+    ":cr_radio_group_test.m",
+    ":cr_scrollable_behavior_tests.m",
 
-    #":cr_profile_avatar_selector_tests",
-    #":cr_radio_button_test",
-    #":cr_radio_group_test",
-    #":cr_scrollable_behavior_tests",
     #":cr_search_field_tests",
     #":cr_slider_test",
     #":cr_splitter_test",
@@ -322,3 +322,55 @@ js_library("cr_policy_pref_indicator_tests.m") {
 
 js_library("cr_policy_strings") {
 }
+
+js_library("cr_profile_avatar_selector_tests.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_profile_avatar_selector_tests.m.js" ]
+  deps = [
+    "..:chai_assert",
+    "//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/cr_elements/cr_profile_avatar_selector:cr_profile_avatar_selector.m",
+    "//ui/webui/resources/js:util.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_radio_button_test.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_radio_button_test.m.js" ]
+  deps = [
+    "..:chai_assert",
+    "//ui/webui/resources/cr_elements/cr_radio_button:cr_radio_button.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_radio_group_test.m") {
+  sources = [
+    "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_radio_group_test.m.js",
+  ]
+  deps = [
+    "..:chai_assert",
+    "..:test_util.m",
+    "//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/cr_elements/cr_radio_button:cr_radio_button.m",
+    "//ui/webui/resources/cr_elements/cr_radio_group:cr_radio_group.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_scrollable_behavior_tests.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_scrollable_behavior_tests.m.js" ]
+  deps = [
+    "..:chai_assert",
+    "..:test_util.m",
+    "//third_party/polymer/v3_0/components-chromium/iron-list:iron-list",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements:cr_scrollable_behavior.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}

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

@@ -7,6 +7,7 @@
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 // #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
+// #import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 /** @fileoverview Suite of tests for cr-profile-avatar-selector. */
@@ -14,9 +15,10 @@ suite('cr-profile-avatar-selector', function() {
   /** @type {CrProfileAvatarSelectorElement} */
   let avatarSelector = null;
 
-  /** @return {CrProfileAvatarSelectorElement} */
+  /** @return {!CrProfileAvatarSelectorElement} */
   function createElement() {
-    const avatarSelector = document.createElement('cr-profile-avatar-selector');
+    const avatarSelector = /** @type {!CrProfileAvatarSelectorElement} */ (
+        document.createElement('cr-profile-avatar-selector'));
     avatarSelector.avatars = [
       {url: 'chrome://avatar1.png', label: 'avatar1'},
       {url: 'chrome://avatar2.png', label: 'avatar2'},
@@ -25,8 +27,9 @@ suite('cr-profile-avatar-selector', function() {
     return avatarSelector;
   }
 
+  /** @return {!NodeList<!Element>} */
   function getGridItems() {
-    return avatarSelector.$['avatar-grid'].querySelectorAll('.avatar');
+    return avatarSelector.shadowRoot.querySelectorAll('.avatar');
   }
 
   setup(function() {

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

@@ -4,18 +4,18 @@
 
 // clang-format off
 // #import 'chrome://resources/cr_elements/cr_radio_button/cr_radio_button.m.js';
+// #import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-radio-button', function() {
+  /** @type {!CrRadioButtonElement} */
   let radioButton;
 
   setup(function() {
-    PolymerTest.clearBody();
-    document.body.innerHTML = `
-      <cr-radio-button>label</cr-radio-button>
-    `;
-
-    radioButton = document.querySelector('cr-radio-button');
+    document.body.innerHTML = '';
+    radioButton = /** @type {!CrRadioButtonElement} */ (
+        document.createElement('cr-radio-button'));
+    document.body.appendChild(radioButton);
   });
 
   function assertChecked() {

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

@@ -9,9 +9,11 @@
 // #import {eventToPromise} from '../test_util.m.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {pressAndReleaseKeyOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
+// #import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-radio-group', () => {
+  /** @type {!CrRadioGroupElement} */
   let radioGroup;
 
   /** @override */
@@ -28,7 +30,8 @@ suite('cr-radio-group', () => {
           <cr-radio-button name="2"><input></input></cr-radio-button>
           <cr-radio-button name="3"><a></a></cr-radio-button>
         </cr-radio-group>`;
-    radioGroup = document.body.querySelector('cr-radio-group');
+    radioGroup = /** @type {!CrRadioGroupElement} */ (
+        document.body.querySelector('cr-radio-group'));
     Polymer.dom.flush();
   });
 
@@ -70,17 +73,18 @@ suite('cr-radio-group', () => {
 
   /**
    * @param {string} key
-   * @param {Element=} target
+   * @param {!Element=} target
    */
   function press(key, target) {
-    target = target || radioGroup.querySelector('[name="1"]');
+    target = target || /** @type {!CrRadioButtonElement} */
+        (radioGroup.querySelector('[name="1"]'));
     MockInteractions.pressAndReleaseKeyOn(target, -1, [], key);
   }
 
   /**
    * @param {!Array<string>} keys
    * @param {string} initialSelection
-   * @param {string} selections
+   * @param {string} expectedSelected
    */
   function checkPressed(keys, initialSelection, expectedSelected) {
     keys.forEach((key, i) => {
@@ -160,8 +164,7 @@ suite('cr-radio-group', () => {
   });
 
   test('disabled makes radios not focusable', () => {
-    // Explicitly use 1 instead of '1' to check that type coercion works.
-    radioGroup.selected = 1;
+    radioGroup.selected = '1';
     checkSelected('1');
     radioGroup.disabled = true;
     checkNoneFocusable();
@@ -239,7 +242,8 @@ suite('cr-radio-group', () => {
   });
 
   test('radios with input', () => {
-    const input = radioGroup.querySelector('input');
+    const input =
+        /** @type {!HTMLInputElement} */ (radioGroup.querySelector('input'));
     assertTrue(!!input);
     verifyNoneSelectedOneFocusable('1');
     press('Enter', input);
@@ -257,9 +261,13 @@ suite('cr-radio-group', () => {
 
   test('select the radio that has focus when space or enter pressed', () => {
     verifyNoneSelectedOneFocusable('1');
-    press('Enter', radioGroup.querySelector('[name="3"]'));
+    press(
+        'Enter', /** @type {!CrRadioButtonElement} */
+        (radioGroup.querySelector('[name="3"]')));
     checkSelected('3');
-    press(' ', radioGroup.querySelector('[name="2"]'));
+    press(
+        ' ', /** @type {!CrRadioButtonElement} */
+        (radioGroup.querySelector('[name="2"]')));
     checkSelected('2');
   });
 });

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

@@ -6,12 +6,13 @@
 // #import {CrScrollableBehavior} from 'chrome://resources/cr_elements/cr_scrollable_behavior.m.js';
 // #import {Polymer, Base, flush, html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import {waitBeforeNextRender} from '../test_util.m.js';
+// #import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-scrollable-behavior', function() {
-  /** @type {CrScrollableListElement} */ let testElement;
-  /** @type {HTMLDivElement} */ let container;
-  /** @type {IronListElement} */ let ironList;
+  /** @type {!TestElementElement} */ let testElement;
+  /** @type {!HTMLDivElement} */ let container;
+  /** @type {!IronListElement} */ let ironList;
 
   suiteSetup(function() {
     if (window.location.origin === 'chrome://test') {
@@ -86,17 +87,18 @@ suite('cr-scrollable-behavior', function() {
   });
 
   setup(function(done) {
-    PolymerTest.clearBody();
+    document.body.innerHTML = '';
 
-    testElement = document.createElement('test-element');
+    testElement = /** @type {!TestElementElement} */ (
+        document.createElement('test-element'));
     document.body.appendChild(testElement);
-    container = testElement.$$('#container');
-    ironList = testElement.$$('iron-list');
+    container = /** @type {!HTMLDivElement} */ (testElement.$$('#container'));
+    ironList = /** @type {!IronListElement} */ (testElement.$$('iron-list'));
 
     // Wait for CrScrollableBehavior to set the initial scrollable class
     // properties.
     window.requestAnimationFrame(() => {
-      test_util.waitBeforeNextRender().then(done);
+      test_util.waitBeforeNextRender(testElement).then(done);
     });
   });