[CrOS MultiDevice]: Add browsertests for subpage

As the multidevice Settings UI subpage fills up, it will need a few
browsertests, so this CL is just to set that up so the infrastructure
is there and to add a couple basic tests for the existing contents.

Change-Id: Ie628de77d6242c521062a0c7a82ad5cb90a79c1a
Reviewed-on: https://chromium-review.googlesource.com/1165855
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#581445}

chrome/browser/resources/settings/multidevice_page/multidevice_feature_item.html

@@ -19,7 +19,8 @@
         padding-inline-start: 18px;
       }
     </style>
-    <div class="settings-box two-line"
+    <div id="card"
+        class="settings-box two-line"
         on-click="handleItemClick_"
         actionable$="[[hasSubpageClickHandler_(subpageRoute)]]">
       <iron-icon icon="[[iconName]]"></iron-icon>
@@ -37,7 +38,7 @@
         </paper-icon-button-light>
         <div class="separator"></div>
       </template>
-      <slot name="feature-contoller"></slot>
+      <slot name="feature-controller"></slot>
     </div>
   </template>
   <script src="multidevice_feature_item.js"></script>

chrome/browser/resources/settings/multidevice_page/multidevice_subpage.html

@@ -36,7 +36,8 @@
         if="[[shouldShowIndividualFeatures_(pageContentData)]]"
         restamp>
       <div class="feature-item-container">
-        <settings-multidevice-feature-item icon-name="settings:smart-lock"
+        <settings-multidevice-feature-item id="smart-lock-item"
+            icon-name="settings:smart-lock"
             subpage-route="[[routes.LOCK_SCREEN]]"
             feature-name="$i18n{multideviceSmartLockItemTitle}"
             feature-summary-html="$i18n{multideviceSmartLockItemSummary}">
@@ -49,16 +50,21 @@
             </settings-multidevice-feature-toggle>
           </div>
         </settings-multidevice-feature-item>
-        <settings-multidevice-feature-item icon-name="settings:sms-connect"
+        <settings-multidevice-feature-item id="android-messages-item"
+            icon-name="settings:sms-connect"
             feature-name="$i18n{multideviceAndroidMessagesItemTitle}"
             feature-summary-html="$i18n{multideviceAndroidMessagesItemSummary}">
-          <div slot="feature-contoller">
-            <template is="dom-if" if="[[androidMessagesRequiresSetup_]]">
+          <div slot="feature-controller">
+            <template is="dom-if"
+                if="[[androidMessagesRequiresSetup_]]"
+                restamp>
               <paper-button on-click="handleAndroidMessagesButtonClick_">
                 $i18n{multideviceSetupButton}
               </paper-button>
             </template>
-            <template is="dom-if" if="[[!androidMessagesRequiresSetup_]]">
+            <template is="dom-if"
+                if="[[!androidMessagesRequiresSetup_]]"
+                restamp>
               <settings-multidevice-feature-toggle
                   pref="{{prefs.multidevice.sms_connect_enabled}}">
               </settings-multidevice-feature-toggle>

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

@@ -1956,6 +1956,29 @@ TEST_F('CrSettingsMultidevicePageTest', 'All', function() {
   mocha.run();
 });
 
+/**
+ * Test fixture for the multidevice settings subpage.
+ * @constructor
+ * @extends {CrSettingsBrowserTest}
+ */
+function CrSettingsMultideviceSubpageTest() {}
+
+CrSettingsMultideviceSubpageTest.prototype = {
+  __proto__: CrSettingsBrowserTest.prototype,
+
+  /** @override */
+  browsePreload: 'chrome://settings/multidevice_page/multidevice_subpage.html',
+
+  /** @override */
+  extraLibraries: CrSettingsBrowserTest.prototype.extraLibraries.concat([
+    'multidevice_subpage_tests.js',
+  ]),
+};
+
+TEST_F('CrSettingsMultideviceSubpageTest', 'All', function() {
+  mocha.run();
+});
+
 /**
  * Test fixture for the Linux for Chromebook (Crostini) page.
  * @constructor

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

+// Copyright 2018 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.
+
+suite('Multidevice', function() {
+  let multideviceSubpage = null;
+  // Although HOST_SET_MODES is effectively a constant, it cannot reference the
+  // enum settings.MultiDeviceSettingsMode from here so its initialization is
+  // deferred to the suiteSetup function.
+  let HOST_SET_MODES;
+  const HOST_DEVICE = {
+    name: 'Pixel XL',
+  };
+
+  function setPageContentData(newMode) {
+    multideviceSubpage.pageContentData = {
+      mode: newMode,
+      hostDevice: HOST_DEVICE,
+    };
+    Polymer.dom.flush();
+  }
+
+  suiteSetup(function() {
+    HOST_SET_MODES = [
+      settings.MultiDeviceSettingsMode.HOST_SET_WAITING_FOR_SERVER,
+      settings.MultiDeviceSettingsMode.HOST_SET_WAITING_FOR_VERIFICATION,
+      settings.MultiDeviceSettingsMode.HOST_SET_VERIFIED,
+    ];
+  });
+
+  setup(function() {
+    multideviceSubpage = document.createElement('settings-multidevice-subpage');
+
+    setPageContentData(settings.MultiDeviceSettingsMode.HOST_SET_VERIFIED);
+    multideviceSubpage.prefs = {
+      multidevice: {sms_connect_enabled: {value: true}},
+      multidevice_setup: {suite_enabled: {value: true}},
+    };
+
+    document.body.appendChild(multideviceSubpage);
+    Polymer.dom.flush();
+  });
+
+  teardown(function() {
+    multideviceSubpage.remove();
+  });
+
+  test('individual features appear only if host is verified', function() {
+    for (const mode of HOST_SET_MODES) {
+      setPageContentData(mode);
+      assertEquals(
+          !!multideviceSubpage.$$('settings-multidevice-feature-item'),
+          mode == settings.MultiDeviceSettingsMode.HOST_SET_VERIFIED);
+    }
+  });
+
+  test('clicking EasyUnlock item routes to screen lock page', function() {
+    multideviceSubpage.$$('#smart-lock-item').$.card.click();
+    assertEquals(settings.getCurrentRoute(), settings.routes.LOCK_SCREEN);
+  });
+
+  test('AndroidMessages item shows correct input control', function() {
+    const inputControl = multideviceSubpage.$$('[slot=feature-controller]');
+
+    multideviceSubpage.androidMessagesRequiresSetup_ = true;
+    Polymer.dom.flush();
+    assertTrue(!!inputControl.querySelector('paper-button'));
+    assertFalse(
+        !!inputControl.querySelector('settings-multidevice-feature-toggle'));
+
+    multideviceSubpage.androidMessagesRequiresSetup_ = false;
+    Polymer.dom.flush();
+    assertFalse(!!inputControl.querySelector('paper-button'));
+    assertTrue(
+        !!inputControl.querySelector('settings-multidevice-feature-toggle'));
+  });
+});