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);
  });
});