WebUI Tab Strip: Add type checking to tests

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

chrome/browser/resources/tab_strip/tab_list.js

@@ -98,7 +98,7 @@ function slideElement(element, scale) {
 }
 
 /** @implements {DragManagerDelegate} */
-class TabListElement extends CustomElement {
+export class TabListElement extends CustomElement {
   static get template() {
     return `{__html_template__}`;
   }

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

@@ -11,17 +11,14 @@ js_type_check("closure_compile") {
                     "js_module_root=../../chrome/test/data/webui/",
                     "js_module_root=./gen/chrome/test/data/webui/",
                   ]
-
-  # TODO(crbug.com/1000989): Add JS type checking for all commented out targets.
   deps = [
-    #":alert_indicator_test",
-    #":alert_indicators_test",
+    ":alert_indicator_test",
+    ":alert_indicators_test",
     ":drag_manager_test",
-
-    #":tab_group_test",
-    #":tab_list_test",
-    #":tab_swiper_test",
-    #":tab_test",
+    ":tab_group_test",
+    ":tab_list_test",
+    ":tab_swiper_test",
+    ":tab_test",
     ":test_tab_strip_embedder_proxy",
     ":test_tabs_api_proxy",
   ]
@@ -41,6 +38,24 @@ js_library("test_tabs_api_proxy") {
   ]
 }
 
+js_library("alert_indicator_test") {
+  deps = [
+    "..:chai_assert",
+    "//chrome/browser/resources/tab_strip:alert_indicator",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
+
+js_library("alert_indicators_test") {
+  deps = [
+    "..:chai_assert",
+    "//chrome/browser/resources/tab_strip:alert_indicator",
+    "//chrome/browser/resources/tab_strip:alert_indicators",
+    "//chrome/browser/resources/tab_strip:tabs_api_proxy",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
+
 js_library("drag_manager_test") {
   deps = [
     ":test_tabs_api_proxy",
@@ -54,3 +69,59 @@ js_library("drag_manager_test") {
   ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
+
+js_library("tab_group_test") {
+  deps = [
+    ":test_tab_strip_embedder_proxy",
+    "..:chai_assert",
+    "//chrome/browser/resources/tab_strip:tab",
+    "//chrome/browser/resources/tab_strip:tab_group",
+    "//chrome/browser/resources/tab_strip:tab_strip_embedder_proxy",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
+
+js_library("tab_list_test") {
+  deps = [
+    ":test_tab_strip_embedder_proxy",
+    ":test_tabs_api_proxy",
+    "..:chai_assert",
+    "..:test_util.m",
+    "//chrome/browser/resources/tab_strip:tab",
+    "//chrome/browser/resources/tab_strip:tab_group",
+    "//chrome/browser/resources/tab_strip:tab_list",
+    "//chrome/browser/resources/tab_strip:tab_strip_embedder_proxy",
+    "//chrome/browser/resources/tab_strip:tabs_api_proxy",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:load_time_data.m",
+    "//ui/webui/resources/js/cr/ui:focus_outline_manager.m",
+  ]
+  externs_list = [
+    "$externs_path/mocha-2.5.js",
+    "$externs_path/pending.js",
+  ]
+}
+
+js_library("tab_swiper_test") {
+  deps = [
+    ":test_tabs_api_proxy",
+    "..:chai_assert",
+    "..:test_util.m",
+    "//chrome/browser/resources/tab_strip:tab_swiper",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
+
+js_library("tab_test") {
+  deps = [
+    ":test_tab_strip_embedder_proxy",
+    ":test_tabs_api_proxy",
+    "..:chai_assert",
+    "//chrome/browser/resources/tab_strip:tab",
+    "//chrome/browser/resources/tab_strip:tab_strip_embedder_proxy",
+    "//chrome/browser/resources/tab_strip:tabs_api_proxy",
+    "//ui/webui/resources/js:icon.m",
+    "//ui/webui/resources/js:load_time_data.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}

chrome/test/data/webui/tab_strip/alert_indicator_test.js

@@ -2,16 +2,22 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://tab-strip/alert_indicator.js';
+import {AlertIndicatorElement} from 'chrome://tab-strip/alert_indicator.js';
+
+import {assertEquals, assertFalse, assertNotEquals} from '../chai_assert.js';
 
 suite('AlertIndicator', () => {
+  /** @type {!AlertIndicatorElement} */
   let alertIndicatorElement;
+
+  /** @type {CSSStyleDeclaration} */
   let alertIndicatorStyle;
 
   setup(() => {
     document.body.innerHTML = '';
 
-    alertIndicatorElement = document.createElement('tabstrip-alert-indicator');
+    alertIndicatorElement = /** @type {!AlertIndicatorElement} */ (
+        document.createElement('tabstrip-alert-indicator'));
     document.body.appendChild(alertIndicatorElement);
 
     alertIndicatorStyle = window.getComputedStyle(alertIndicatorElement);

chrome/test/data/webui/tab_strip/alert_indicators_test.js

@@ -2,24 +2,28 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://tab-strip/alert_indicators.js';
-
+import {AlertIndicatorElement} from 'chrome://tab-strip/alert_indicator.js';
+import {AlertIndicatorsElement} from 'chrome://tab-strip/alert_indicators.js';
 import {TabAlertState} from 'chrome://tab-strip/tabs_api_proxy.js';
 
+import {assertEquals} from '../chai_assert.js';
+
 suite('AlertIndicators', () => {
+  /** @type {!AlertIndicatorsElement} */
   let alertIndicatorsElement;
 
+  /** @return {!NodeList<!AlertIndicatorElement>} */
   const getAlertIndicators = () => {
-    return alertIndicatorsElement.shadowRoot.querySelectorAll(
-        'tabstrip-alert-indicator');
+    return /** @type {!NodeList<!AlertIndicatorElement>} */ (
+        alertIndicatorsElement.shadowRoot.querySelectorAll(
+            'tabstrip-alert-indicator'));
   };
 
   setup(() => {
     document.body.innerHTML = '';
 
-    alertIndicatorsElement =
-        document.createElement('tabstrip-alert-indicators');
-    alertIndicatorsElement.onAlertIndicatorCountChange = () => {};
+    alertIndicatorsElement = /** @type {!AlertIndicatorsElement} */
+        (document.createElement('tabstrip-alert-indicators'));
     document.body.appendChild(alertIndicatorsElement);
   });
 

chrome/test/data/webui/tab_strip/tab_group_test.js

@@ -3,15 +3,21 @@
 // found in the LICENSE file.
 
 import 'chrome://tab-strip/tab.js';
-import 'chrome://tab-strip/tab_group.js';
+import {TabGroupElement} from 'chrome://tab-strip/tab_group.js';
 
 import {TabStripEmbedderProxyImpl} from 'chrome://tab-strip/tab_strip_embedder_proxy.js';
+
+import {assertEquals} from '../chai_assert.js';
+
 import {TestTabStripEmbedderProxy} from './test_tab_strip_embedder_proxy.js';
 
 suite('TabGroup', () => {
   const groupId = 'my-group-id';
 
+  /** @type {!TabGroupElement} */
   let tabGroupElement;
+
+  /** @type {!TestTabStripEmbedderProxy} */
   let testTabStripEmbedderProxy;
 
   setup(() => {
@@ -19,7 +25,8 @@ suite('TabGroup', () => {
     TabStripEmbedderProxyImpl.instance_ = testTabStripEmbedderProxy;
 
     document.body.innerHTML = '';
-    tabGroupElement = document.createElement('tabstrip-tab-group');
+    tabGroupElement = /** @type {!TabGroupElement} */ (
+        document.createElement('tabstrip-tab-group'));
     tabGroupElement.dataset.groupId = groupId;
     tabGroupElement.appendChild(document.createElement('tabstrip-tab'));
     document.body.appendChild(tabGroupElement);

chrome/test/data/webui/tab_strip/tab_list_test.js

@@ -5,22 +5,29 @@
 import {webUIListenerCallback} from 'chrome://resources/js/cr.m.js';
 import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
-import {setScrollAnimationEnabledForTesting} from 'chrome://tab-strip/tab_list.js';
+import {TabElement} from 'chrome://tab-strip/tab.js';
+import {TabGroupElement} from 'chrome://tab-strip/tab_group.js';
+import {setScrollAnimationEnabledForTesting, TabListElement} from 'chrome://tab-strip/tab_list.js';
 import {TabStripEmbedderProxyImpl} from 'chrome://tab-strip/tab_strip_embedder_proxy.js';
-import {TabsApiProxyImpl} from 'chrome://tab-strip/tabs_api_proxy.js';
+import {TabData, TabsApiProxyImpl} from 'chrome://tab-strip/tabs_api_proxy.js';
 
+import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 import {eventToPromise} from '../test_util.m.js';
 
 import {TestTabStripEmbedderProxy} from './test_tab_strip_embedder_proxy.js';
 import {TestTabsApiProxy} from './test_tabs_api_proxy.js';
 
 suite('TabList', () => {
-  let callbackRouter;
-  let optionsCalled;
+  /** @type {!TabListElement} */
   let tabList;
+
+  /** @type {!TestTabStripEmbedderProxy} */
   let testTabStripEmbedderProxy;
+
+  /** @type {!TestTabsApiProxy} */
   let testTabsApiProxy;
 
+  /** @type {!Array<!TabData>} */
   const tabs = [
     {
       active: true,
@@ -48,28 +55,42 @@ suite('TabList', () => {
     },
   ];
 
+  /**
+   * @param {!TabData} tab
+   * @param {number} index
+   */
   function pinTabAt(tab, index) {
     const changeInfo = {index: index, pinned: true};
     const updatedTab = Object.assign({}, tab, changeInfo);
     webUIListenerCallback('tab-updated', updatedTab);
   }
 
+  /**
+   * @param {!TabData} tab
+   * @param {number} index
+   */
   function unpinTabAt(tab, index) {
     const changeInfo = {index: index, pinned: false};
     const updatedTab = Object.assign({}, tab, changeInfo);
     webUIListenerCallback('tab-updated', updatedTab);
   }
 
+  /** @return {!NodeList<!TabElement>} */
   function getUnpinnedTabs() {
-    return tabList.shadowRoot.querySelectorAll('#unpinnedTabs tabstrip-tab');
+    return /** @type {!NodeList<!TabElement>} */ (
+        tabList.shadowRoot.querySelectorAll('#unpinnedTabs tabstrip-tab'));
   }
 
+  /** @return {!NodeList<!TabElement>} */
   function getPinnedTabs() {
-    return tabList.shadowRoot.querySelectorAll('#pinnedTabs tabstrip-tab');
+    return /** @type {!NodeList<!TabElement>} */ (
+        tabList.shadowRoot.querySelectorAll('#pinnedTabs tabstrip-tab'));
   }
 
+  /** @return {!NodeList<!TabGroupElement>} */
   function getTabGroups() {
-    return tabList.shadowRoot.querySelectorAll('tabstrip-tab-group');
+    return /** @type {!NodeList<!TabGroupElement>} */ (
+        tabList.shadowRoot.querySelectorAll('tabstrip-tab-group'));
   }
 
   setup(() => {
@@ -79,7 +100,6 @@ suite('TabList', () => {
     testTabsApiProxy = new TestTabsApiProxy();
     testTabsApiProxy.setTabs(tabs);
     TabsApiProxyImpl.instance_ = testTabsApiProxy;
-    callbackRouter = testTabsApiProxy.callbackRouter;
 
     testTabStripEmbedderProxy = new TestTabStripEmbedderProxy();
     testTabStripEmbedderProxy.setColors({
@@ -95,7 +115,8 @@ suite('TabList', () => {
 
     setScrollAnimationEnabledForTesting(false);
 
-    tabList = document.createElement('tabstrip-tab-list');
+    tabList = /** @type {!TabListElement} */ (
+        document.createElement('tabstrip-tab-list'));
     document.body.appendChild(tabList);
 
     return testTabsApiProxy.whenCalled('getTabs');
@@ -224,17 +245,20 @@ suite('TabList', () => {
   });
 
   test('PlacesTabElement', () => {
-    const pinnedTab = document.createElement('tabstrip-tab');
+    const pinnedTab =
+        /** @type {!TabElement} */ (document.createElement('tabstrip-tab'));
     tabList.placeTabElement(pinnedTab, 0, true, undefined);
     assertEquals(pinnedTab, getPinnedTabs()[0]);
 
-    const unpinnedUngroupedTab = document.createElement('tabstrip-tab');
+    const unpinnedUngroupedTab =
+        /** @type {!TabElement} */ (document.createElement('tabstrip-tab'));
     tabList.placeTabElement(unpinnedUngroupedTab, 1, false, undefined);
     let unpinnedTabs = getUnpinnedTabs();
     assertEquals(4, unpinnedTabs.length);
     assertEquals(unpinnedUngroupedTab, unpinnedTabs[0]);
 
-    const groupedTab = document.createElement('tabstrip-tab');
+    const groupedTab =
+        /** @type {!TabElement} */ (document.createElement('tabstrip-tab'));
     tabList.placeTabElement(groupedTab, 1, false, 'group0');
     unpinnedTabs = getUnpinnedTabs();
     assertEquals(5, unpinnedTabs.length);
@@ -305,7 +329,8 @@ suite('TabList', () => {
   });
 
   test('PlacesTabGroupElement', () => {
-    const tabGroupElement = document.createElement('tabstrip-tab-group');
+    const tabGroupElement = /** @type {!TabGroupElement} */ (
+        document.createElement('tabstrip-tab-group'));
     tabList.placeTabGroupElement(tabGroupElement, 2);
 
     const tabGroupElements = getTabGroups();

chrome/test/data/webui/tab_strip/tab_swiper_test.js

@@ -4,21 +4,23 @@
 
 import {SWIPE_FINISH_THRESHOLD_PX, SWIPE_START_THRESHOLD_PX, TabSwiper, TRANSLATE_ANIMATION_THRESHOLD_PX} from 'chrome://tab-strip/tab_swiper.js';
 
+import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 import {eventToPromise} from '../test_util.m.js';
 
 import {TestTabsApiProxy} from './test_tabs_api_proxy.js';
 
 suite('TabSwiper', () => {
+  /** @type {!HTMLElement} */
   let tabElement;
-  let tabSwiper;
 
-  const tab = {id: 1001};
+  /** @type {!TabSwiper} */
+  let tabSwiper;
 
   setup(() => {
     document.body.innerHTML = '';
 
-    tabElement = document.createElement('div');
-    tabElement.tab = tab;
+    tabElement =
+        /** @type {!HTMLElement} */ (document.createElement('div'));
     document.body.appendChild(tabElement);
 
     tabSwiper = new TabSwiper(tabElement);
@@ -58,8 +60,8 @@ suite('TabSwiper', () => {
     pointerState.clientY = startY - (SWIPE_START_THRESHOLD_PX + 1);
     tabElement.dispatchEvent(new PointerEvent('pointermove', pointerState));
     assertTrue(
-        parseInt(tabElStyle.maxWidth) > 0 &&
-        parseInt(tabElStyle.maxWidth) < tabWidth);
+        parseInt(tabElStyle.maxWidth, 10) > 0 &&
+        parseInt(tabElStyle.maxWidth, 10) < tabWidth);
     assertTrue(
         parseFloat(tabElStyle.opacity) > 0 &&
         parseFloat(tabElStyle.opacity) < 1);

chrome/test/data/webui/tab_strip/test_tabs_api_proxy.js

@@ -73,7 +73,7 @@ export class TestTabsApiProxy extends TestBrowserProxy {
     this.methodCalled('moveTab', [tabId, newIndex]);
   }
 
-  /** @param {!Array<!TabGroupVisualData>} groupVisualData */
+  /** @param {!Object<!TabGroupVisualData>} groupVisualData */
   setGroupVisualData(groupVisualData) {
     this.groupVisualData_ = groupVisualData;
   }

third_party/closure_compiler/externs/pending.js

@@ -153,3 +153,9 @@ class StylePropertyMap {
 
 /** @type {!StylePropertyMap} */
 HTMLElement.prototype.attributeStyleMap;
+
+/** @return {!AnimationEffectTimingProperties} */
+AnimationEffectReadOnly.prototype.getTiming = function() {};
+
+/** @return {!Array<!Object>} */
+AnimationEffectReadOnly.prototype.getKeyframes = function() {};