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

Specifically:
 - cr_toast_manager_test.js
 - cr_toast_test.js
 - cr_toggle_test.js
 - cr_toolbar_search_field_tests.js

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

chrome/test/data/webui/BUILD.gn

@@ -363,12 +363,18 @@ js_type_check("closure_compile_local") {
                   ]
   deps = [
     ":chai_assert",
+    ":mock_timer.m",
     ":test_browser_proxy.m",
     ":test_plural_string_proxy",
     ":test_util.m",
   ]
 }
 
+js_library("mock_timer.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/mock_timer.m.js" ]
+  extra_deps = [ ":modulize_local" ]
+}
+
 js_library("test_util.m") {
   sources = [ "$root_gen_dir/chrome/test/data/webui/test_util.m.js" ]
   deps = [

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

@@ -81,11 +81,11 @@ js_type_check("closure_compile") {
     ":cr_slider_test.m",
     ":cr_splitter_test",
     ":cr_tabs_test.m",
+    ":cr_toast_manager_test.m",
+    ":cr_toast_test.m",
+    ":cr_toggle_test.m",
+    ":cr_toolbar_search_field_tests.m",
 
-    #":cr_toast_manager_test",
-    #":cr_toast_test",
-    #":cr_toggle_test",
-    #":cr_toolbar_search_field_tests",
     #":cr_view_manager_test",
     #":iron_list_focus_test",
     #":settings_private_test_constants",
@@ -422,3 +422,52 @@ js_library("cr_tabs_test.m") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
   extra_deps = [ ":modulize" ]
 }
+
+js_library("cr_toast_manager_test.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toast_manager_test.m.js" ]
+  deps = [
+    "..:chai_assert",
+    "..:test_util.m",
+    "//ui/webui/resources/cr_elements/cr_toast:cr_toast.m",
+    "//ui/webui/resources/cr_elements/cr_toast:cr_toast_manager.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_toast_test.m") {
+  sources =
+      [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toast_test.m.js" ]
+  deps = [
+    "..:chai_assert",
+    "..:mock_timer.m",
+    "//ui/webui/resources/cr_elements/cr_toast:cr_toast.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_toggle_test.m") {
+  sources =
+      [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toggle_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_toggle:cr_toggle.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("cr_toolbar_search_field_tests.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toolbar_search_field_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_toolbar:cr_toolbar_search_field.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}

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

@@ -5,14 +5,17 @@
 // clang-format off
 // #import {getToastManager} from 'chrome://resources/cr_elements/cr_toast/cr_toast_manager.m.js';
 // #import {eventToPromise} from '../test_util.m.js';
+// #import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-toast-manager', () => {
+  /** @type {!CrToastManagerElement} */
   let toastManager;
 
   suiteSetup(() => {
-    PolymerTest.clearBody();
-    toastManager = document.createElement('cr-toast-manager');
+    document.body.innerHTML = '';
+    toastManager = /** @type {!CrToastManagerElement} */ (
+        document.createElement('cr-toast-manager'));
     document.body.appendChild(toastManager);
   });
 
@@ -45,6 +48,7 @@ suite('cr-toast-manager', () => {
 
   test('duration passed through to toast', () => {
     toastManager.duration = 3;
-    assertEquals(3, toastManager.$.toast.duration);
+    assertEquals(
+        3, /** @type {!CrToastElement} */ (toastManager.$$('#toast').duration));
   });
 });

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

@@ -5,15 +5,19 @@
 // clang-format off
 // #import 'chrome://resources/cr_elements/cr_toast/cr_toast.m.js';
 // #import {MockTimer} from '../mock_timer.m.js';
+// #import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 suite('cr-toast', function() {
+  /** @type {!CrToastElement} */
   let toast;
+
+  /** @type {!MockTimer} */
   let mockTimer;
 
   setup(function() {
-    PolymerTest.clearBody();
-    toast = document.createElement('cr-toast');
+    document.body.innerHTML = '';
+    toast = /** @type {!CrToastElement} */ (document.createElement('cr-toast'));
     document.body.appendChild(toast);
     mockTimer = new MockTimer();
     mockTimer.install();

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

@@ -6,18 +6,18 @@
 // #import 'chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js';
 // #import {keyEventOn} 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-toggle', function() {
+  /** @type {!CrToggleElement} */
   let toggle;
 
   setup(function() {
-    PolymerTest.clearBody();
-    document.body.innerHTML = `
-      <cr-toggle id="toggle"></cr-toggle>
-    `;
-
-    toggle = document.getElementById('toggle');
+    document.body.innerHTML = '';
+    toggle =
+        /** @type {!CrToggleElement} */ (document.createElement('cr-toggle'));
+    document.body.appendChild(toggle);
     assertNotChecked();
   });
 
@@ -26,7 +26,8 @@ suite('cr-toggle', function() {
     assertTrue(toggle.hasAttribute('checked'));
     assertEquals('true', toggle.getAttribute('aria-pressed'));
     // Asserting that the toggle button has actually moved.
-    assertTrue(getComputedStyle(toggle.$.knob).transform.includes('matrix'));
+    assertTrue(
+        getComputedStyle(toggle.$$('#knob')).transform.includes('matrix'));
   }
 
   function assertNotChecked() {
@@ -34,7 +35,7 @@ suite('cr-toggle', function() {
     assertEquals(null, toggle.getAttribute('checked'));
     assertEquals('false', toggle.getAttribute('aria-pressed'));
     // Asserting that the toggle button has not moved.
-    assertEquals('none', getComputedStyle(toggle.$.knob).transform);
+    assertEquals('none', getComputedStyle(toggle.$$('#knob')).transform);
   }
 
   function assertDisabled() {

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

@@ -6,27 +6,29 @@
 // #import 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar_search_field.m.js';
 //
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-// #import {blur, pressAndReleaseKeyOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
+// #import {pressAndReleaseKeyOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
+// #import {assertEquals, assertDeepEquals, assertFalse, assertNotEquals, assertTrue} from '../chai_assert.js';
 // clang-format on
 
 /** @fileoverview Suite of tests for cr-toolbar-search-field. */
 suite('cr-toolbar-search-field', function() {
-  /** @type {?CrToolbarSearchFieldElement} */
-  let field = null;
+  /** @type {!CrToolbarSearchFieldElement} */
+  let field;
 
   /** @type {?Array<string>} */
   let searches = null;
 
   /** @param {string} term */
   function simulateSearch(term) {
-    field.$.searchInput.value = term;
+    field.$$('#searchInput').value = term;
     field.onSearchTermInput();
     field.onSearchTermSearch();
   }
 
   setup(function() {
-    PolymerTest.clearBody();
-    field = document.createElement('cr-toolbar-search-field');
+    document.body.innerHTML = '';
+    field = /** @type {!CrToolbarSearchFieldElement} */ (
+        document.createElement('cr-toolbar-search-field'));
     searches = [];
     field.addEventListener('search-changed', function(event) {
       searches.push(event.detail);
@@ -36,8 +38,6 @@ suite('cr-toolbar-search-field', function() {
 
   teardown(function() {
     field.remove();
-    field = null;
-    searches = null;
   });
 
   // Test that no initial 'search-changed' event is fired during
@@ -63,18 +63,19 @@ suite('cr-toolbar-search-field', function() {
     assertFalse(field.showingSearch);
     field.click();
     assertTrue(field.showingSearch);
-    assertEquals(field.$.searchInput, field.root.activeElement);
+    assertEquals(field.$$('#searchInput'), field.root.activeElement);
 
-    MockInteractions.blur(field.$.searchInput);
+    field.$$('#searchInput').blur();
     assertFalse(field.showingSearch);
 
     field.click();
-    assertEquals(field.$.searchInput, field.root.activeElement);
+    assertEquals(field.$$('#searchInput'), field.root.activeElement);
 
     MockInteractions.pressAndReleaseKeyOn(
-        field.$.searchInput, 27, '', 'Escape');
+        /** @type {!HTMLElement} */ (field.$$('#searchInput')), 27, '',
+        'Escape');
     assertFalse(field.showingSearch, 'Pressing escape closes field.');
-    assertNotEquals(field.$.searchInput, field.root.activeElement);
+    assertNotEquals(field.$$('#searchInput'), field.root.activeElement);
   });
 
   test('clear search button clears and refocuses input', function() {
@@ -88,7 +89,7 @@ suite('cr-toolbar-search-field', function() {
     clearSearch.click();
     assertTrue(field.showingSearch);
     assertEquals('', field.getValue());
-    assertEquals(field.$.searchInput, field.root.activeElement);
+    assertEquals(field.$$('#searchInput'), field.root.activeElement);
     assertFalse(field.hasSearchText);
     assertFalse(field.spinnerActive);
   });
@@ -197,7 +198,7 @@ suite('cr-toolbar-search-field', function() {
   test('blur does not close field when a search is active', function() {
     field.click();
     simulateSearch('test');
-    MockInteractions.blur(field.$.searchInput);
+    field.$$('#searchInput').blur();
 
     assertTrue(field.showingSearch);
   });
@@ -217,7 +218,7 @@ suite('cr-toolbar-search-field', function() {
   });
 
   test('closes when value is cleared while unfocused', function() {
-    MockInteractions.focus(field.$.searchInput);
+    field.$$('#searchInput').focus();
     simulateSearch('test');
     Polymer.dom.flush();
 
@@ -228,7 +229,7 @@ suite('cr-toolbar-search-field', function() {
 
     // Does close the field if it is blurred before being cleared.
     simulateSearch('test');
-    MockInteractions.blur(field.$.searchInput);
+    field.$$('#searchInput').blur();
     field.setValue('');
     assertFalse(field.showingSearch);
   });

chrome/test/data/webui/mock_timer.js

@@ -23,10 +23,10 @@
 
     /**
      * Details for active timers.
-     * @type {Array<{callback: Function,
+     * @type {!Array<{callback: Function,
      *                delay: number,
      *                key: number,
-     *                repeats: boolean}>}
+     *                repeats: boolean}|undefined>}
      * @private
      */
     this.timers_ = [];

ui/webui/resources/cr_elements/cr_toast/BUILD.gn

@@ -42,10 +42,7 @@ polymer_modulizer("cr_toast_manager") {
   html_file = "cr_toast_manager.html"
   html_type = "dom-module"
   auto_imports = [ "ui/webui/resources/html/assert.html|assert" ]
-  namespace_rewrites = [
-    "cr.toastManager.CrToastManagerElement|CrToastManagerElement",
-    "cr.toastManager.getToastManager|getToastManager",
-  ]
+  namespace_rewrites = [ "cr.toastManager.getToastManager|getToastManager" ]
 }
 
 js_type_check("closure_compile_module") {

ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.js

@@ -4,16 +4,16 @@
 
 cr.define('cr.toastManager', () => {
   /* eslint-disable */
-  /** @private {?cr.toastManager.CrToastManagerElement} */
+  /** @private {?CrToastManagerElement} */
   let toastManagerInstance = null;
   /* eslint-enable */
 
-  /** @return {!cr.toastManager.CrToastManagerElement} */
+  /** @return {!CrToastManagerElement} */
   /* #export */ function getToastManager() {
     return assert(toastManagerInstance);
   }
 
-  /** @param {?cr.toastManager.CrToastManagerElement} instance */
+  /** @param {?CrToastManagerElement} instance */
   function setInstance(instance) {
     assert(!instance || !toastManagerInstance);
     toastManagerInstance = instance;
@@ -23,7 +23,7 @@ cr.define('cr.toastManager', () => {
    * @fileoverview Element which shows toasts with optional undo button.
    */
   // eslint-disable-next-line
-  /* #export */ let CrToastManagerElement = Polymer({
+  Polymer({
     is: 'cr-toast-manager',
 
     properties: {
@@ -94,7 +94,6 @@ cr.define('cr.toastManager', () => {
 
   // #cr_define_end
   return {
-    CrToastManagerElement: CrToastManagerElement,
     getToastManager: getToastManager,
   };
 });