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

Specifically:
 - cr_drawer_tests.js
 - cr_expand_button_focus_tests.js
 - cr_expand_button_tests.js

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

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

@@ -57,10 +57,10 @@ js_type_check("closure_compile") {
     ":cr_checkbox_test.m",
     ":cr_container_shadow_behavior_test.m",
     ":cr_dialog_test.m",
+    ":cr_drawer_tests.m",
+    ":cr_expand_button_focus_tests.m",
+    ":cr_expand_button_tests.m",
 
-    #":cr_drawer_tests",
-    #":cr_expand_button_focus_tests",
-    #":cr_expand_button_tests",
     #":cr_fingerprint_progress_arc_tests",
     #":cr_icon_button_focus_tests",
     #":cr_icon_button_tests",
@@ -168,3 +168,42 @@ js_library("cr_dialog_test.m") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
   extra_deps = [ ":modulize" ]
 }
+
+js_library("cr_drawer_tests.m") {
+  sources = [
+    "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_drawer_tests.m.js",
+  ]
+  deps = [
+    "..:chai_assert",
+    "..:test_util.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_drawer:cr_drawer.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_expand_button_focus_tests.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_expand_button_focus_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_expand_button:cr_expand_button.m",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
+    "//ui/webui/resources/js:util.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_expand_button_tests.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_expand_button_tests.m.js" ]
+  deps = [
+    "..:chai_assert",
+    "//ui/webui/resources/cr_elements/cr_expand_button:cr_expand_button.m",
+    "//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_drawer_tests.js

@@ -7,13 +7,18 @@
 //
 // #import {eventToPromise} from '../test_util.m.js';
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {assertEquals, assertFalse, assertNotEquals, assertTrue, assertThrows} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-drawer', function() {
   setup(function() {
-    PolymerTest.clearBody();
+    document.body.innerHTML = '';
   });
 
+  /**
+   * @param {string} align
+   * @return {!CrDrawerElement}
+   */
   function createDrawer(align) {
     document.body.innerHTML = `
       <cr-drawer id="drawer" align="${align}">
@@ -22,7 +27,7 @@ suite('cr-drawer', function() {
       </cr-drawer>
     `;
     Polymer.dom.flush();
-    return document.getElementById('drawer');
+    return /** @type {!CrDrawerElement} */ (document.getElementById('drawer'));
   }
 
   test('open and close', function() {
@@ -39,7 +44,7 @@ suite('cr-drawer', function() {
           document.querySelector('.drawer-content').click();
 
           const whenClosed = test_util.eventToPromise('close', drawer);
-          drawer.$.dialog.dispatchEvent(new MouseEvent('click', {
+          drawer.$$('#dialog').dispatchEvent(new MouseEvent('click', {
             bubbles: true,
             cancelable: true,
             clientX: 300,  // Must be larger than the drawer width (256px).
@@ -71,7 +76,7 @@ suite('cr-drawer', function() {
     await test_util.eventToPromise('cr-drawer-opened', drawer);
 
     // Clicking the icon closes the drawer.
-    drawer.$.iconButton.click();
+    drawer.$$('#iconButton').click();
     await test_util.eventToPromise('close', drawer);
     assertFalse(drawer.open);
     assertTrue(drawer.wasCanceled());
@@ -81,7 +86,7 @@ suite('cr-drawer', function() {
     const drawer = createDrawer('ltr');
     drawer.openDrawer();
     return test_util.eventToPromise('cr-drawer-opened', drawer).then(() => {
-      const rect = drawer.$.dialog.getBoundingClientRect();
+      const rect = drawer.$$('#dialog').getBoundingClientRect();
       assertEquals(0, rect.left);
       assertNotEquals(0, rect.right);
     });
@@ -91,14 +96,14 @@ suite('cr-drawer', function() {
     const drawer = createDrawer('rtl');
     drawer.openDrawer();
     return test_util.eventToPromise('cr-drawer-opened', drawer).then(() => {
-      const rect = drawer.$.dialog.getBoundingClientRect();
+      const rect = drawer.$$('#dialog').getBoundingClientRect();
       assertNotEquals(0, rect.left);
       assertEquals(window.innerWidth, rect.right);
     });
   });
 
   test('close and cancel', () => {
-    const drawer = createDrawer();
+    const drawer = createDrawer('ltr');
     drawer.openDrawer();
     return test_util.eventToPromise('cr-drawer-opened', drawer)
         .then(() => {
@@ -125,7 +130,7 @@ suite('cr-drawer', function() {
   });
 
   test('openDrawer/close/toggle can be called multiple times in a row', () => {
-    const drawer = createDrawer();
+    const drawer = createDrawer('ltr');
     drawer.openDrawer();
     drawer.close();
     drawer.close();
@@ -138,7 +143,7 @@ suite('cr-drawer', function() {
   });
 
   test('cannot set open', () => {
-    const drawer = createDrawer();
+    const drawer = createDrawer('ltr');
     assertThrows(() => {
       drawer.open = true;
     });

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

@@ -8,15 +8,20 @@
 // #import {eventToPromise} from '../test_util.m.js';
 // #import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
 // #import {pressAndReleaseKeyOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
+// #import {assertEquals, assertFalse, assertNotEquals, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-expand-button-focus-tests', () => {
+  /** @type {!CrExpandButtonElement} */
   let button;
 
-  /** @param {boolean} */
+  /** @type {!CrIconButtonElement} */
+  let icon;
+
+  /** @param {boolean} rippleShown */
   function assertRippleState(rippleShown) {
-    assertEquals(button.$.icon, getDeepActiveElement());
-    assertEquals(rippleShown, button.$.icon.getRipple().holdDown);
+    assertEquals(icon, getDeepActiveElement());
+    assertEquals(rippleShown, icon.getRipple().holdDown);
   }
 
   function assertRipple() {
@@ -27,41 +32,50 @@ suite('cr-expand-button-focus-tests', () => {
     assertRippleState(false);
   }
 
-  /** @param {!Function} toggler */
-  async function waitForExpansion(toggler) {
+  /**
+   * @param {!Function} toggler
+   * @return {!Promise<void>}
+   */
+  function waitForExpansion(toggler) {
     const wait = test_util.eventToPromise('expanded-changed', button);
     toggler();
-    await wait;
+    return wait;
   }
 
-  async function click() {
-    await waitForExpansion(() => {
+  /** @return {!Promise<void>} */
+  function click() {
+    return waitForExpansion(() => {
       // This is used in cr.ui.focusWithoutInk to change mode into ink hidden
       // when focused.
       button.dispatchEvent(new PointerEvent('pointerdown'));
       // Used to simulate releasing the mouse button.
-      button.$.icon.fire('up');
+      icon.fire('up');
       // When the mouse is pressed and released, it will also emit a 'click'
       // event which is used in cr-expand-button to toggle expansion.
       button.fire('click');
     });
   }
 
-  async function enter() {
-    await waitForExpansion(() => {
-      MockInteractions.pressAndReleaseKeyOn(button.$.icon, '', '', 'Enter');
+  /** @return {!Promise<void>} */
+  function enter() {
+    return waitForExpansion(() => {
+      MockInteractions.pressAndReleaseKeyOn(icon, 0, '', 'Enter');
     });
   }
 
-  async function space() {
-    await waitForExpansion(() => {
-      MockInteractions.pressAndReleaseKeyOn(button.$.icon, '', '', ' ');
+  /** @return {!Promise<void>} */
+  function space() {
+    return waitForExpansion(() => {
+      MockInteractions.pressAndReleaseKeyOn(icon, 0, '', ' ');
     });
   }
 
   setup(() => {
-    document.body.innerHTML = '<cr-expand-button></cr-expand-button>';
-    button = document.body.querySelector('cr-expand-button');
+    document.body.innerHTML = '';
+    button = /** @type {!CrExpandButtonElement} */ (
+        document.createElement('cr-expand-button'));
+    document.body.appendChild(button);
+    icon = /** @type {!CrIconButtonElement} */ (button.$$('#icon'));
   });
 
   test('focus, ripple', () => {

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

@@ -4,45 +4,49 @@
 
 // clang-format off
 // #import 'chrome://resources/cr_elements/cr_expand_button/cr_expand_button.m.js';
+// #import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-expand-button', function() {
+  /** @type {!CrExpandButtonElement} */
   let button;
 
+  /** @type {!CrIconButtonElement} */
+  let icon;
+
   setup(() => {
-    PolymerTest.clearBody();
-    document.body.innerHTML = '<cr-expand-button></cr-expand-button>';
-    button = document.body.querySelector('cr-expand-button');
+    document.body.innerHTML = '';
+    button = /** @type {!CrExpandButtonElement} */ (
+        document.createElement('cr-expand-button'));
+    document.body.appendChild(button);
+    icon = /** @type {!CrIconButtonElement} */ (button.$$('#icon'));
   });
 
   test('setting |alt| label', () => {
-    const iconButton = button.$.icon;
     assertFalse(!!button.alt);
-    assertEquals('label', iconButton.getAttribute('aria-labelledby'));
-    assertEquals(null, iconButton.getAttribute('aria-label'));
+    assertEquals('label', icon.getAttribute('aria-labelledby'));
+    assertEquals(null, icon.getAttribute('aria-label'));
     const altLabel = 'alt label';
     button.alt = altLabel;
-    assertEquals(null, iconButton.getAttribute('aria-labelledby'));
-    assertEquals('alt label', iconButton.getAttribute('aria-label'));
+    assertEquals(null, icon.getAttribute('aria-labelledby'));
+    assertEquals('alt label', icon.getAttribute('aria-label'));
   });
 
   test('changing |expanded|', () => {
-    const iconButton = button.$.icon;
     assertFalse(button.expanded);
-    assertEquals('false', iconButton.getAttribute('aria-expanded'));
-    assertEquals('cr:expand-more', iconButton.ironIcon);
+    assertEquals('false', icon.getAttribute('aria-expanded'));
+    assertEquals('cr:expand-more', icon.ironIcon);
     button.expanded = true;
-    assertEquals('true', iconButton.getAttribute('aria-expanded'));
-    assertEquals('cr:expand-less', iconButton.ironIcon);
+    assertEquals('true', icon.getAttribute('aria-expanded'));
+    assertEquals('cr:expand-less', icon.ironIcon);
   });
 
   test('changing |disabled|', () => {
-    const iconButton = button.$.icon;
     assertFalse(button.disabled);
-    assertEquals('false', iconButton.getAttribute('aria-expanded'));
-    assertFalse(iconButton.disabled);
+    assertEquals('false', icon.getAttribute('aria-expanded'));
+    assertFalse(icon.disabled);
     button.disabled = true;
-    assertFalse(iconButton.hasAttribute('aria-expanded'));
-    assertTrue(iconButton.disabled);
+    assertFalse(icon.hasAttribute('aria-expanded'));
+    assertTrue(icon.disabled);
   });
 });