WebUI: Migrate cr_elements tests to use let/const instead of var.

Bug: 792774
Change-Id: I2507ec439d43880de311edc9bc8131bc774edc3d
Reviewed-on: https://chromium-review.googlesource.com/807684
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Dave Schuyler <dschuyler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#522336}

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

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+module.exports = {
+  'rules': {
+    'no-var': 'error',
+  },
+};

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

@@ -8,13 +8,13 @@
  */
 suite('CrActionMenu', function() {
   /** @type {?CrActionMenuElement} */
-  var menu = null;
+  let menu = null;
 
   /** @type {?NodeList<HTMLElement>} */
-  var items = null;
+  let items = null;
 
   /** @type {HTMLElement} */
-  var dots = null;
+  let dots = null;
 
   setup(function() {
     PolymerTest.clearBody();
@@ -109,7 +109,7 @@ suite('CrActionMenu', function() {
 
   test('can navigate to dynamically added items', function() {
     // Can modify children after attached() and before showAt().
-    var item = document.createElement('button');
+    const item = document.createElement('button');
     item.classList.add('dropdown-item');
     menu.insertBefore(item, items[0]);
     menu.showAt(dots);
@@ -165,7 +165,7 @@ suite('CrActionMenu', function() {
 
   test('mouse movement focus options', function() {
     function makeMouseoverEvent(node) {
-      var e = new MouseEvent('mouseover', {bubbles: true});
+      const e = new MouseEvent('mouseover', {bubbles: true});
       node.dispatchEvent(e);
     }
 
@@ -196,7 +196,7 @@ suite('CrActionMenu', function() {
   });
 
   test('items automatically given accessibility role', function() {
-    var newItem = document.createElement('button');
+    const newItem = document.createElement('button');
     newItem.classList.add('dropdown-item');
 
     items[1].setAttribute('role', 'checkbox');
@@ -215,7 +215,7 @@ suite('CrActionMenu', function() {
 
   test('positioning', function() {
     // A 40x10 box at (100, 250).
-    var config = {
+    const config = {
       left: 100,
       top: 250,
       width: 40,
@@ -235,8 +235,8 @@ suite('CrActionMenu', function() {
     menu.showAtPosition(Object.assign({}, config, {
       anchorAlignmentX: AnchorAlignment.CENTER,
     }));
-    var menuWidth = menu.offsetWidth;
-    var menuHeight = menu.offsetHeight;
+    const menuWidth = menu.offsetWidth;
+    const menuHeight = menu.offsetHeight;
     assertEquals(`${120 - menuWidth / 2}px`, menu.style.left);
     assertEquals('250px', menu.style.top);
     menu.close();
@@ -304,14 +304,14 @@ suite('CrActionMenu', function() {
   });
 
   suite('offscreen scroll positioning', function() {
-    var bodyHeight = 10000;
-    var bodyWidth = 20000;
-    var containerLeft = 5000;
-    var containerTop = 10000;
-    var containerWidth = 500;
-    var containerHeight = 500;
-    var menuWidth = 100;
-    var menuHeight = 200;
+    const bodyHeight = 10000;
+    const bodyWidth = 20000;
+    const containerLeft = 5000;
+    const containerTop = 10000;
+    const containerWidth = 500;
+    const containerHeight = 500;
+    const menuWidth = 100;
+    const menuHeight = 200;
 
     setup(function() {
       document.body.scrollTop = 0;
@@ -373,7 +373,7 @@ suite('CrActionMenu', function() {
     test('offscreen and out of scroll container viewport', function() {
       document.body.scrollLeft = bodyWidth;
       document.body.scrollTop = bodyHeight;
-      var container = document.querySelector('#container');
+      const container = document.querySelector('#container');
 
       container.scrollLeft = containerLeft;
       container.scrollTop = containerTop;
@@ -387,13 +387,13 @@ suite('CrActionMenu', function() {
     // Show the menu for an already onscreen button. The anchor should be
     // overridden so that no scrolling happens.
     test('onscreen forces anchor change', function() {
-      var rect = dots.getBoundingClientRect();
+      const rect = dots.getBoundingClientRect();
       document.body.scrollLeft = rect.right - document.body.clientWidth + 10;
       document.body.scrollTop = rect.bottom - document.body.clientHeight + 10;
 
       menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
-      var buttonWidth = dots.offsetWidth;
-      var buttonHeight = dots.offsetHeight;
+      const buttonWidth = dots.offsetWidth;
+      const buttonHeight = dots.offsetHeight;
       assertEquals(containerLeft - menuWidth + buttonWidth, menu.offsetLeft);
       assertEquals(containerTop - menuHeight + buttonHeight, menu.offsetTop);
       menu.close();

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

@@ -18,8 +18,8 @@ suite('cr-dialog', function() {
         <div slot="body"><button>button</button></div>
       </dialog>`;
 
-    var dialog = document.body.querySelector('dialog');
-    var button = document.body.querySelector('button');
+    const dialog = document.body.querySelector('dialog');
+    const button = document.body.querySelector('button');
 
     assertNotEquals(dialog, document.activeElement);
     assertNotEquals(button, document.activeElement);
@@ -40,13 +40,13 @@ suite('cr-dialog', function() {
         </div>
       </dialog>`;
 
-    var dialog = document.body.querySelector('dialog');
-    var actionButton = document.body.querySelector('.action-button');
+    const dialog = document.body.querySelector('dialog');
+    const actionButton = document.body.querySelector('.action-button');
 
     dialog.showModal();
 
     // MockInteractions triggers event listeners synchronously.
-    var clickedCounter = 0;
+    let clickedCounter = 0;
     actionButton.addEventListener('click', function() {
       clickedCounter++;
     });
@@ -57,7 +57,7 @@ suite('cr-dialog', function() {
 
     // Enter keys on other buttons should be ignored.
     clickedCounter = 0;
-    var otherButton = document.body.querySelector('#other-button');
+    const otherButton = document.body.querySelector('#other-button');
     assertTrue(!!otherButton);
     pressEnter(otherButton);
     assertEquals(0, clickedCounter);
@@ -79,16 +79,16 @@ suite('cr-dialog', function() {
         </div>
       </dialog>`;
 
-    var dialog = document.body.querySelector('dialog');
-    var hiddenButton = document.body.querySelector('#hidden');
-    var actionButton = document.body.querySelector('#active');
+    const dialog = document.body.querySelector('dialog');
+    const hiddenButton = document.body.querySelector('#hidden');
+    const actionButton = document.body.querySelector('#active');
     dialog.showModal();
 
     // MockInteractions triggers event listeners synchronously.
     hiddenButton.addEventListener('click', function() {
       assertNotReached('Hidden button received a click.');
     });
-    var clicked = false;
+    let clicked = false;
     actionButton.addEventListener('click', function() {
       clicked = true;
     });
@@ -108,17 +108,17 @@ suite('cr-dialog', function() {
         </div>
       </dialog>`;
 
-    var dialog = document.body.querySelector('dialog');
+    const dialog = document.body.querySelector('dialog');
 
-    var inputElement = document.body.querySelector('paper-input');
-    var otherElement = document.body.querySelector('foobar');
-    var actionButton = document.body.querySelector('.action-button');
+    const inputElement = document.body.querySelector('paper-input');
+    const otherElement = document.body.querySelector('foobar');
+    const actionButton = document.body.querySelector('.action-button');
     assertTrue(!!inputElement);
     assertTrue(!!otherElement);
     assertTrue(!!actionButton);
 
     // MockInteractions triggers event listeners synchronously.
-    var clickedCounter = 0;
+    let clickedCounter = 0;
     actionButton.addEventListener('click', function() {
       clickedCounter++;
     });
@@ -137,8 +137,8 @@ suite('cr-dialog', function() {
         <div slot="body"><button autofocus>button</button></div>
       </dialog>`;
 
-    var dialog = document.body.querySelector('dialog');
-    var button = document.body.querySelector('button');
+    const dialog = document.body.querySelector('dialog');
+    const button = document.body.querySelector('button');
 
     assertNotEquals(dialog, document.activeElement);
     assertNotEquals(button, document.activeElement);
@@ -158,9 +158,9 @@ suite('cr-dialog', function() {
         <div slot="body">body</div>
       </dialog>`;
 
-    var dialog = document.body.querySelector('dialog');
+    const dialog = document.body.querySelector('dialog');
     assertFalse(dialog.open);
-    var bodyContainer = dialog.$$('.body-container');
+    const bodyContainer = dialog.$$('.body-container');
     assertTrue(!!bodyContainer);
 
     // Waiting for 1ms because IntersectionObserver fires one message loop after
@@ -181,17 +181,17 @@ suite('cr-dialog', function() {
         </div>
       </dialog>`;
 
-    var dialog = document.body.querySelector('dialog');
-    var bodyContainer = dialog.$$('.body-container');
+    const dialog = document.body.querySelector('dialog');
+    const bodyContainer = dialog.$$('.body-container');
     assertTrue(!!bodyContainer);
 
     dialog.showModal();  // Attach the dialog for the first time here.
 
-    var observerCount = 0;
+    let observerCount = 0;
 
     // Needs to setup the observer before attaching, since InteractionObserver
     // calls callback before MutationObserver does.
-    var observer = new MutationObserver(function(changes) {
+    const observer = new MutationObserver(function(changes) {
       // Only care about class mutations.
       if (changes[0].attributeName != 'class')
         return;
@@ -229,20 +229,20 @@ suite('cr-dialog', function() {
         <div slot="title">title</div>
       </dialog>`;
 
-    var dialog = document.body.querySelector('dialog');
+    const dialog = document.body.querySelector('dialog');
     dialog.showModal();
 
     assertTrue(dialog.getCloseButton().hidden);
 
     // Hitting escape fires a 'cancel' event. Cancelling that event prevents the
     // dialog from closing.
-    var e = new Event('cancel', {cancelable: true});
+    let e = new Event('cancel', {cancelable: true});
     dialog.dispatchEvent(e);
     assertTrue(e.defaultPrevented);
 
     dialog.noCancel = false;
 
-    var e = new Event('cancel', {cancelable: true});
+    e = new Event('cancel', {cancelable: true});
     dialog.dispatchEvent(e);
     assertFalse(e.defaultPrevented);
   });

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

@@ -5,7 +5,7 @@
 /** @fileoverview Tests for shared Polymer elements. */
 
 /** @const {string} Path to source root. */
-var ROOT_PATH = '../../../../../';
+const ROOT_PATH = '../../../../../';
 
 // Polymer BrowserTest fixture.
 GEN_INCLUDE(

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

@@ -5,7 +5,7 @@
 /** @fileoverview Tests for shared Polymer elements which rely on focus. */
 
 /** @const {string} Path to source root. */
-var ROOT_PATH = '../../../../../';
+const ROOT_PATH = '../../../../../';
 
 // Polymer BrowserTest fixture.
 GEN_INCLUDE(

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

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 suite('cr-lazy-render', function() {
-  var lazy;
-  var bind;
+  let lazy;
+  let bind;
 
   suiteSetup(function() {
     return PolymerTest.importHtml(
@@ -13,7 +13,7 @@ suite('cr-lazy-render', function() {
 
   setup(function() {
     PolymerTest.clearBody();
-    var template =
+    const template =
         '<template is="dom-bind" id="bind">' +
         '  <template is="cr-lazy-render" id="lazy">' +
         '    <h1>' +
@@ -31,7 +31,7 @@ suite('cr-lazy-render', function() {
     assertFalse(!!document.body.querySelector('h1'));
     assertFalse(!!lazy.getIfExists());
 
-    var inner = lazy.get();
+    const inner = lazy.get();
     assertEquals('H1', inner.nodeName);
     assertEquals(inner, document.body.querySelector('h1'));
   });
@@ -39,7 +39,7 @@ suite('cr-lazy-render', function() {
   test('one-way binding works', function() {
     bind.name = 'Wings';
 
-    var inner = lazy.get();
+    const inner = lazy.get();
     assertNotEquals(-1, inner.textContent.indexOf('Wings'));
     bind.name = 'DC';
     assertNotEquals(-1, inner.textContent.indexOf('DC'));
@@ -48,8 +48,8 @@ suite('cr-lazy-render', function() {
   test('two-way binding works', function() {
     bind.checked = true;
 
-    var inner = lazy.get();
-    var checkbox = document.querySelector('paper-checkbox');
+    const inner = lazy.get();
+    const checkbox = document.querySelector('paper-checkbox');
     assertTrue(checkbox.checked);
     MockInteractions.tap(checkbox);
     assertFalse(checkbox.checked);

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

@@ -4,7 +4,7 @@
 
 /** @fileoverview Suite of tests for CrPolicyIndicatorBehavior. */
 suite('CrPolicyIndicatorBehavior', function() {
-  var TestIndicator;
+  let TestIndicator;
   suiteSetup(function() {
     TestIndicator = Polymer({
       is: 'test-indicator',
@@ -13,7 +13,7 @@ suite('CrPolicyIndicatorBehavior', function() {
     });
   });
 
-  var indicator;
+  let indicator;
   setup(function() {
     indicator = new TestIndicator;
   });

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

@@ -5,10 +5,10 @@
 /** @fileoverview Suite of tests for cr-policy-indicator. */
 suite('CrPolicyIndicator', function() {
   /** @type {!CrPolicyIndicatorElement|undefined} */
-  var indicator;
+  let indicator;
 
   /** @type {!CrTooltipIconElement|undefined} */
-  var icon;
+  let icon;
 
   setup(function() {
     PolymerTest.clearBody();

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

@@ -5,10 +5,10 @@
 /** @fileoverview Suite of tests for cr_policy-network-indicator. */
 suite('cr-policy-network-indicator', function() {
   /** @type {!CrPolicyNetworkIndicatorElement|undefined} */
-  var indicator;
+  let indicator;
 
   /** @type {!CrTooltipIconElement|undefined} */
-  var icon;
+  let icon;
 
   // Prevent 'Cannot read property of undefined' errors in cr_onc_types.js.
   chrome.networkingPrivate = {};

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

@@ -5,10 +5,10 @@
 /** @fileoverview Suite of tests for cr_policy-pref-indicator. */
 suite('CrPolicyPrefIndicator', function() {
   /** @type {!CrPolicyPrefIndicatorElement|undefined} */
-  var indicator;
+  let indicator;
 
   /** @type {!CrTooltipIconElement|undefined} */
-  var icon;
+  let icon;
 
   setup(function() {
     PolymerTest.clearBody();

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 /** @fileoverview Sets up strings used by policy indicator elements. */
+// eslint-disable-next-line no-var
 var CrPolicyStrings = CrPolicyStrings || {
   controlledSettingPolicy: 'policy',
   controlledSettingRecommendedMatches: 'matches',

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

@@ -4,7 +4,7 @@
 
 /** @fileoverview Suite of tests for cr-profile-avatar-selector. */
 cr.define('cr_profile_avatar_selector', function() {
-  var TestNames = {
+  const TestNames = {
     Basic: 'basic',
     Focus: 'Ignores modified key events',
   };
@@ -12,11 +12,11 @@ cr.define('cr_profile_avatar_selector', function() {
   function registerTests() {
     suite('cr-profile-avatar-selector', function() {
       /** @type {CrProfileAvatarSelectorElement} */
-      var avatarSelector = null;
+      let avatarSelector = null;
 
       /** @return {CrProfileAvatarSelectorElement} */
       function createElement() {
-        var avatarSelector =
+        const avatarSelector =
             document.createElement('cr-profile-avatar-selector');
         avatarSelector.avatars =
             [{url: 'chrome://avatar1.png', label: 'avatar1'},
@@ -59,7 +59,7 @@ cr.define('cr_profile_avatar_selector', function() {
         });
 
         test('Can select avatar', function() {
-          var items = getGridItems();
+          const items = getGridItems();
 
           // Simulate tapping the third avatar.
           MockInteractions.tap(items[2]);
@@ -74,8 +74,8 @@ cr.define('cr_profile_avatar_selector', function() {
       // Run in CrElementsProfileAvatarSelectorFocusTest.All as an
       // interactive_ui_test.
       test(TestNames.Focus, function() {
-        var selector = avatarSelector.$['avatar-grid'];
-        var items = getGridItems();
+        const selector = avatarSelector.$['avatar-grid'];
+        const items = getGridItems();
 
         items[0].focus();
         assertTrue(items[0].focused);

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

@@ -3,9 +3,9 @@
 // found in the LICENSE file.
 
 suite('cr-scrollable-behavior', function() {
-  /** @type {CrScrollableListElement} */ var testElement;
-  /** @type {HTMLDivElement} */ var container;
-  /** @type {IronListElement} */ var ironList;
+  /** @type {CrScrollableListElement} */ let testElement;
+  /** @type {HTMLDivElement} */ let container;
+  /** @type {IronListElement} */ let ironList;
 
   suiteSetup(function() {
     document.body.innerHTML = `
@@ -82,7 +82,7 @@ suite('cr-scrollable-behavior', function() {
     scrollToIndex(2);
     assertTrue(container.classList.contains('can-scroll'));
     assertTrue(container.classList.contains('is-scrolled'));
-    var scrollTop = container.scrollTop;
+    const scrollTop = container.scrollTop;
     testElement.saveScroll(ironList);
     testElement.items = ['apple', 'bannana', 'cactus', 'cucumber', 'doughnut'];
     testElement.restoreScroll(ironList);

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

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 suite('cr-toast', function() {
-  var toast;
+  let toast;
 
   setup(function() {
     PolymerTest.clearBody();

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

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 suite('cr-toggle', function() {
-  var toggle;
+  let toggle;
 
   setup(function() {
     PolymerTest.clearBody();
@@ -68,10 +68,10 @@ suite('cr-toggle', function() {
     // Simulate events in the same order they are fired by the browser.
     // Need to provide a valid |pointerId| for setPointerCapture() to not throw
     // an error.
-    var xStart = 100;
+    const xStart = 100;
     toggle.dispatchEvent(new PointerEvent(
         'pointerdown', {pointerId: 1, clientX: xStart}));
-    var xEnd = xStart;
+    let xEnd = xStart;
     if (moveDirection) {
       xEnd = moveDirection > 0 ? xStart + diff : xStart - diff;
       toggle.dispatchEvent(new PointerEvent(
@@ -101,7 +101,7 @@ suite('cr-toggle', function() {
   // Test that the control is toggled when the user taps on it (no movement
   // between pointerdown and pointerup).
   test('ToggleByPointerTap', function() {
-    var whenChanged = test_util.eventToPromise('change', toggle);
+    let whenChanged = test_util.eventToPromise('change', toggle);
     triggerPointerDownMoveUpTapSequence(0 /* no pointermove */);
     return whenChanged.then(function() {
       assertChecked();
@@ -116,7 +116,7 @@ suite('cr-toggle', function() {
   // Test that the control is toggled if the user moves the pointer by a
   // MOVE_THRESHOLD_PX pixels accidentally (shaky hands) in any direction.
   test('ToggleByShakyPointerTap', function() {
-    var whenChanged = test_util.eventToPromise('change', toggle);
+    let whenChanged = test_util.eventToPromise('change', toggle);
     triggerPointerDownMoveUpTapSequence(
         1 /* right */, toggle.MOVE_THRESHOLD_PX - 1);
     return whenChanged.then(function() {
@@ -133,7 +133,7 @@ suite('cr-toggle', function() {
   // Test that the control is toggled when the user moves the pointer while
   // holding down.
   test('ToggleByPointerMove', function() {
-    var whenChanged = test_util.eventToPromise('change', toggle);
+    let whenChanged = test_util.eventToPromise('change', toggle);
     triggerPointerDownMoveUpTapSequence(
         1 /* right */, toggle.MOVE_THRESHOLD_PX);
     return whenChanged.then(function() {
@@ -157,7 +157,7 @@ suite('cr-toggle', function() {
   // Test that the control is toggled when the user presses the 'Enter' or
   // 'Space' key.
   test('ToggleByKey', function() {
-    var whenChanged = test_util.eventToPromise('change', toggle);
+    let whenChanged = test_util.eventToPromise('change', toggle);
     triggerKeyPressEvent('Enter');
     return whenChanged.then(function() {
       assertChecked();

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

@@ -7,10 +7,10 @@ cr.define('cr_toolbar_search_field', function() {
   function registerTests() {
     suite('cr-toolbar-search-field', function() {
       /** @type {?CrToolbarSearchFieldElement} */
-      var field = null;
+      let field = null;
 
       /** @type {?Array<string>} */
-      var searches = null;
+      let searches = null;
 
       /** @param {string} term */
       function simulateSearch(term) {
@@ -38,8 +38,8 @@ cr.define('cr_toolbar_search_field', function() {
       // Test that no initial 'search-changed' event is fired during
       // construction and initialization of the cr-toolbar-search-field element.
       test('no initial search-changed event', function() {
-        var didFire = false;
-        var onSearchChanged = function () { didFire = true; };
+        let didFire = false;
+        const onSearchChanged = function () { didFire = true; };
 
         // Need to attach listener event before the element is created, to catch
         // the unnecessary initial event.
@@ -76,7 +76,7 @@ cr.define('cr_toolbar_search_field', function() {
         Polymer.dom.flush();
         assertTrue(field.hasSearchText);
 
-        var clearSearch = field.$$('#clearSearch');
+        const clearSearch = field.$$('#clearSearch');
         clearSearch.focus();
         MockInteractions.tap(clearSearch);
         assertTrue(field.showingSearch);
@@ -124,7 +124,7 @@ cr.define('cr_toolbar_search_field', function() {
       // Tests that calling setValue() from within a 'search-changed' callback
       // does not result in an infinite loop.
       test('no infinite loop', function() {
-        var counter = 0;
+        let counter = 0;
         field.addEventListener('search-changed', function(event) {
           counter++;
           // Calling setValue() with the already existing value should not
@@ -155,7 +155,7 @@ cr.define('cr_toolbar_search_field', function() {
         assertTrue(field.hasSearchText);
         Polymer.dom.flush();
 
-        var clearSearch = field.$$('#clearSearch');
+        const clearSearch = field.$$('#clearSearch');
         assertFalse(clearSearch.hidden);
         assertTrue(field.showingSearch);
       });