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

Specifically:
 - cr_checkbox_test.js
 - cr_container_shadow_test.js
 - cr_dialog_test.js

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

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

@@ -54,10 +54,10 @@ js_type_check("closure_compile") {
   deps = [
     ":cr_action_menu_test.m",
     ":cr_button_tests.m",
+    ":cr_checkbox_test.m",
+    ":cr_container_shadow_behavior_test.m",
+    ":cr_dialog_test.m",
 
-    #":cr_checkbox_test",
-    #":cr_container_shadow_behavior_test",
-    #":cr_dialog_test",
     #":cr_drawer_tests",
     #":cr_expand_button_focus_tests",
     #":cr_expand_button_tests",
@@ -129,3 +129,42 @@ js_library("cr_button_tests.m") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
   extra_deps = [ ":modulize" ]
 }
+
+js_library("cr_checkbox_test.m") {
+  sources = [
+    "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_checkbox_test.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_checkbox:cr_checkbox.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_container_shadow_behavior_test.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_container_shadow_behavior_test.m.js" ]
+  deps = [
+    "..:chai_assert",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements:cr_container_shadow_behavior.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_dialog_test.m") {
+  sources =
+      [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_dialog_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_dialog:cr_dialog.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}

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

@@ -6,13 +6,17 @@
 // #import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
 // #import {keyDownOn, keyUpOn, pressAndReleaseKeyOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 // #import {eventToPromise} from '../test_util.m.js';
+// #import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-checkbox', function() {
+  /** @type {!CrCheckboxElement} */
   let checkbox;
 
+  /** @type {!HTMLElement} */
+  let innerCheckbox;
+
   setup(function() {
-    PolymerTest.clearBody();
     document.body.innerHTML = `
       <cr-checkbox>
         <div>label
@@ -21,46 +25,48 @@ suite('cr-checkbox', function() {
       </cr-checkbox>
     `;
 
-    checkbox = document.querySelector('cr-checkbox');
+    checkbox = /** @type {!CrCheckboxElement} */ (
+        document.querySelector('cr-checkbox'));
+    innerCheckbox = /** @type {!HTMLElement} */ (checkbox.$$('#checkbox'));
     assertNotChecked();
   });
 
   function assertChecked() {
     assertTrue(checkbox.checked);
     assertTrue(checkbox.hasAttribute('checked'));
-    assertEquals('true', checkbox.$.checkbox.getAttribute('aria-checked'));
+    assertEquals('true', innerCheckbox.getAttribute('aria-checked'));
   }
 
   function assertNotChecked() {
     assertFalse(checkbox.checked);
     assertEquals(null, checkbox.getAttribute('checked'));
-    assertEquals('false', checkbox.$.checkbox.getAttribute('aria-checked'));
+    assertEquals('false', innerCheckbox.getAttribute('aria-checked'));
   }
 
   function assertDisabled() {
     assertTrue(checkbox.disabled);
     assertFalse(checkbox.hasAttribute('tabindex'));
-    assertEquals('-1', checkbox.$.checkbox.getAttribute('tabindex'));
+    assertEquals('-1', innerCheckbox.getAttribute('tabindex'));
     assertTrue(checkbox.hasAttribute('disabled'));
-    assertEquals('true', checkbox.$.checkbox.getAttribute('aria-disabled'));
+    assertEquals('true', innerCheckbox.getAttribute('aria-disabled'));
     assertEquals('none', getComputedStyle(checkbox).pointerEvents);
   }
 
   function assertNotDisabled() {
     assertFalse(checkbox.disabled);
     assertFalse(checkbox.hasAttribute('tabindex'));
-    assertEquals('0', checkbox.$.checkbox.getAttribute('tabindex'));
+    assertEquals('0', innerCheckbox.getAttribute('tabindex'));
     assertFalse(checkbox.hasAttribute('disabled'));
-    assertEquals('false', checkbox.$.checkbox.getAttribute('aria-disabled'));
+    assertEquals('false', innerCheckbox.getAttribute('aria-disabled'));
   }
 
   /**
    * @param {string} keyName The name of the key to trigger.
-   * @param {HTMLElement=} element
+   * @param {!HTMLElement=} element
    */
   function triggerKeyPressEvent(keyName, element) {
-    element = element || checkbox.$.checkbox;
-    MockInteractions.pressAndReleaseKeyOn(element, '', undefined, keyName);
+    MockInteractions.pressAndReleaseKeyOn(
+        element || innerCheckbox, 0, undefined, keyName);
   }
 
   // Test that the control is checked when the user taps on it (no movement
@@ -97,7 +103,7 @@ suite('cr-checkbox', function() {
 
   test('Toggle checkbox button click', async () => {
     let whenChanged = test_util.eventToPromise('change', checkbox);
-    checkbox.$.checkbox.click();
+    innerCheckbox.click();
     await whenChanged;
     assertChecked();
     whenChanged = test_util.eventToPromise('change', checkbox);
@@ -122,7 +128,7 @@ suite('cr-checkbox', function() {
 
     checkbox.click();
     assertNotChecked();
-    checkbox.$.checkbox.click();
+    innerCheckbox.click();
     assertNotChecked();
     triggerKeyPressEvent('Enter');
     assertNotChecked();
@@ -148,7 +154,8 @@ suite('cr-checkbox', function() {
     });
 
     assertNotChecked();
-    const link = document.querySelector('a');
+    const link =
+        /** @type {!HTMLAnchorElement} */ (document.querySelector('a'));
     link.click();
     assertNotChecked();
 
@@ -161,52 +168,54 @@ suite('cr-checkbox', function() {
 
   test('space key down does not toggle', () => {
     assertNotChecked();
-    MockInteractions.keyDownOn(checkbox.$.checkbox, null, undefined, ' ');
+    MockInteractions.keyDownOn(innerCheckbox, 0, undefined, ' ');
     assertNotChecked();
   });
 
   test('space key up toggles', () => {
     assertNotChecked();
-    MockInteractions.keyUpOn(checkbox.$.checkbox, null, undefined, ' ');
+    MockInteractions.keyUpOn(innerCheckbox, 0, undefined, ' ');
     assertChecked();
   });
 
   test('InitializingWithTabindex', function() {
-    PolymerTest.clearBody();
     document.body.innerHTML = `
       <cr-checkbox id="checkbox" tab-index="-1"></cr-checkbox>
     `;
 
-    checkbox = document.querySelector('cr-checkbox');
+    checkbox = /** @type {!CrCheckboxElement} */ (
+        document.querySelector('cr-checkbox'));
+    innerCheckbox = /** @type {!HTMLElement} */ (checkbox.$$('#checkbox'));
 
     // Should not override tabindex if it is initialized.
     assertEquals(-1, checkbox.tabIndex);
     assertFalse(checkbox.hasAttribute('tabindex'));
-    assertEquals('-1', checkbox.$.checkbox.getAttribute('tabindex'));
+    assertEquals('-1', innerCheckbox.getAttribute('tabindex'));
   });
 
   test('InitializingWithDisabled', function() {
-    PolymerTest.clearBody();
     document.body.innerHTML = `
       <cr-checkbox id="checkbox" disabled></cr-checkbox>
     `;
 
-    checkbox = document.querySelector('cr-checkbox');
+    checkbox = /** @type {!CrCheckboxElement} */ (
+        document.querySelector('cr-checkbox'));
+    innerCheckbox = /** @type {!HTMLElement} */ (checkbox.$$('#checkbox'));
 
     // Initializing with disabled should make tabindex="-1".
     assertEquals(-1, checkbox.tabIndex);
     assertFalse(checkbox.hasAttribute('tabindex'));
-    assertEquals('-1', checkbox.$.checkbox.getAttribute('tabindex'));
+    assertEquals('-1', innerCheckbox.getAttribute('tabindex'));
   });
 
   test('tabindex attribute is controlled by tabIndex', () => {
-    PolymerTest.clearBody();
     document.body.innerHTML = `
       <cr-checkbox id="checkbox" tabindex="-1"></cr-checkbox>
     `;
-    checkbox = document.querySelector('cr-checkbox');
+    checkbox = /** @type {!CrCheckboxElement} */ (
+        document.querySelector('cr-checkbox'));
     assertEquals(0, checkbox.tabIndex);
     assertFalse(checkbox.hasAttribute('tabindex'));
-    assertEquals('0', checkbox.$.checkbox.getAttribute('tabindex'));
+    assertEquals('0', innerCheckbox.getAttribute('tabindex'));
   });
 });

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

@@ -5,6 +5,7 @@
 // clang-format off
 // #import {CrContainerShadowBehavior} from 'chrome://resources/cr_elements/cr_container_shadow_behavior.m.js';
 // #import {Polymer, html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {assertFalse, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 suite('CrContainerShadowBehavior', function() {
@@ -61,11 +62,12 @@ suite('CrContainerShadowBehavior', function() {
   });
 
   setup(function() {
-    PolymerTest.clearBody();
+    document.body.innerHTML = '';
   });
 
   test('no bottom shadow', function() {
-    const element = document.createElement('test-element');
+    const element = /** @type {TestElementElement} */ (
+        document.createElement('test-element'));
     document.body.appendChild(element);
 
     // Should not have a bottom shadow div.
@@ -80,7 +82,8 @@ suite('CrContainerShadowBehavior', function() {
   });
 
   test('show bottom shadow', function() {
-    const element = document.createElement('test-element');
+    const element = /** @type {TestElementElement} */ (
+        document.createElement('test-element'));
     element.showBottomShadow = true;
     document.body.appendChild(element);
 

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

@@ -8,9 +8,11 @@
 // #import {eventToPromise, flushTasks} from '../test_util.m.js';
 // #import {keyDownOn, keyEventOn, tap} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 // #import {Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {assertEquals, assertFalse, assertNotEquals, assertNotReached, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-dialog', function() {
+  /** @type {!HTMLElement} element */
   function pressEnter(element) {
     MockInteractions.keyEventOn(element, 'keypress', 13, undefined, 'Enter');
   }
@@ -43,7 +45,7 @@ suite('cr-dialog', function() {
   }
 
   setup(function() {
-    PolymerTest.clearBody();
+    document.body.innerHTML = '';
     // Ensure svg, which is referred to by a relative URL, is loaded from
     // chrome://resources and not chrome://test
     const base = document.createElement('base');
@@ -58,7 +60,8 @@ suite('cr-dialog', function() {
         <div slot="body">body</div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     const whenFired = test_util.eventToPromise('cr-dialog-open', dialog);
     dialog.showModal();
     return whenFired;
@@ -71,7 +74,8 @@ suite('cr-dialog', function() {
         <div slot="body">body</div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     dialog.showModal();
     const whenFired = test_util.eventToPromise('close', dialog);
     dialog.close();
@@ -112,7 +116,8 @@ suite('cr-dialog', function() {
         <div slot="body">body</div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     dialog.showModal();
     const whenCancelFired = test_util.eventToPromise('cancel', dialog);
     const whenCloseFired = test_util.eventToPromise('close', dialog);
@@ -154,7 +159,8 @@ suite('cr-dialog', function() {
         <div slot="body"><button>button</button></div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     const button = document.body.querySelector('button');
 
     assertNotEquals(dialog, document.activeElement);
@@ -162,8 +168,8 @@ suite('cr-dialog', function() {
 
     dialog.showModal();
 
-    expectEquals(dialog, document.activeElement);
-    expectNotEquals(button, document.activeElement);
+    assertEquals(dialog, document.activeElement);
+    assertNotEquals(button, document.activeElement);
   });
 
   test('enter keys should trigger action buttons once', function() {
@@ -176,8 +182,10 @@ suite('cr-dialog', function() {
         </div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
-    const actionButton = document.body.querySelector('.action-button');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
+    const actionButton = /** @type {!HTMLButtonElement} */ (
+        document.body.querySelector('.action-button'));
 
     dialog.showModal();
 
@@ -187,15 +195,23 @@ suite('cr-dialog', function() {
       clickedCounter++;
     });
 
+    /** @param {!HTMLButtonElement}  button */
+    function simulateEnterOnButton(button) {
+      pressEnter(button);
+      // Also call manually click() since normally this is done by the browser.
+      button.click();
+    }
+
     // Enter key on the action button should only fire the click handler once.
-    MockInteractions.tap(actionButton, 'keypress', 13, undefined, 'Enter');
+    simulateEnterOnButton(actionButton);
     assertEquals(1, clickedCounter);
 
     // Enter keys on other buttons should be ignored.
     clickedCounter = 0;
-    const otherButton = document.body.querySelector('#other-button');
+    const otherButton = /** @type {!HTMLButtonElement} */ (
+        document.body.querySelector('#other-button'));
     assertTrue(!!otherButton);
-    pressEnter(otherButton);
+    simulateEnterOnButton(otherButton);
     assertEquals(0, clickedCounter);
 
     // Enter keys on the close icon in the top-right corner should be ignored.
@@ -215,7 +231,8 @@ suite('cr-dialog', function() {
         </div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     const hiddenButton = document.body.querySelector('#hidden');
     const actionButton = document.body.querySelector('#active');
     dialog.showModal();
@@ -250,7 +267,8 @@ suite('cr-dialog', function() {
         </div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
 
     const otherElement = document.body.querySelector('foobar');
     const inputCheckboxElement =
@@ -310,7 +328,8 @@ suite('cr-dialog', function() {
         <div slot="body"><button autofocus>button</button></div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     const button = document.body.querySelector('button');
 
     assertNotEquals(dialog, document.activeElement);
@@ -318,8 +337,8 @@ suite('cr-dialog', function() {
 
     dialog.showModal();
 
-    expectNotEquals(dialog, document.activeElement);
-    expectEquals(button, document.activeElement);
+    assertNotEquals(dialog, document.activeElement);
+    assertEquals(button, document.activeElement);
   });
 
   // Ensuring that intersectionObserver does not fire any callbacks before the
@@ -331,7 +350,8 @@ suite('cr-dialog', function() {
         <div slot="body">body</div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     assertFalse(dialog.open);
     const bodyContainer = dialog.$$('.body-container');
     assertTrue(!!bodyContainer);
@@ -355,7 +375,8 @@ suite('cr-dialog', function() {
         </div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     const bodyContainer = dialog.$$('.body-container');
     assertTrue(!!bodyContainer);
     const topShadow = dialog.$$('#cr-container-shadow-top');
@@ -409,7 +430,8 @@ suite('cr-dialog', function() {
         <div slot="title">title</div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     dialog.showModal();
 
     assertTrue(dialog.open);
@@ -428,7 +450,8 @@ suite('cr-dialog', function() {
         <div slot="title">title</div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     dialog.showModal();
 
     assertTrue(dialog.$.close.hidden);
@@ -452,7 +475,8 @@ suite('cr-dialog', function() {
         <div slot="title">title</div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     dialog.showModal();
     assertTrue(dialog.open);
 
@@ -468,7 +492,8 @@ suite('cr-dialog', function() {
         <div slot="title">title</div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     dialog.showModal();
 
     assertTrue(dialog.$.close.hidden);
@@ -481,7 +506,8 @@ suite('cr-dialog', function() {
         <div slot="title">title</div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     dialog.showModal();
     assertTrue(dialog.open);
     assertTrue(dialog.consumeKeydownEvent);
@@ -504,7 +530,8 @@ suite('cr-dialog', function() {
         <div slot="title">title</div>
       </cr-dialog>`;
 
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     dialog.showModal();
     assertTrue(dialog.open);
     assertFalse(dialog.consumeKeydownEvent);
@@ -527,7 +554,8 @@ suite('cr-dialog', function() {
       <cr-dialog show-on-attach>
         <div slot="title">title</div>
       </cr-dialog>`;
-    const dialog = document.body.querySelector('cr-dialog');
+    const dialog = /** @type {!CrDialogElement} */ (
+        document.body.querySelector('cr-dialog'));
     assertTrue(dialog.open);
   });
 });

chrome/test/data/webui/test_util.js

@@ -44,7 +44,7 @@ cr.define('test_util', function() {
   /**
    * Converts an event occurrence to a promise.
    * @param {string} eventType
-   * @param {Element|EventTarget} target
+   * @param {!Element|!EventTarget|!Window} target
    * @return {!Promise} A promise firing once the event occurs.
    */
   /* #export */ function eventToPromise(eventType, target) {