Settings People Revamp: Add tests for ChromeOS Change Picture.

Adds a browsertest for ChromeOS Change Picture Settings subpage.

Modelled after the bluetooth_page_browsertest_chromeos.

BUG=563721

Review URL: https://codereview.chromium.org/1585963004

Cr-Commit-Position: refs/heads/master@{#370748}

chrome/browser/resources/settings/people_page/change_picture.html

@@ -11,21 +11,21 @@
     <div class="settings-box">
       <div class="split">
         <div id="availableIcons">
-          <paper-button toggles
+          <paper-button id="profile-image" toggles
               active="{{isActiveImage_(profileImageUrl_, selectedImageUrl_)}}"
               on-tap="onProfileImageTap_">
             <img class="user-image" src="[[profileImageUrl_]]"
                 alt="[[i18n('profilePhotoLoading')]]">
           </paper-button>
           <template is="dom-if" if="[[oldImageUrl_]]">
-            <paper-button toggles
+            <paper-button id="old-image" toggles
                 active="{{isActiveImage_(oldImageUrl_, selectedImageUrl_)}}"
                 on-tap="onOldImageTap_">
               <img class="user-image" src="[[oldImageUrl_]]">
             </paper-button>
           </template>
           <template is="dom-repeat" items="[[defaultImages_]]">
-            <paper-button toggles
+            <paper-button class="default-image" toggles
                 active="{{isActiveImage_(item.url, selectedImageUrl_)}}"
                 on-tap="onDefaultImageTap_" data-image-url$="[[item.url]]">
               <img class="user-image" src="[[item.url]]" alt="[[item.title]]">

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

@@ -2,6 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+cr.define('settings_test', function() {
+  var changePictureOptions = settings_test.changePictureOptions || {
+    /**
+     * True if property changes should fire events for testing purposes.
+     * @type {boolean}
+     */
+    notifyPropertyChangesForTest: false,
+  };
+  return {changePictureOptions: changePictureOptions};
+});
+
 /**
  * @fileoverview
  * 'settings-change-picture' is the settings subpage containing controls to
@@ -22,7 +33,10 @@ Polymer({
      * The currently selected profile image URL. May be a data URL.
      * @private {string}
      */
-    selectedImageUrl_: String,
+    selectedImageUrl_: {
+      type: String,
+      notify: settings_test.changePictureOptions.notifyPropertyChangesForTest,
+    },
 
     /**
      * The url of the 'old' image, which is the existing image sourced from

chrome/browser/ui/webui/settings/chromeos/change_picture_handler.cc

@@ -276,7 +276,7 @@ void ChangePictureHandler::HandleSelectImage(const base::ListValue* args) {
     NOTREACHED();
     return;
   }
-  DCHECK(!image_url.empty());
+  // |image_url| may be empty unless |image_type| is "default".
   DCHECK(!image_type.empty());
 
   UserImageManager* user_image_manager =

chrome/chrome_tests.gypi

@@ -993,6 +993,7 @@
       'test/data/webui/settings/appearance_browsertest.js',
       'test/data/webui/settings/basic_page_browsertest.js',
       'test/data/webui/settings/bluetooth_page_browsertest_chromeos.js',
+      'test/data/webui/settings/change_picture_browsertest_chromeos.js',
       'test/data/webui/settings/cr_settings_browsertest.js',
       'test/data/webui/settings/on_startup_browsertest.js',
       'test/data/webui/settings/settings_page_browsertest.js',
@@ -2382,6 +2383,7 @@
             'test/data/webui/certificate_viewer_dialog_test.js',
             'test/data/webui/certificate_viewer_ui_test-inl.h',
             'test/data/webui/settings/bluetooth_page_browsertest_chromeos.js',
+            'test/data/webui/settings/change_picture_browsertest_chromeos.js',
           ],
         }],
         ['configuration_policy==1', {

chrome/test/BUILD.gn

@@ -636,6 +636,7 @@ if (!is_android) {
       sources -= [
         "data/webui/certificate_viewer_dialog_test.js",
         "data/webui/settings/bluetooth_page_browsertest_chromeos.js",
+        "data/webui/settings/change_picture_browsertest_chromeos.js",
       ]
     }
     if (!enable_app_list) {

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

+// Copyright 2015 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.
+
+/** @fileoverview Suite of tests for settings-change-picture. */
+
+GEN_INCLUDE(['settings_page_browsertest.js']);
+
+/**
+ * @constructor
+ * @extends {SettingsPageBrowserTest}
+*/
+function SettingsChangePictureBrowserTest() {
+}
+
+SettingsChangePictureBrowserTest.prototype = {
+  __proto__: SettingsPageBrowserTest.prototype,
+
+  /** @override */
+  browsePreload: 'chrome://md-settings/changePicture',
+
+  /** @override */
+  preLoad: function() {
+    cr.define('settings_test', function() {
+      var changePictureOptions = {
+        /**
+         * True if property changes should fire events for testing purposes.
+         * @type {boolean}
+         */
+        notifyPropertyChangesForTest: true,
+      };
+      return {changePictureOptions: changePictureOptions};
+    });
+  }
+};
+
+// Times out on debug builders and may time out on memory bots because
+// the Settings page can take several seconds to load in a Release build
+// and several times that in a Debug build. See https://crbug.com/558434.
+GEN('#if defined(MEMORY_SANITIZER) || !defined(NDEBUG)');
+GEN('#define MAYBE_ChangePicture DISABLED_ChangePicture');
+GEN('#else');
+GEN('#define MAYBE_ChangePicture ChangePicture');
+GEN('#endif');
+
+// Runs change picture tests.
+TEST_F('SettingsChangePictureBrowserTest', 'MAYBE_ChangePicture', function() {
+  var basic = this.getPage('basic');
+  assertTrue(!!basic);
+  var peopleSection = this.getSection(basic, 'people');
+  assertTrue(!!peopleSection);
+  var peoplePage = peopleSection.querySelector('settings-people-page');
+  assertTrue(!!peoplePage);
+  var changePicture = peoplePage.$$('settings-change-picture');
+  assertTrue(!!changePicture);
+
+  /**
+   * Registers a callback to be called once when the selected image URL changes.
+   * @param {!function()} callback
+   */
+  function whenSelectedImageUrlChanged() {
+    return new Promise(function(resolve, reject) {
+      var handler = function() {
+        changePicture.removeEventListener('selected-image-url_-changed',
+                                          handler);
+        resolve();
+      };
+      changePicture.addEventListener('selected-image-url_-changed', handler);
+    });
+  }
+
+  suite('SettingsChangePicturePage', function() {
+    setup(function() {
+      // Reset the selected image to nothing.
+      changePicture.selectedImageUrl_ = '';
+    });
+
+    test('select profile image', function() {
+      var profileImage = changePicture.$$('#profile-image');
+      assertTrue(!!profileImage);
+
+      MockInteractions.tap(profileImage);
+
+      return whenSelectedImageUrlChanged().then(function() {
+        expectEquals(changePicture.selectedImageUrl_,
+                     changePicture.profileImageUrl_);
+
+        Polymer.dom.flush();
+        expectTrue(profileImage.active);
+      });
+    });
+
+    test('select old images', function() {
+      // By default there is no old image.
+      var oldImage = changePicture.$$('#old-image');
+      assertFalse(!!oldImage);
+
+      // The promise must start listening for the property change before
+      // we make the fake API call.
+      var promise = whenSelectedImageUrlChanged();
+
+      settings.ChangePicturePage.receiveOldImage('fake-old-image.jpg');
+
+      return promise.then(function() {
+        // Expect the old image to be selected once an old image is sent via
+        // the native interface.
+        expectEquals(changePicture.selectedImageUrl_,
+                     changePicture.oldImageUrl_);
+
+        Polymer.dom.flush();
+        var oldImage = changePicture.$$('#old-image');
+        assertTrue(!!oldImage);
+        expectTrue(oldImage.active);
+      });
+    });
+
+    test('select first default image', function() {
+      var firstDefaultImage = changePicture.$$('.default-image');
+      console.log(firstDefaultImage);
+      assertTrue(!!firstDefaultImage);
+
+      MockInteractions.tap(firstDefaultImage);
+
+      return whenSelectedImageUrlChanged().then(function() {
+        // Expect the first default image to be selected.
+        expectEquals(changePicture.selectedImageUrl_,
+                     changePicture.defaultImages_[0].url);
+
+        Polymer.dom.flush();
+        expectTrue(firstDefaultImage.active);
+      });
+    });
+  });
+
+  // Run all registered tests.
+  mocha.run();
+});