WebUI Polymer 2: Fixing some Settings tests to work with Polymer 2, part 1.

CrElementsLazyRenderTest.All
CrElementsPolicyIndicatorBehaviorTest.All
CrSettingsDropdownMenuTest.All
CrSettingsPeoplePageTest.All
CrSettingsPrefsTest.All
CrSettingsSystemPageTest.All

Note that in Polymer 2 (unlike Polymer 1), an element's local DOM is not ready,
until after the element is attached to the document. Several tests currently:

 - Either test UI elements not in the document, or
 - Interact with UI elements before they are appended to the document.

which leads to failures.

Bug: 738611
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: If8b05c283afa18b0e08b16365d1a8f53352765e6
Reviewed-on: https://chromium-review.googlesource.com/1098299Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#568255}

chrome/browser/resources/settings/controls/extension_controlled_indicator.js

@@ -20,11 +20,14 @@ Polymer({
    * @private
    */
   getLabel_: function(extensionId, extensionName) {
-    const manageUrl = 'chrome://extensions/?id=' + assert(this.extensionId);
+    if (this.extensionId == undefined || this.extensionName == undefined)
+      return '';
+
+    const manageUrl = 'chrome://extensions/?id=' + this.extensionId;
     return this.i18nAdvanced('controlledByExtension', {
       substitutions:
-          ['<a href="' + manageUrl + '" target="_blank">' +
-           assert(this.extensionName) + '</a>'],
+          ['<a href="' + manageUrl + '" target="_blank">' + this.extensionName +
+           '</a>'],
     });
   },
 

chrome/browser/resources/settings/people_page/people_page.js

@@ -456,7 +456,10 @@ Polymer({
    * @private
    */
   shouldShowSyncAccountControl_: function() {
-    return !!this.diceEnabled_ && !!this.syncStatus.syncSystemEnabled &&
+    if (this.syncStatus == undefined)
+      return false;
+
+    return this.diceEnabled_ && !!this.syncStatus.syncSystemEnabled &&
         !!this.syncStatus.signinAllowed;
   },
   // </if>

chrome/browser/resources/settings/people_page/sync_account_control.js

@@ -231,6 +231,9 @@ Polymer({
    * @private
    */
   computeShouldShowAvatarRow_: function() {
+    if (this.storedAccounts_ == undefined)
+      return false;
+
     return this.syncStatus.signedIn || this.storedAccounts_.length > 0;
   },
 
@@ -290,6 +293,9 @@ Polymer({
 
   /** @private */
   onShownAccountShouldChange_: function() {
+    if (this.storedAccounts_ == undefined)
+      return;
+
     if (this.syncStatus.signedIn) {
       for (let i = 0; i < this.storedAccounts_.length; i++) {
         if (this.storedAccounts_[i].email == this.syncStatus.signedInUsername) {

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

@@ -14,19 +14,23 @@ suite('cr-lazy-render', function() {
   setup(function() {
     PolymerTest.clearBody();
     const template = `
-        <template is="dom-bind" id="bind">
-          <cr-lazy-render id="lazy">
-            <template>
-              <h1>
-                <cr-checkbox checked="{{checked}}"></cr-checkbox>
-                {{name}}
-              </h1>
-            </template>
-          </cr-lazy-render>
-        </template>`;
+        <dom-bind>
+          <template is="dom-bind">
+            <cr-lazy-render id="lazy">
+              <template>
+                <h1>
+                  <cr-checkbox checked="{{checked}}"></cr-checkbox>
+                  {{name}}
+                </h1>
+              </template>
+            </cr-lazy-render>
+          </template>
+        </dom-bind>`;
     document.body.innerHTML = template;
     lazy = document.getElementById('lazy');
-    bind = document.getElementById('bind');
+    // TODO(dpapad): Remove conditional when Polymer 2 migration has completed.
+    bind = document.querySelector(
+        Polymer.DomBind ? 'dom-bind' : 'template[is=\'dom-bind\']');
   });
 
   test('stamps after get()', function() {

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

@@ -4,9 +4,8 @@
 
 /** @fileoverview Suite of tests for CrPolicyIndicatorBehavior. */
 suite('CrPolicyIndicatorBehavior', function() {
-  let TestIndicator;
   suiteSetup(function() {
-    TestIndicator = Polymer({
+    Polymer({
       is: 'test-indicator',
 
       behaviors: [CrPolicyIndicatorBehavior],
@@ -15,7 +14,9 @@ suite('CrPolicyIndicatorBehavior', function() {
 
   let indicator;
   setup(function() {
-    indicator = new TestIndicator;
+    PolymerTest.clearBody();
+    indicator = document.createElement('test-indicator');
+    document.body.appendChild(indicator);
   });
 
   test('default indicator is blank', function() {

chrome/test/data/webui/settings/dropdown_menu_tests.js

@@ -35,10 +35,10 @@ cr.define('settings_dropdown_menu', function() {
     setup(function() {
       PolymerTest.clearBody();
       dropdown = document.createElement('settings-dropdown-menu');
+      document.body.appendChild(dropdown);
       selectElement = assert(dropdown.$$('select'));
       const options = selectElement.options;
       customOption = assert(options[options.length - 1]);
-      document.body.appendChild(dropdown);
     });
 
     test('with number options', function testNumberOptions() {

chrome/test/data/webui/settings/prefs_tests.js

@@ -81,6 +81,7 @@ cr.define('settings_prefs', function() {
       CrSettingsPrefs.deferInitialization = true;
 
       prefs = document.createElement('settings-prefs');
+      document.body.appendChild(prefs);
       prefs.initialize(fakeApi);
 
       // getAllPrefs is asynchronous, so return the prefs promise.