[LocalProfileCreation]: Add tests for select avatar dialog.

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

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

@@ -89,6 +89,84 @@ suite('LocalProfileCustomizationTest', function() {
         'Work', browserProxy.profileThemeInfo.color, defaultAvatarIndex, false);
   });
 
+  test('selectAvatarDialog', async function() {
+    function getProfileAvatarSelectorIconUrl(item) {
+      return getComputedStyle(item).backgroundImage.split('/').pop().split(
+          '"')[0];
+    }
+
+    function verifyAvatarSelected(item) {
+      flush();
+      const avatarGrid =
+          customizeProfileElement.$$('cr-profile-avatar-selector')
+              .$$('#avatar-grid');
+      assertEquals(avatarGrid.querySelectorAll('.iron-selected').length, 1);
+      assertTrue(item.classList.contains('iron-selected'));
+      const displayedAvatarUrl =
+          (customizeProfileElement.$$('img').src).split('/').pop();
+      assertEquals(getProfileAvatarSelectorIconUrl(item), displayedAvatarUrl);
+    }
+    await browserProxy.whenCalled('getAvailableIcons');
+    assertTrue(isChildVisible(customizeProfileElement, '#customizeAvatarIcon'));
+    customizeProfileElement.$$('#customizeAvatarIcon').click();
+    assertTrue(customizeProfileElement.$$('#selectAvatarDialog').open);
+    flush();
+
+    const items = customizeProfileElement.$$('cr-profile-avatar-selector')
+                      .$$('#avatar-grid')
+                      .querySelectorAll('.avatar');
+    assertEquals(items.length, 4);
+    assertEquals(
+        getProfileAvatarSelectorIconUrl(items[0]),
+        browserProxy.profileThemeInfo.themeGenericAvatar);
+    verifyAvatarSelected(items[0]);
+
+    // Select custom avatar
+    items[1].click();
+    flush();
+    verifyAvatarSelected(items[1]);
+    assertEquals(getProfileAvatarSelectorIconUrl(items[1]), 'fake-icon-1.png');
+
+    // Simulate theme changes with custom avatar selected.
+    const themeInfo = /** @type {!AutogeneratedThemeColorInfo} */ (
+        Object.assign({}, browserProxy.profileThemeInfo));
+    themeInfo.themeGenericAvatar = 'AvatarUrl-7';
+    await setProfileTheme(themeInfo);
+    assertEquals(
+        getProfileAvatarSelectorIconUrl(items[0]),
+        themeInfo.themeGenericAvatar);
+    verifyAvatarSelected(items[1]);
+
+    // Theme changes with generic avatar selected.
+    items[0].click();
+    flush();
+    verifyAvatarSelected(items[0]);
+    themeInfo.themeGenericAvatar = 'AvatarUrl-8';
+    await setProfileTheme(/** @type {!AutogeneratedThemeColorInfo} */ (
+        Object.assign({}, themeInfo)));
+    assertEquals(
+        getProfileAvatarSelectorIconUrl(items[0]),
+        themeInfo.themeGenericAvatar);
+    verifyAvatarSelected(items[0]);
+
+    // Create profile with custom avatar.
+    items[3].click();
+    flush();
+    verifyAvatarSelected(items[3]);
+    assertEquals(getProfileAvatarSelectorIconUrl(items[3]), 'fake-icon-3.png');
+
+    // Close the dialog.
+    assertTrue(!!customizeProfileElement.$$('#doneButton'));
+    customizeProfileElement.$$('#doneButton').click();
+    assertFalse(customizeProfileElement.$$('#selectAvatarDialog').open);
+
+    customizeProfileElement.$$('#nameInput').value = 'Work';
+    assertFalse(customizeProfileElement.$$('#save').disabled);
+    customizeProfileElement.$$('#save').click();
+    await verifyCreateProfileCalledWithParams(
+        'Work', browserProxy.profileThemeInfo.color, 3, false);
+  });
+
   test('ThemeSelectionChanges', async function() {
     function verifyAppliedTheme() {
       assertEquals(