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

Specifically:
 - cr_searchable_drop_down_tests.js
 - cr_view_manager_tests.js
 - iron_list_focus_test.js

Also in this process, realized that cr-searchable-drop-down
was using the deprecated KeyEvent#code attribute,
and updated it to use KeyEvent#key instead.

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

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

@@ -89,16 +89,12 @@ js_type_check("closure_compile") {
     #":cr_toolbar_search_field_tests",
 
     ":cr_toolbar_tests.m",
-
-    #":cr_view_manager_test",
-    #":iron_list_focus_test",
-    #":settings_private_test_constants",
+    ":cr_view_manager_test.m",
+    ":iron_list_focus_test.m",
   ]
 
   if (is_chromeos) {
-    deps += [
-      #":cr_searchable_drop_down_tests",
-    ]
+    deps += [ ":cr_searchable_drop_down_tests.m" ]
   }
 }
 
@@ -474,3 +470,39 @@ js_library("cr_toolbar_tests.m") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
   extra_deps = [ ":modulize" ]
 }
+
+js_library("cr_view_manager_test.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_view_manager_test.m.js" ]
+  deps = [
+    "..:chai_assert",
+    "..:test_util.m",
+    "//ui/webui/resources/cr_elements/cr_view_manager:cr_view_manager.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("iron_list_focus_test.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/iron_list_focus_test.m.js" ]
+  deps = [
+    "..:chai_assert",
+    "//third_party/polymer/v3_0/components-chromium/iron-list:iron-list",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}
+
+if (is_chromeos) {
+  js_library("cr_searchable_drop_down_tests.m") {
+    sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_searchable_drop_down_tests.m.js" ]
+    deps = [
+      "..:chai_assert",
+      "//third_party/polymer/v3_0/components-chromium/iron-test-helpers:mock-interactions",
+      "//ui/webui/resources/cr_elements/cr_input:cr_input.m",
+      "//ui/webui/resources/cr_elements/cr_searchable_drop_down:cr_searchable_drop_down.m",
+    ]
+    externs_list = [ "$externs_path/mocha-2.5.js" ]
+    extra_deps = [ ":modulize" ]
+  }
+}

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

@@ -5,17 +5,18 @@
 // clang-format off
 // #import 'chrome://resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.m.js';
 // #import {Polymer, html, 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 {keyDownOn, move} 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-searchable-drop-down', function() {
-  /** @type {CrSearchableDropDownElement} */
+  /** @type {!CrSearchableDropDownElement} */
   let dropDown;
 
-  /** @type {HTMLElement} */
+  /** @type {!HTMLElement} */
   let outsideElement;
 
-  /** @type {CrInputElement} */
+  /** @type {!CrInputElement} */
   let searchInput;
 
   /**
@@ -37,32 +38,34 @@ suite('cr-searchable-drop-down', function() {
    *  the drop down.
    */
   function search(searchTerm) {
-    const input = dropDown.shadowRoot.querySelector('cr-input');
+    const input = /** @type {!CrInputElement} */ (
+        dropDown.shadowRoot.querySelector('cr-input'));
     input.value = searchTerm;
     input.fire('input');
     Polymer.dom.flush();
   }
 
   function blur() {
-    const input = dropDown.shadowRoot.querySelector('cr-input');
+    const input = /** @type {!CrInputElement} */ (
+        dropDown.shadowRoot.querySelector('cr-input'));
     input.fire('blur');
     Polymer.dom.flush();
   }
 
   function down() {
-    MockInteractions.keyDownOn(searchInput, 'ArrowDown', [], 'ArrowDown');
+    MockInteractions.keyDownOn(searchInput, 0, [], 'ArrowDown');
   }
 
   function up() {
-    MockInteractions.keyDownOn(searchInput, 'ArrowUp', [], 'ArrowUp');
+    MockInteractions.keyDownOn(searchInput, 0, [], 'ArrowUp');
   }
 
   function enter() {
-    MockInteractions.keyDownOn(searchInput, 'Enter', [], 'Enter');
+    MockInteractions.keyDownOn(searchInput, 0, [], 'Enter');
   }
 
   function tab() {
-    MockInteractions.keyDownOn(searchInput, 'Tab', [], 'Tab');
+    MockInteractions.keyDownOn(searchInput, 0, [], 'Tab');
   }
 
   function pointerDown(element) {
@@ -79,14 +82,15 @@ suite('cr-searchable-drop-down', function() {
   }
 
   setup(function() {
-    PolymerTest.clearBody();
     document.body.innerHTML = `
       <p id="outside">Nothing to see here</p>
       <cr-searchable-drop-down label="test drop down">
       </cr-searchable-drop-down>
     `;
-    dropDown = document.querySelector('cr-searchable-drop-down');
-    outsideElement = document.querySelector('#outside');
+    dropDown = /** @type {!CrSearchableDropDownElement} */ (
+        document.querySelector('cr-searchable-drop-down'));
+    outsideElement =
+        /** @type {!HTMLElement} */ (document.querySelector('#outside'));
     searchInput = dropDown.$.search;
     Polymer.dom.flush();
   });

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

@@ -6,6 +6,7 @@
 // #import 'chrome://resources/cr_elements/cr_view_manager/cr_view_manager.m.js';
 // #import {assert} from 'chrome://resources/js/assert.m.js';
 // #import {isChildVisible} from '../test_util.m.js';
+// #import {assertEquals, assertTrue, assertFalse} from '../chai_assert.js';
 // clang-format on
 
 /** @fileoverview Suite of tests for cr-view-manager. */
@@ -16,16 +17,16 @@ cr.define('cr_view_manager_test', function() {
     EventFiring: 'event firing',
   };
 
+  /** @type {!CrViewManagerElement} */
   let viewManager;
+
   let parent;
-  let views;
   const suiteName = 'CrElementsViewManagerTest';
 
   suite(suiteName, function() {
     // Initialize an cr-view-manager inside a parent div before
     // each test.
     setup(function() {
-      PolymerTest.clearBody();
       document.body.innerHTML = `
         <div id="parent">
           <cr-view-manager id="viewManager">
@@ -36,13 +37,14 @@ cr.define('cr_view_manager_test', function() {
         </div>
       `;
       parent = document.body.querySelector('#parent');
-      viewManager = document.body.querySelector('#viewManager');
+      viewManager = /** @type {!CrViewManagerElement} */ (
+          document.body.querySelector('#viewManager'));
     });
 
     test(assert(TestNames.Visibility), function() {
       function assertViewVisible(id, expectIsVisible) {
-        const expectFunc = expectIsVisible ? expectTrue : expectFalse;
-        expectFunc(test_util.isChildVisible(viewManager, '#' + id, true));
+        const assertFunc = expectIsVisible ? assertTrue : assertFalse;
+        assertFunc(test_util.isChildVisible(viewManager, '#' + id, true));
       }
 
       assertViewVisible('viewOne', false);
@@ -86,8 +88,8 @@ cr.define('cr_view_manager_test', function() {
        * @param {boolean} expectFired Whether the event should have fired.
        */
       function verifyEventFiredAndBubbled(eventName, expectFired) {
-        expectEquals(expectFired, fired.has(eventName));
-        expectEquals(expectFired, bubbled.has(eventName));
+        assertEquals(expectFired, fired.has(eventName));
+        assertEquals(expectFired, bubbled.has(eventName));
       }
 
       // Setup the switch promise first.

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

@@ -5,6 +5,7 @@
 // clang-format off
 // #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 // #import 'chrome://resources/polymer/v3_0/iron-list/iron-list.js';
+// #import {assertEquals, assertTrue, assertNotEquals} from '../chai_assert.js';
 // clang-format on
 
 // test-iron-focusable is a native custom element in order to maintain
@@ -42,10 +43,12 @@ customElements.define('test-iron-focusable', class extends HTMLElement {
 
 suite('iron-list-focus-test', function() {
   let testDiv = null;
-  let testIronList = null;
+
+  /** @type {!IronListElement} */
+  let testIronList;
 
   setup(function() {
-    document.body.innerHTML += `
+    document.body.innerHTML = `
       <div id="testDiv">
         <iron-list>
           <template>
@@ -56,7 +59,8 @@ suite('iron-list-focus-test', function() {
       </div>`;
 
     testDiv = document.querySelector('#testDiv');
-    testIronList = document.querySelector('iron-list');
+    testIronList =
+        /** @type {!IronListElement} */ (document.querySelector('iron-list'));
 
     assertTrue(!!testDiv);
     assertTrue(!!testIronList);
@@ -65,12 +69,6 @@ suite('iron-list-focus-test', function() {
     Polymer.dom.flush();
   });
 
-  teardown(function() {
-    testDiv.remove();
-    testDiv = null;
-    testIronList = null;
-  });
-
   test('test focus is NOT preserved', function() {
     const initialFocus = testIronList.querySelector('[tabindex="0"]');
     initialFocus.focus();

chrome/test/data/webui/namespace_rewrites.gni

@@ -10,6 +10,7 @@ test_namespace_rewrites = [
   "MockInteractions.keyDownOn|keyDownOn",
   "MockInteractions.keyEventOn|keyEventOn",
   "MockInteractions.keyUpOn|keyUpOn",
+  "MockInteractions.move|move",
   "MockInteractions.pressAndReleaseKeyOn|pressAndReleaseKeyOn",
   "MockInteractions.tap|tap",
   "MockInteractions.up|up",

ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.js

@@ -265,7 +265,7 @@ Polymer({
       if (this.readonly) {
         return;
       }
-      if (event.code === 'Enter') {
+      if (event.key === 'Enter') {
         this.openDropdown_();
         // Stop the default submit action.
         event.preventDefault();
@@ -274,7 +274,7 @@ Polymer({
     }
 
     event.stopPropagation();
-    switch (event.code) {
+    switch (event.key) {
       case 'Tab':
         // Pressing tab will cause the input field to lose focus. Since the
         // dropdown visibility is tied to focus, close the dropdown.
@@ -287,7 +287,7 @@ Polymer({
         if (items.length === 0) {
           break;
         }
-        this.updateSelected_(items, selected, event.code === 'ArrowDown');
+        this.updateSelected_(items, selected, event.key === 'ArrowDown');
         break;
       }
       case 'Enter': {