[ProfilePicker]: Add local profile customization tests.

Bug: 1115056
Change-Id: Icf028b3510dbc12507a5c89cc9177325bf4c86c7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2514424
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834274}

chrome/browser/resources/signin/profile_picker/profile_picker.js

 import './profile_picker_app.js';
 
 export {ensureLazyLoaded} from './ensure_lazy_loaded.js';
-export {ManageProfilesBrowserProxy, ManageProfilesBrowserProxyImpl, ProfileState} from './manage_profiles_browser_proxy.js';
-export {navigateTo, NavigationBehavior, Routes} from './navigation_behavior.js';
+export {AutogeneratedThemeColorInfo, ManageProfilesBrowserProxy, ManageProfilesBrowserProxyImpl, ProfileState} from './manage_profiles_browser_proxy.js';
+export {navigateTo, navigateToStep, NavigationBehavior, ProfileCreationSteps, Routes} from './navigation_behavior.js';

chrome/test/data/webui/BUILD.gn

@@ -30,6 +30,10 @@ if (include_js_tests) {
       "tab_search/tab_search_interactive_ui_tests.js",
     ]
 
+    if (!is_chromeos_ash) {
+      sources += [ "signin/local_profile_customization_interactive_ui_test.js" ]
+    }
+
     gen_include_files = [
       "polymer_browser_test_base.js",
       "polymer_interactive_ui_test.js",

chrome/test/data/webui/signin/BUILD.gn

@@ -15,15 +15,29 @@ js_type_check("closure_compile") {
                   ]
   deps = [
     ":dice_web_signin_intercept_test",
-    ":profile_creation_flow_test",
+    ":local_profile_customization_test",
     ":profile_customization_test",
     ":profile_picker_app_test",
+    ":profile_type_choice_test",
     ":test_dice_web_signin_intercept_browser_proxy",
     ":test_manage_profiles_browser_proxy",
     ":test_profile_customization_browser_proxy",
   ]
 }
 
