WebUI: Add type check and other nits to some cr.ui.* unittest part #3 final

Nits addressed:
- Add type check.
- Remove "#export" markup.
- Use Object.assign() to export test functions to global scope.
- var => const/let.

Files updated:
- menu_button_test.m.js
- menu_test.m.js
- position_util_test.m.js
- splitter_test.m.js

Bug: 1133198
Change-Id: I6dbb9a2928f478cf5b543919c6800b9cd4ca6676
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2505322
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#823071}

chrome/test/data/webui/js/cr/ui/BUILD.gn

@@ -109,6 +109,53 @@ js_library("list_test.m") {
   extra_deps = [ ":modulize" ]
 }
 
+js_library("menu_button_test.m") {
+  sources =
+      [ "$root_gen_dir/chrome/test/data/webui/js/cr/ui/menu_button_test.m.js" ]
+  deps = [
+    "../../..:chai_assert",
+    "//ui/webui/resources/js/cr:ui.m",
+    "//ui/webui/resources/js/cr/ui:menu.m",
+    "//ui/webui/resources/js/cr/ui:menu_button.m",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("menu_test.m") {
+  sources = [ "$root_gen_dir/chrome/test/data/webui/js/cr/ui/menu_test.m.js" ]
+  deps = [
+    "../../..:chai_assert",
+    "//ui/webui/resources/js/cr:ui.m",
+    "//ui/webui/resources/js/cr/ui:command.m",
+    "//ui/webui/resources/js/cr/ui:menu.m",
+    "//ui/webui/resources/js/cr/ui:menu_item.m",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("position_util_test.m") {
+  sources = [
+    "$root_gen_dir/chrome/test/data/webui/js/cr/ui/position_util_test.m.js",
+  ]
+  deps = [
+    "../../..:chai_assert",
+    "//ui/webui/resources/js/cr/ui:position_util.m",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("splitter_test.m") {
+  sources =
+      [ "$root_gen_dir/chrome/test/data/webui/js/cr/ui/splitter_test.m.js" ]
+  deps = [
+    "../../..:chai_assert",
+    "//ui/webui/resources/js:util.m",
+    "//ui/webui/resources/js/cr:ui.m",
+    "//ui/webui/resources/js/cr/ui:splitter.m",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
 js_type_check("closure_compile") {
   uses_js_modules = true
 
@@ -121,5 +168,9 @@ js_type_check("closure_compile") {
     ":list_selection_model_test_util.m",
     ":list_single_selection_model_test.m",
     ":list_test.m",
+    ":menu_button_test.m",
+    ":menu_test.m",
+    ":position_util_test.m",
+    ":splitter_test.m",
   ]
 }

chrome/test/data/webui/js/cr/ui/menu_button_test.js

@@ -2,21 +2,26 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {assertEquals, assertTrue, assertFalse} from '../../../chai_assert.js';
 // #import {Menu} from 'chrome://resources/js/cr/ui/menu.m.js';
 // #import {MenuButton} from 'chrome://resources/js/cr/ui/menu_button.m.js';
 // #import {decorate} from 'chrome://resources/js/cr/ui.m.js';
+// clang-format on
 
-/* #export */ function testMenuShowAndHideEvents() {
-  var menu = document.createElement('div');
+function testMenuShowAndHideEvents() {
+  let menu = document.createElement('div');
   cr.ui.decorate(menu, cr.ui.Menu);
+  menu = /** @type {!cr.ui.Menu} */ (menu);
   document.body.appendChild(menu);
 
-  var menuButton = document.createElement('div');
+  let menuButton = document.createElement('div');
   cr.ui.decorate(menuButton, cr.ui.MenuButton);
+  menuButton = /** @type {!cr.ui.MenuButton} */ (menuButton);
   menuButton.menu = menu;
   document.body.appendChild(menuButton);
 
-  var events = [];
+  const events = [];
   menuButton.addEventListener('menushow', function(e) {
     events.push(e);
   });
@@ -55,16 +60,18 @@
   assertFalse(menuButton.classList.contains('using-mouse'));
 }
 
-/* #export */ function testFocusMoves() {
-  var menu = document.createElement('div');
-  var otherButton = document.createElement('button');
+function testFocusMoves() {
+  let menu = document.createElement('div');
+  let otherButton = document.createElement('button');
   cr.ui.decorate(menu, cr.ui.Menu);
+  menu = /** @type {!cr.ui.Menu} */ (menu);
   menu.addMenuItem({});
   document.body.appendChild(menu);
   document.body.appendChild(otherButton);
 
-  var menuButton = document.createElement('div');
+  let menuButton = document.createElement('div');
   cr.ui.decorate(menuButton, cr.ui.MenuButton);
+  menuButton = /** @type {!cr.ui.MenuButton} */ (menuButton);
   // Allow to put focus on the menu button by focus().
   menuButton.tabIndex = 1;
   menuButton.menu = menu;
@@ -85,7 +92,7 @@
   menuButton.dispatchEvent(new MouseEvent('mousedown'));
   assertTrue(menuButton.isMenuShown());
   // Emulate choosing a menu item by mouse click.
-  var menuItem = menu.menuItems[0];
+  const menuItem = menu.menuItems[0];
   menuItem.selected = true;
   menuItem.dispatchEvent(new MouseEvent('mouseup', {buttons: 1}));
   assertFalse(menuButton.isMenuShown());

chrome/test/data/webui/js/cr/ui/menu_test.js

@@ -2,10 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {assertEquals, assertTrue, assertFalse} from '../../../chai_assert.js';
 // #import {decorate} from 'chrome://resources/js/cr/ui.m.js';
 // #import {Command} from 'chrome://resources/js/cr/ui/command.m.js';
 // #import {Menu} from 'chrome://resources/js/cr/ui/menu.m.js';
 // #import {MenuItem} from 'chrome://resources/js/cr/ui/menu_item.m.js';
+// clang-format on
 
 /** @type {cr.ui.Menu} */
 var menu;
@@ -13,6 +16,10 @@ var menu;
 /**
  * @param {number} x The screenX coord of the mouseup event.
  * @param {number} y The screenY coord of the mouseup event.
+ * @return {boolean} The return value is false if event is cancelable and at
+ *     least one of the event handlers which received event called
+ *     Event.preventDefault(). Otherwise it returns true.
+ *     https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
  */
 function mouseUpAt(x, y) {
   var mouseUpEvent = new MouseEvent('mouseup', {
@@ -26,11 +33,12 @@ function mouseUpAt(x, y) {
   return menu.dispatchEvent(mouseUpEvent);
 }
 
-/* #export */ function setUp() {
+function setUp() {
   menu = new cr.ui.Menu;
 }
 
-/* #export */ function testHandleMouseOver() {
+/** @suppress {visibility} Allow test to reach to private properties. */
+function testHandleMouseOver() {
   var called = false;
   menu.findMenuItem_ = function() {
     called = true;
@@ -44,7 +52,7 @@ function mouseUpAt(x, y) {
   assertTrue(called);
 }
 
-/* #export */ function testHandleMouseUp() {
+function testHandleMouseUp() {
   var realNow = Date.now;
   Date.now = function() {
     return 10;
@@ -67,7 +75,7 @@ function mouseUpAt(x, y) {
   Date.now = realNow;
 }
 
-/* #export */ function testShowViaKeyboardIgnoresMouseUps() {
+function testShowViaKeyboardIgnoresMouseUps() {
   menu.show();
   assertTrue(mouseUpAt(0, 0));
 }
@@ -76,7 +84,7 @@ function mouseUpAt(x, y) {
  * Tests that if the command attributes are spacified, they are copied to the
  * corresponding menuitem.
  */
-/* #export */ function testCommandMenuItem() {
+function testCommandMenuItem() {
   // Test 1: The case that the command label is set and other attributes copied.
   var command = new cr.ui.Command();
   command.id = 'the-command';
@@ -140,7 +148,7 @@ function runSeparatorTest(items, hiddenItems, expectedSeparators) {
  * non-separator item on both sides of it. Further, ensure that multiple
  * separators will not be displayed adjacent to each other.
  */
-/* #export */ function testSeparators() {
+function testSeparators() {
   const menuItems = [];
   menu.addSeparator();
   menuItems.push(menu.addMenuItem({label: 'a'}));
@@ -163,7 +171,7 @@ function runSeparatorTest(items, hiddenItems, expectedSeparators) {
 /**
  * Tests that focusSelectedItem() ignores hidden and disabled items.
  */
-/* #export */ function testFocusSelectedItems() {
+function testFocusSelectedItems() {
   const menu = document.createElement('div');
   cr.ui.decorate(menu, cr.ui.Menu);
   const item1 = menu.addMenuItem({label: 'item1'});
@@ -215,7 +223,7 @@ function runSeparatorTest(items, hiddenItems, expectedSeparators) {
 /**
  * Tests that cr.ui.MenuItem defaults to tabindex=-1.
  */
-/* #export */ function testMenuItemTabIndex() {
+function testMenuItemTabIndex() {
   // Defaults to -1.
   const item1 = menu.addMenuItem({label: 'item 1'});
   assertEquals('-1', item1.getAttribute('tabindex'));

chrome/test/data/webui/js/cr/ui/position_util_test.js

@@ -3,27 +3,44 @@
 // found in the LICENSE file.
 
 // clang-format off
+// #import {assertEquals} from '../../../chai_assert.js';
 // #import {positionPopupAroundElement, positionPopupAtPoint, AnchorType} from 'chrome://resources/js/cr/ui/position_util.m.js';
 // clang-format on
 
+/** @type {!HTMLElement} */
 let anchor;
+/** @type {!HTMLElement} */
 let popup;
 let anchorParent;
 let oldGetBoundingClientRect;
 let availRect;
 
+/**
+ * @param {number} w width
+ * @param {number} h height
+ * @constructor
+ */
 function MockRect(w, h) {
+  /** @type {number} */
+  this.left = 0;
+
+  /** @type {number} */
+  this.top = 0;
+
+  /** @type {number} */
   this.width = w;
+
+  /** @type {number} */
   this.height = h;
+
+  /** @type {number} */
   this.right = this.left + w;
+
+  /** @type {number} */
   this.bottom = this.top + h;
 }
-MockRect.prototype = {
-  left: 0,
-  top: 0
-};
 
-/* #export */ function setUp() {
+function setUp() {
   document.body.innerHTML = `
     <style>
       html, body {
@@ -53,8 +70,8 @@ MockRect.prototype = {
     <div id="popup"></div>
     `;
 
-  anchor = document.getElementById('anchor');
-  popup = document.getElementById('popup');
+  anchor = /** @type {!HTMLElement} */ (document.getElementById('anchor'));
+  popup = /** @type {!HTMLElement} */ (document.getElementById('popup'));
   anchorParent = anchor.offsetParent;
   oldGetBoundingClientRect = anchorParent.getBoundingClientRect;
 
@@ -66,12 +83,12 @@ MockRect.prototype = {
   };
 }
 
-/* #export */ function tearDown() {
+function tearDown() {
   document.documentElement.dir = 'ltr';
   anchorParent.getBoundingClientRect = oldGetBoundingClientRect;
 }
 
-/* #export */ function testAbovePrimary() {
+function testAbovePrimary() {
   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
 
   assertEquals('auto', popup.style.top);
@@ -83,7 +100,7 @@ MockRect.prototype = {
   assertEquals('auto', popup.style.bottom);
 }
 
-/* #export */ function testBelowPrimary() {
+function testBelowPrimary() {
   // ensure enough below
   anchor.style.top = '90px';
 
@@ -100,7 +117,7 @@ MockRect.prototype = {
   assertEquals('100px', popup.style.bottom);
 }
 
-/* #export */ function testBeforePrimary() {
+function testBeforePrimary() {
   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BEFORE);
 
   assertEquals('auto', popup.style.left);
@@ -112,7 +129,7 @@ MockRect.prototype = {
   assertEquals('auto', popup.style.right);
 }
 
-/* #export */ function testBeforePrimaryRtl() {
+function testBeforePrimaryRtl() {
   document.documentElement.dir = 'rtl';
 
   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
@@ -127,7 +144,7 @@ MockRect.prototype = {
   assertEquals('auto', popup.style.right);
 }
 
-/* #export */ function testAfterPrimary() {
+function testAfterPrimary() {
   // ensure enough to the right
   anchor.style.left = '90px';
 
@@ -144,7 +161,7 @@ MockRect.prototype = {
   assertEquals('100px', popup.style.right);
 }
 
-/* #export */ function testAfterPrimaryRtl() {
+function testAfterPrimaryRtl() {
   document.documentElement.dir = 'rtl';
 
   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
@@ -160,7 +177,7 @@ MockRect.prototype = {
   assertEquals('auto', popup.style.right);
 }
 
-/* #export */ function testAboveSecondary() {
+function testAboveSecondary() {
   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
 
   assertEquals('100px', popup.style.left);
@@ -174,7 +191,7 @@ MockRect.prototype = {
   assertEquals('80px', popup.style.right);
 }
 
-/* #export */ function testAboveSecondaryRtl() {
+function testAboveSecondaryRtl() {
   document.documentElement.dir = 'rtl';
 
   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
@@ -190,7 +207,7 @@ MockRect.prototype = {
   assertEquals('auto', popup.style.right);
 }
 
-/* #export */ function testAboveSecondarySwappedAlign() {
+function testAboveSecondarySwappedAlign() {
   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE, true);
 
   assertEquals('auto', popup.style.left);
@@ -204,7 +221,7 @@ MockRect.prototype = {
   assertEquals('auto', popup.style.right);
 }
 
-/* #export */ function testBelowSecondary() {
+function testBelowSecondary() {
   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
 
   assertEquals('100px', popup.style.left);
@@ -218,7 +235,7 @@ MockRect.prototype = {
   assertEquals('80px', popup.style.right);
 }
 
-/* #export */ function testBelowSecondaryRtl() {
+function testBelowSecondaryRtl() {
   document.documentElement.dir = 'rtl';
 
   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
@@ -234,7 +251,7 @@ MockRect.prototype = {
   assertEquals('auto', popup.style.right);
 }
 
-/* #export */ function testBelowSecondarySwappedAlign() {
+function testBelowSecondarySwappedAlign() {
   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW, true);
 
   assertEquals('auto', popup.style.left);
@@ -248,7 +265,7 @@ MockRect.prototype = {
   assertEquals('auto', popup.style.right);
 }
 
-/* #export */ function testBeforeSecondary() {
+function testBeforeSecondary() {
   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BEFORE);
 
   assertEquals('100px', popup.style.top);
@@ -262,7 +279,7 @@ MockRect.prototype = {
   assertEquals('80px', popup.style.bottom);
 }
 
-/* #export */ function testAfterSecondary() {
+function testAfterSecondary() {
   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
 
   assertEquals('100px', popup.style.top);
@@ -276,7 +293,7 @@ MockRect.prototype = {
   assertEquals('80px', popup.style.bottom);
 }
 
-/* #export */ function testPositionAtPoint() {
+function testPositionAtPoint() {
   cr.ui.positionPopupAtPoint(100, 100, popup);
 
   assertEquals('100px', popup.style.left);

chrome/test/data/webui/js/cr/ui/splitter_test.html

@@ -4,6 +4,7 @@
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/cr/ui.js"></script>
 <script src="chrome://resources/js/cr/ui/splitter.js"></script>
+<script src="chrome://resources/js/util.js"></script>
 <script src="splitter_test.js"></script>
 </body>
 </html>

chrome/test/data/webui/js/cr/ui/splitter_test.js

@@ -2,10 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {assertEquals, assertTrue, assertFalse} from '../../../chai_assert.js';
+// #import {getRequiredElement} from 'chrome://resources/js/util.m.js';
 // #import {decorate} from 'chrome://resources/js/cr/ui.m.js';
 // #import {Splitter} from 'chrome://resources/js/cr/ui/splitter.m.js';
+// clang-format on
 
-/* #export */ function setUp() {
+function setUp() {
   const html = `
     <div id="previous"></div>
     <div id="splitter"></div>
@@ -14,33 +18,33 @@
   document.body.innerHTML = html;
 }
 
-/* #export */ function testSplitter_IgnoresRightMouse() {
-  var splitter = document.getElementById('splitter');
+function testSplitter_IgnoresRightMouse() {
+  const splitter = getRequiredElement('splitter');
   cr.ui.decorate(splitter, cr.ui.Splitter);
 
-  var downRight = new MouseEvent('mousedown', {button: 1, cancelable: true});
+  const downRight = new MouseEvent('mousedown', {button: 1, cancelable: true});
   assertTrue(splitter.dispatchEvent(downRight));
   assertFalse(downRight.defaultPrevented);
 
-  var downLeft = new MouseEvent('mousedown', {button: 0, cancelable: true});
+  const downLeft = new MouseEvent('mousedown', {button: 0, cancelable: true});
   assertFalse(splitter.dispatchEvent(downLeft));
   assertTrue(downLeft.defaultPrevented);
 }
 
-/* #export */ function testSplitter_ResizePreviousElement() {
-  var splitter = document.getElementById('splitter');
+function testSplitter_ResizePreviousElement() {
+  const splitter = getRequiredElement('splitter');
   cr.ui.decorate(splitter, cr.ui.Splitter);
   splitter.resizeNextElement = false;
 
-  var previousElement = document.getElementById('previous');
+  const previousElement = document.getElementById('previous');
   previousElement.style.width = '0px';
-  var beforeWidth = parseFloat(previousElement.style.width);
+  const beforeWidth = parseFloat(previousElement.style.width);
 
-  var down =
+  const down =
       new MouseEvent('mousedown', {button: 0, cancelable: true, clientX: 0});
   splitter.dispatchEvent(down);
 
-  var move =
+  let move =
       new MouseEvent('mousemove', {button: 0, cancelable: true, clientX: 50});
   splitter.dispatchEvent(move);
 
@@ -48,37 +52,38 @@
       new MouseEvent('mousemove', {button: 0, cancelable: true, clientX: 100});
   splitter.dispatchEvent(move);
 
-  var up =
+  const up =
       new MouseEvent('mouseup', {button: 0, cancelable: true, clientX: 100});
   splitter.dispatchEvent(up);
 
-  var afterWidth = parseFloat(previousElement.style.width);
+  const afterWidth = parseFloat(previousElement.style.width);
   assertEquals(100, afterWidth - beforeWidth);
 }
 
-/* #export */ function testSplitter_ResizeNextElement() {
-  var splitter = document.getElementById('splitter');
-  cr.ui.decorate(splitter, cr.ui.Splitter, true);
+function testSplitter_ResizeNextElement() {
+  const splitter = getRequiredElement('splitter');
+  cr.ui.decorate(splitter, cr.ui.Splitter);
   splitter.resizeNextElement = true;
-  var nextElement = document.getElementById('next');
+  const nextElement = document.getElementById('next');
   nextElement.style.width = '0px';
-  var beforeWidth = parseFloat(nextElement.style.width);
+  const beforeWidth = parseFloat(nextElement.style.width);
 
-  var down =
+  const down =
       new MouseEvent('mousedown', {button: 0, cancelable: true, clientX: 100});
   splitter.dispatchEvent(down);
 
-  var move =
+  let move =
       new MouseEvent('mousemove', {button: 0, cancelable: true, clientX: 50});
   splitter.dispatchEvent(move);
 
   move = new MouseEvent('mousemove', {button: 0, cancelable: true, clientX: 0});
   splitter.dispatchEvent(move);
 
-  var up = new MouseEvent('mouseup', {button: 0, cancelable: true, clientX: 0});
+  const up =
+      new MouseEvent('mouseup', {button: 0, cancelable: true, clientX: 0});
   splitter.dispatchEvent(up);
 
-  var afterWidth = parseFloat(nextElement.style.width);
+  const afterWidth = parseFloat(nextElement.style.width);
   assertEquals(100, afterWidth - beforeWidth);
 }