+js_library("local_profile_customization_test") {
+  deps = [
+    ":test_manage_profiles_browser_proxy",
+    "..:chai_assert",
+    "..:test_util.m",
+    "//chrome/browser/resources/signin/profile_picker:lazy_load",
+    "//chrome/browser/resources/signin/profile_picker:profile_picker",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:load_time_data.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
+
 js_library("dice_web_signin_intercept_test") {
   deps = [
     ":test_dice_web_signin_intercept_browser_proxy",
@@ -35,7 +49,7 @@ js_library("dice_web_signin_intercept_test") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 
-js_library("profile_creation_flow_test") {
+js_library("profile_type_choice_test") {
   deps = [
     "..:chai_assert",
     "..:test_util.m",

chrome/test/data/webui/signin/local_profile_customization_focus_test.js

+// Copyright 2020 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.
+
+import {ensureLazyLoaded, ManageProfilesBrowserProxyImpl, navigateTo, Routes} from 'chrome://profile-picker/profile_picker.js';
+import {webUIListenerCallback} from 'chrome://resources/js/cr.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {assertEquals, assertTrue} from '../chai_assert.js';
+import {flushTasks, waitBeforeNextRender, whenAttributeIs, whenCheck} from '../test_util.m.js';
+
+import {TestManageProfilesBrowserProxy} from './test_manage_profiles_browser_proxy.js';
+
+suite('LocalProfileCustomizationFocusTest', function() {
+  /** @type {!ProfilePickerAppElement} */
+  let testElement;
+
+  /** @type {!TestManageProfilesBrowserProxy} */
+  let browserProxy;
+
+  async function resetTestElement(route) {
+    document.body.innerHTML = '';
+    navigateTo(route);
+    testElement = /** @type {!ProfilePickerAppElement} */ (
+        document.createElement('profile-picker-app'));
+    document.body.appendChild(testElement);
+    await waitBeforeNextRender(testElement);
+  }
+
+  setup(function() {
+    browserProxy = new TestManageProfilesBrowserProxy();
+    ManageProfilesBrowserProxyImpl.instance_ = browserProxy;
+    return resetTestElement(Routes.MAIN);
+  });
+
+
+  /** @param {!ProfilePickerMainViewElement} mainView */
+  async function setupMainView(mainView) {
+    assertTrue(!!mainView);
+    await whenCheck(mainView, () => mainView.classList.contains('active'));
+    await browserProxy.whenCalled('initializeMainView');
+    webUIListenerCallback(
+        'profiles-list-changed', [browserProxy.profileSample]);
+    flushTasks();
+  }
+
+  /** @param {!ProfilePickerMainViewElement} mainView */
+  function navigateToProfileCreationFromMainView(mainView) {
+    mainView.$$('#addProfile').focus();
+    mainView.$$('#addProfile').querySelectorAll('cr-icon-button')[0].click();
+    flush();
+  }
+
+  async function setupProfileCreation() {
+    await Promise.all([
+      browserProxy.whenCalled('getNewProfileSuggestedThemeInfo'),
+      ensureLazyLoaded(),
+    ]);
+    browserProxy.reset();
+    flush();
+    await waitBeforeNextRender(testElement);
+  }
+
+  /**
+   * @param {boolean} focused
+   * @param {boolean} valid
+   */
+  async function verifyProfileName(focused, valid) {
+    const profileNameInput = /** @type {!CrInputElement} */ (
+        testElement.$$('local-profile-customization').$$('#nameInput'));
+    assertTrue(!!profileNameInput);
+    await whenAttributeIs(profileNameInput, 'focused_', focused ? '' : null);
+    assertEquals(!valid, profileNameInput.invalid);
+  }
+
+  test('ProfileCreationFlowWithSigninPromo', async function() {
+    assertTrue(loadTimeData.getValue('isBrowserSigninAllowed'));
+    navigateTo(Routes.NEW_PROFILE);
+    await setupProfileCreation();
+    const choice = /** @type {!ProfileTypeChoiceElement} */ (
+        testElement.$$('profile-type-choice'));
+    assertTrue(!!choice);
+    await whenCheck(choice, () => choice.classList.contains('active'));
+    choice.$$('#notNowButton').focus();
+    choice.$$('#notNowButton').click();
+    flush();
+    await waitBeforeNextRender(testElement);
+    const customization =
+        /** @type {!LocalProfileCustomizationElement} */ (
+            testElement.$$('local-profile-customization'));
+    assertTrue(!!customization);
+    await whenCheck(
+        customization, () => customization.classList.contains('active'));
+    await verifyProfileName(true, true);
+    customization.$$('#backButton').focus();
+    await verifyProfileName(false, false);
+
+    // Navigate back and in again.
+    customization.$$('#backButton').click();
+    flush();
+    await whenCheck(choice, () => choice.classList.contains('active'));
+    choice.$$('#notNowButton').focus();
+    choice.$$('#notNowButton').click();
+    flush();
+    await whenCheck(
+        customization, () => customization.classList.contains('active'));
+    await verifyProfileName(true, false);
+    customization.$$('#nameInput').value = 'Work';
+    assertFalse(customization.$$('#nameInput').invalid);
+  });
+
+  test('BrowserSigninNotAllowed', async function() {
+    loadTimeData.overrideValues({
+      isBrowserSigninAllowed: false,
+    });
+    await resetTestElement(Routes.MAIN);
+    const mainView = /** @type {!ProfilePickerMainViewElement} */ (
+        testElement.$$('profile-picker-main-view'));
+    await setupMainView(mainView);
+    navigateToProfileCreationFromMainView(mainView);
+    await setupProfileCreation();
+    let customization =
+        /** @type {!LocalProfileCustomizationElement} */ (
+            testElement.$$('local-profile-customization'));
+    await whenCheck(
+        customization, () => customization.classList.contains('active'));
+    await verifyProfileName(true, true);
+    customization.$$('#backButton').focus();
+    await verifyProfileName(false, false);
+    customization.$$('#backButton').click();
+    flush();
+    await whenCheck(mainView, () => mainView.classList.contains('active'));
+    navigateToProfileCreationFromMainView(mainView);
+    await whenCheck(
+        customization, () => customization.classList.contains('active'));
+    await verifyProfileName(true, false);
+
+    // Open the profile creation flow directly.
+    await resetTestElement(Routes.NEW_PROFILE);
+    await setupProfileCreation();
+    customization =
+        /** @type {!LocalProfileCustomizationElement} */ (
+            testElement.$$('local-profile-customization'));
+    await whenCheck(
+        customization, () => customization.classList.contains('active'));
+    await verifyProfileName(true, true);
+  });
+});

chrome/test/data/webui/signin/local_profile_customization_interactive_ui_test.js

+// Copyright 2020 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 Test suite for the WebUI tab search. */
+
+GEN_INCLUDE(['//chrome/test/data/webui/polymer_interactive_ui_test.js']);
+
+GEN('#include "content/public/test/browser_test.h"');
+GEN('#include "chrome/browser/ui/ui_features.h"');
+
+// eslint-disable-next-line no-var
+var LocalProfileCustomizationFocusTest =
+    class extends PolymerInteractiveUITest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://profile-picker/test_loader.html?module=signin/local_profile_customization_focus_test.js';
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return [
+      '//third_party/mocha/mocha.js',
+      '//chrome/test/data/webui/mocha_adapter.js',
+    ];
+  }
+
+  /** @override */
+  get featureList() {
+    return {
+      enabled: [
+        'features::kProfilesUIRevamp',
+        'features::kNewProfilePicker',
+      ]
+    };
+  }
+};
+
+TEST_F('LocalProfileCustomizationFocusTest', 'All', function() {
+  mocha.run();
+});

chrome/test/data/webui/signin/local_profile_customization_test.js

+// Copyright 2020 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.
+
+import 'chrome://profile-picker/lazy_load.js';
+
+import {AutogeneratedThemeColorInfo, ManageProfilesBrowserProxyImpl, navigateToStep, ProfileCreationSteps, Routes} from 'chrome://profile-picker/profile_picker.js';
+import {webUIListenerCallback} from 'chrome://resources/js/cr.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
+import {flushTasks, isChildVisible, waitBeforeNextRender} from '../test_util.m.js';
+
+import {TestManageProfilesBrowserProxy} from './test_manage_profiles_browser_proxy.js';
+
+suite('LocalProfileCustomizationTest', function() {
+  /** @type {!LocalProfileCustomizationElement} */
+  let customizeProfileElement;
+
+  /** @type {!TestManageProfilesBrowserProxy} */
+  let browserProxy;
+
+  async function resetCustomizeProfileElement() {
+    document.body.innerHTML = '';
+    customizeProfileElement = /** @type {!LocalProfileCustomizationElement} */ (
+        document.createElement('local-profile-customization'));
+    document.body.appendChild(customizeProfileElement);
+    await waitBeforeNextRender(customizeProfileElement);
+    await setProfileTheme(browserProxy.profileThemeInfo);
+  }
+
+  setup(function() {
+    browserProxy = new TestManageProfilesBrowserProxy();
+    ManageProfilesBrowserProxyImpl.instance_ = browserProxy;
+    return resetCustomizeProfileElement();
+  });
+
+  /** @param {!AutogeneratedThemeColorInfo} theme */
+  async function setProfileTheme(theme) {
+    browserProxy.setProfileThemeInfo(theme);
+    customizeProfileElement.$$('#colorPicker').selectedTheme = {
+      type: 2,
+      info: {
+        chromeThemeId: browserProxy.profileThemeInfo.colorId,
+      },
+    };
+    await browserProxy.whenCalled('getProfileThemeInfo');
+    browserProxy.resetResolver('getProfileThemeInfo');
+  }
+
+  /**
+   * @param {string} profileName
+   * @param {number} profileColor
+   * @param {string} avatarUrl
+   * @param {boolean} isGeneric
+   * @param {boolean} createShortcut
+   */
+  async function verifyCreateProfileCalledWithParams(
+      profileName, profileColor, avatarUrl, isGeneric, createShortcut) {
+    const args = await browserProxy.whenCalled('createProfile');
+    assertEquals(args[0], profileName);
+    assertEquals(args[1], profileColor);
+    assertEquals(args[2], avatarUrl);
+    assertEquals(args[3], isGeneric);
+    assertEquals(args[4], createShortcut);
+    browserProxy.resetResolver('createProfile');
+  }
+
+  test('ProfileName', async function() {
+    const profileNameInput = /** @type {!CrInputElement} */ (
+        customizeProfileElement.$$('#nameInput'));
+    assertTrue(isChildVisible(customizeProfileElement, '#nameInput'));
+    assertFalse(profileNameInput.invalid);
+    assertTrue(customizeProfileElement.$$('#save').disabled);
+
+    // Invalid profile name.
+    profileNameInput.value = '\t';
+    assertTrue(profileNameInput.invalid);
+    profileNameInput.value = ' ';
+    assertTrue(profileNameInput.invalid);
+    assertTrue(customizeProfileElement.$$('#save').disabled);
+    // Valid profil name.
+    profileNameInput.value = 'Work';
+    assertFalse(profileNameInput.invalid);
+    assertFalse(customizeProfileElement.$$('#save').disabled);
+    customizeProfileElement.$$('#save').click();
+    await verifyCreateProfileCalledWithParams(
+        'Work', browserProxy.profileThemeInfo.color, '', true, false);
+  });
+
+  test('ThemeSelectionChanges', async function() {
+    function verifyAppliedTheme() {
+      assertEquals(
+          getComputedStyle(customizeProfileElement.$$('#headerContainer'))
+              .backgroundColor,
+          browserProxy.profileThemeInfo.themeFrameColor);
+      assertEquals(
+          getComputedStyle(customizeProfileElement.$$('#backButton'))
+              .getPropertyValue('--cr-icon-button-fill-color')
+              .trim(),
+          browserProxy.profileThemeInfo.themeFrameTextColor);
+      assertEquals(
+          getComputedStyle(customizeProfileElement.$$('#title')).color,
+          browserProxy.profileThemeInfo.themeFrameTextColor);
+      assertEquals(
+          (customizeProfileElement.$$('img').src).split('/').pop(),
+          browserProxy.profileThemeInfo.themeGenericAvatar);
+    }
+    assertTrue(isChildVisible(customizeProfileElement, '#colorPicker'));
+    verifyAppliedTheme();
+    await setProfileTheme({
+      color: -3413569,
+      colorId: 7,
+      themeFrameColor: 'rgb(203, 233, 191)',
+      themeFrameTextColor: 'rgb(32, 33, 36)',
+      themeGenericAvatar: 'AvatarUrl-7',
+      themeShapeColor: 'rgb(255, 255, 255)'
+    });
+    verifyAppliedTheme();
+    assertTrue(customizeProfileElement.$$('#save').disabled);
+    customizeProfileElement.$$('#nameInput').value = 'Personal';
+    customizeProfileElement.$$('#save').click();
+    await verifyCreateProfileCalledWithParams(
+        'Personal', browserProxy.profileThemeInfo.color, '', true, false);
+  });
+
+  test('createShortcut', async function() {
+    assertTrue(!!customizeProfileElement.$$('cr-checkbox'));
+    assertTrue(customizeProfileElement.$$('cr-checkbox').hidden);
+    loadTimeData.overrideValues({
+      profileShortcutsEnabled: true,
+    });
+    await resetCustomizeProfileElement();
+    assertTrue(isChildVisible(customizeProfileElement, '#nameInput'));
+    const createShortcut = /** @type {!CrCheckboxElement} */ (
+        customizeProfileElement.$$('cr-checkbox'));
+    assertFalse(createShortcut.hidden);
+    assertTrue(createShortcut.checked);
+    createShortcut.click();
+    assertFalse(createShortcut.checked);
+    customizeProfileElement.$$('#nameInput').value = 'Personal';
+    customizeProfileElement.$$('#save').click();
+    await verifyCreateProfileCalledWithParams(
+        'Personal', browserProxy.profileThemeInfo.color, '', true, false);
+    // Profile creation in progress should disable the save button.
+    assertTrue(customizeProfileElement.$$('#save').disabled);
+    // Fire profile creation finished.
+    webUIListenerCallback('create-profile-finished');
+    flushTasks();
+    assertFalse(customizeProfileElement.$$('#save').disabled);
+    createShortcut.click();
+    assertTrue(createShortcut.checked);
+    customizeProfileElement.$$('#save').click();
+    await verifyCreateProfileCalledWithParams(
+        'Personal', browserProxy.profileThemeInfo.color, '', true, true);
+  });
+});

chrome/test/data/webui/signin/profile_picker_app_test.js

@@ -8,7 +8,7 @@ import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {assertEquals, assertTrue} from '../chai_assert.js';
-import {waitBeforeNextRender} from '../test_util.m.js';
+import {flushTasks, waitBeforeNextRender, whenAttributeIs, whenCheck} from '../test_util.m.js';
 
 import {TestManageProfilesBrowserProxy} from './test_manage_profiles_browser_proxy.js';
 
@@ -39,11 +39,34 @@ suite('ProfilePickerAppTest', function() {
    * @return {!Promise} Promise that resolves when initialization is complete
    *     and the lazy loaded module has been loaded.
    */
-  function waitForProfileCretionLoad() {
-    return Promise.all([
+  async function waitForProfileCretionLoad() {
+    await Promise.all([
       browserProxy.whenCalled('getNewProfileSuggestedThemeInfo'),
       ensureLazyLoaded(),
     ]);
+    browserProxy.reset();
+  }
+
+  /** @param {!HTMLElement} element */
+  function verifyProfileCreationViewStyle(element) {
+    assertEquals(
+        getComputedStyle(element.$$('#headerContainer'))
+            .getPropertyValue('--theme-frame-color')
+            .trim(),
+        browserProxy.profileThemeInfo.themeFrameColor);
+    assertEquals(
+        getComputedStyle(element.$$('#headerContainer'))
+            .getPropertyValue('--theme-text-color')
+            .trim(),
+        browserProxy.profileThemeInfo.themeFrameTextColor);
+    assertEquals(
+        getComputedStyle(element.$$('#headerContainer')).backgroundColor,
+        browserProxy.profileThemeInfo.themeFrameColor);
+    assertEquals(
+        getComputedStyle(element.$$('#backButton'))
+            .getPropertyValue('--cr-icon-button-fill-color')
+            .trim(),
+        browserProxy.profileThemeInfo.themeFrameTextColor);
   }
 
   test('ProfilePickerMainView', async function() {
@@ -51,34 +74,29 @@ suite('ProfilePickerAppTest', function() {
         testElement.shadowRoot.querySelectorAll('[slot=view]').length, 1);
     const mainView = /** @type {!ProfilePickerMainViewElement} */ (
         testElement.$$('profile-picker-main-view'));
-    assertTrue(mainView.classList.contains('active'));
+    await whenCheck(mainView, () => mainView.classList.contains('active'));
     await browserProxy.whenCalled('initializeMainView');
     assertTrue(mainView.$$('#wrapper').hidden);
-    const profile = {
-      profilePath: 'profile1',
-      localProfileName: 'Work',
-      isSyncing: true,
-      gaiaName: 'Alice',
-      userName: 'Alice@gmail.com',
-      isManaged: false,
-      avatarIcon: 'url',
-    };
-    webUIListenerCallback('profiles-list-changed', [profile]);
-    flush();
+
+    webUIListenerCallback(
+        'profiles-list-changed', [browserProxy.profileSample]);
+    flushTasks();
     assertEquals(
         mainView.shadowRoot.querySelectorAll('profile-card').length, 1);
     mainView.$$('#addProfile').querySelectorAll('cr-icon-button')[0].click();
     await waitForProfileCretionLoad();
-    await waitBeforeNextRender(testElement);
     assertEquals(
         testElement.shadowRoot.querySelectorAll('[slot=view]').length, 2);
-    assertTrue(!mainView.classList.contains('active'));
+    const choice = /** @type {!ProfileTypeChoiceElement} */ (
+        testElement.$$('profile-type-choice'));
+    assertTrue(!!choice);
+    await whenCheck(choice, () => choice.classList.contains('active'));
+    verifyProfileCreationViewStyle(choice);
   });
 
   test('SignInPromoSignIn', async function() {
-    resetTestElement(Routes.NEW_PROFILE);
+    await resetTestElement(Routes.NEW_PROFILE);
     await waitForProfileCretionLoad();
-    await waitBeforeNextRender(testElement);
     const choice = /** @type {!ProfileTypeChoiceElement} */ (
         testElement.$$('profile-type-choice'));
     assertTrue(!!choice);
@@ -89,33 +107,61 @@ suite('ProfilePickerAppTest', function() {
     return browserProxy.whenCalled('loadSignInProfileCreationFlow');
   });
 
-  test('SignInPromoLocalProfile', async function() {
-    resetTestElement(Routes.NEW_PROFILE);
+  test('ThemeColorConsistentInProfileCreationViews', async function() {
+    await resetTestElement(Routes.NEW_PROFILE);
     await waitForProfileCretionLoad();
-    await waitBeforeNextRender(testElement);
-
     const choice = /** @type {!ProfileTypeChoiceElement} */ (
         testElement.$$('profile-type-choice'));
     assertTrue(!!choice);
+    await whenCheck(choice, () => choice.classList.contains('active'));
+    verifyProfileCreationViewStyle(choice);
     choice.$$('#notNowButton').click();
+    await waitBeforeNextRender(testElement);
     const customization =
         /** @type {!LocalProfileCustomizationElement} */ (
             testElement.$$('local-profile-customization'));
     assertTrue(!!customization);
-    assertTrue(customization.classList.contains('active'));
+    await whenCheck(
+        customization, () => customization.classList.contains('active'));
+    verifyProfileCreationViewStyle(customization);
+
+    // Test color changes from the local profile customization is reflected in
+    // the profile type choice.
+    browserProxy.resetResolver('getProfileThemeInfo');
+    const colorPicker = customization.$$('#colorPicker');
+    assertTrue(!!colorPicker);
+    assertTrue(!!colorPicker.selectedTheme);
+    browserProxy.setProfileThemeInfo({
+      color: -3413569,
+      colorId: 7,
+      themeFrameColor: 'rgb(203, 233, 191)',
+      themeFrameTextColor: 'rgb(32, 33, 36)',
+      themeGenericAvatar: 'AvatarUrl-7',
+      themeShapeColor: 'rgb(255, 255, 255)'
+    });
+    // Select different color.
+    colorPicker.selectedTheme = {
+      type: 2,
+      info: {
+        chromeThemeId: browserProxy.profileThemeInfo.colorId,
+      },
+    };
+    await browserProxy.whenCalled('getProfileThemeInfo');
+    verifyProfileCreationViewStyle(customization);
+    customization.$$('#backButton').click();
+    await whenCheck(choice, () => choice.classList.contains('active'));
+    verifyProfileCreationViewStyle(choice);
   });
 
   test('ProfileCreationNotAllowed', async function() {
-    document.body.innerHTML = '';
     loadTimeData.overrideValues({
       isProfileCreationAllowed: false,
     });
-    resetTestElement(Routes.NEW_PROFILE);
+    await resetTestElement(Routes.NEW_PROFILE);
     assertEquals(
         testElement.shadowRoot.querySelectorAll('[slot=view]').length, 1);
     const mainView = /** @type {!ProfilePickerMainViewElement} */ (
         testElement.$$('profile-picker-main-view'));
-    await waitBeforeNextRender(testElement);
-    assertTrue(mainView.classList.contains('active'));
+    await whenCheck(mainView, () => mainView.classList.contains('active'));
   });
 });

chrome/test/data/webui/signin/profile_creation_flow_test.js → chrome/test/data/webui/signin/profile_type_choice_test.js

@@ -7,13 +7,13 @@ import 'chrome://profile-picker/lazy_load.js';
 import {assertTrue} from '../chai_assert.js';
 import {isChildVisible} from '../test_util.m.js';
 
-suite('ProfileCreationFlowTest', function() {
+suite('ProfileTypeChoiceTest', function() {
   /** @type {!ProfileTypeChoiceElement} */
   let choice;
 
   setup(function() {
     document.body.innerHTML = '';
-    choice = /** @type {!ProfileTypeChoiceElement} */(
+    choice = /** @type {!ProfileTypeChoiceElement} */ (
         document.createElement('profile-type-choice'));
     document.body.append(choice);
   });

chrome/test/data/webui/signin/signin_browsertest.js

@@ -85,10 +85,10 @@ TEST_F('DiceWebSigninInterceptTest', 'Bubble', function() {
  * This has to be declared as a variable for TEST_F to find it correctly.
  */
 // eslint-disable-next-line no-var
-var ProfileCreationFlowTest = class extends SigninBrowserTest {
+var ProfileTypeChoiceTest = class extends SigninBrowserTest {
   /** @override */
   get browsePreload() {
-    return 'chrome://profile-picker/test_loader.html?module=signin/profile_creation_flow_test.js';
+    return 'chrome://profile-picker/test_loader.html?module=signin/profile_type_choice_test.js';
   }
 
   /** @override */
@@ -102,7 +102,34 @@ var ProfileCreationFlowTest = class extends SigninBrowserTest {
   }
 };
 
-TEST_F('ProfileCreationFlowTest', 'Buttons', function() {
+TEST_F('ProfileTypeChoiceTest', 'Buttons', function() {
+  mocha.run();
+});
+
+
+/**
+ * Test fixture for
+ * chrome/browser/resources/signin/profile_picker/profile_creation_flow/local_profile_customization.html.
+ * This has to be declared as a variable for TEST_F to find it correctly.
+ */
+// eslint-disable-next-line no-var
+var LocalProfileCustomizationTest = class extends SigninBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://profile-picker/test_loader.html?module=signin/local_profile_customization_test.js';
+  }
+
+  /** @override */
+  get featureList() {
+    return {
+      enabled: [
+        'features::kProfilesUIRevamp',
+      ]
+    };
+  }
+};
+
+TEST_F('LocalProfileCustomizationTest', 'All', function() {
   mocha.run();
 });
 

chrome/test/data/webui/signin/test_manage_profiles_browser_proxy.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {ManageProfilesBrowserProxy} from 'chrome://profile-picker/profile_picker.js';
+import {AutogeneratedThemeColorInfo, ManageProfilesBrowserProxy, ProfileState} from 'chrome://profile-picker/profile_picker.js';
 
 import {TestBrowserProxy} from '../test_browser_proxy.m.js';
 
@@ -22,6 +22,32 @@ export class TestManageProfilesBrowserProxy extends TestBrowserProxy {
       'loadSignInProfileCreationFlow',
       'createProfile',
     ]);
+
+    /** @type {!AutogeneratedThemeColorInfo} */
+    this.profileThemeInfo = {
+      colorId: 22,
+      color: -10799479,
+      themeFrameColor: 'rgb(70, 42, 104)',
+      themeShapeColor: 'rgb(109, 65, 161)',
+      themeFrameTextColor: 'rgb(255, 255, 255)',
+      themeGenericAvatar: 'AvatarUrl-22'
+    };
+
+    /** @type {!ProfileState} */
+    this.profileSample = {
+      profilePath: 'profile1',
+      localProfileName: 'Work',
+      isSyncing: true,
+      gaiaName: 'Alice',
+      userName: 'Alice@gmail.com',
+      isManaged: false,
+      avatarIcon: 'url',
+    };
+  }
+
+  /** @param {!AutogeneratedThemeColorInfo} profileThemeInfo */
+  setProfileThemeInfo(profileThemeInfo) {
+    this.profileThemeInfo = profileThemeInfo;
   }
 
   /** @override */
@@ -52,27 +78,13 @@ export class TestManageProfilesBrowserProxy extends TestBrowserProxy {
   /** @override */
   getNewProfileSuggestedThemeInfo() {
     this.methodCalled('getNewProfileSuggestedThemeInfo');
-    return Promise.resolve({
-      colorId: 0,
-      color: 0,
-      themeFrameColor: '',
-      themeShapeColor: '',
-      themeFrameTextColor: '',
-      themeGenericAvatar: ''
-    });
+    return Promise.resolve(this.profileThemeInfo);
   }
 
   /** @override */
   getProfileThemeInfo(theme) {
     this.methodCalled('getProfileThemeInfo');
-    return Promise.resolve({
-      colorId: theme.colorId,
-      color: theme.color || 0,
-      themeFrameColor: '',
-      themeShapeColor: '',
-      themeFrameTextColor: '',
-      themeGenericAvatar: ''
-    });
+    return Promise.resolve(this.profileThemeInfo);
   }
 
   /** @override */

chrome/test/data/webui/test_util.js

@@ -43,6 +43,28 @@ cr.define('test_util', function() {
     });
   }
 
+  /**
+   * Observes an HTML element and fires a promise when the check function is
+   * satisfied.
+   * @param {!HTMLElement} target
+   * @param {Function} check
+   * @return {!Promise}
+   */
+  /* #export */ function whenCheck(target, check) {
+    return check() ?
+        Promise.resolve() :
+        new Promise(resolve => new MutationObserver((list, observer) => {
+                                 if (check()) {
+                                   observer.disconnect();
+                                   resolve();
+                                 }
+                               }).observe(target, {
+          attributes: true,
+          childList: true,
+          subtree: true
+        }));
+  }
+
   /**
    * Converts an event occurrence to a promise.
    * @param {string} eventType