Refactors profile avatar selector into a Polymer element to use in md-settings & md-user-manager

chrome/test/data/webui/cr_elements/cr_profile_avatar_selector_tests.js

Index: chrome/test/data/webui/cr_elements/cr_profile_avatar_selector_tests.js
diff --git a/chrome/test/data/webui/cr_elements/cr_profile_avatar_selector_tests.js b/chrome/test/data/webui/cr_elements/cr_profile_avatar_selector_tests.js
new file mode 100644
index 0000000000000000000000000000000000000000..1406d782e534f0d4302124324a4a1c8ebf218641
--- /dev/null
+++ b/chrome/test/data/webui/cr_elements/cr_profile_avatar_selector_tests.js
@@ -0,0 +1,101 @@
+// Copyright 2016 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 cr-profile-avatar-selector. */
+cr.define('cr_profile_avatar_selector', function() {
+  function registerTests() {
+    suite('cr-profile-avatar-selector', function() {
+      /** @type {!CrProfileAvatarSelectorElement} */

[michaelpg, 2016/06/20 17:01:10]

nit: remove !

[Moe, 2016/06/20 18:48:56]

Done.

+      var avatarSelector = null;
+
+      /** @type {!CrProfileAvatarSelectorElement} */

[michaelpg, 2016/06/20 17:01:10]

@type => @return

[Moe, 2016/06/20 18:48:56]

Done.

+      function createElement() {
+        var avatarSelector =
+            document.createElement('cr-profile-avatar-selector');
+        avatarSelector.avatars =
+            [{url: 'chrome://avatar1.png', label: 'avatar1'},
+             {url: 'chrome://avatar2.png', label: 'avatar2'},
+             {url: 'chrome://avatar3.png', label: 'avatar3'}];
+        return avatarSelector;
+      }
+
+      suiteSetup(function() {
+        return PolymerTest.importHtml(
+            'chrome://resources/cr_elements/cr_profile_avatar_selector/' +
+            'cr_profile_avatar_selector.html');
+      });
+
+      setup(function() {
+        avatarSelector = createElement();
+        document.body.appendChild(avatarSelector);
+        Polymer.dom.flush();
+      });
+
+      teardown(function() {
+        avatarSelector.remove();
+      });
+
+      test('Displays avatars', function() {
+        assertEquals(3, avatarSelector.$.selector.items.length);
+      });
+
+      test('Can update avatars', function() {
+        avatarSelector.pop('avatars');
+        Polymer.dom.flush();
+        assertEquals(2, avatarSelector.$.selector.items.length);
+      });
+
+      test('No avatar is initially selected', function() {
+        var selector = avatarSelector.$.selector;
+
+        assertFalse(!!avatarSelector.selectedAvatarUrl);
+        assertFalse(selector.items[0].classList.contains('iron-selected'));
+        assertFalse(selector.items[1].classList.contains('iron-selected'));
+        assertFalse(selector.items[2].classList.contains('iron-selected'));
+      });
+
+      test('An avatar is initially selected if selectedAvatarUrl is set',
+           function() {
+        var avatarSelector = createElement();

[michaelpg, 2016/06/20 17:01:10]

remove line (avatarSelector already created in setup, right?)

[Moe, 2016/06/20 18:48:56]

Creating a second avatarSelector is intended in this test. We would wanna know
whether an avatar is initially selected if selectedAvatarUrl is set before the
element is attached. I changed the variable name so there won't be a confusion.

+        avatarSelector.selectedAvatarUrl = avatarSelector.avatars[0].url;
+        document.body.appendChild(avatarSelector);
+        Polymer.dom.flush();
+
+        var selector = avatarSelector.$.selector;
+
+        assertEquals('chrome://avatar1.png', avatarSelector.selectedAvatarUrl);
+        assertTrue(selector.items[0].classList.contains('iron-selected'));
+        assertFalse(selector.items[1].classList.contains('iron-selected'));
+        assertFalse(selector.items[2].classList.contains('iron-selected'));
+      });
+
+      test('Can select avatar', function() {
+        var selector = avatarSelector.$.selector;
+
+        // Simulate tapping the third avatar.
+        MockInteractions.tap(selector.items[2]);
+        assertEquals('chrome://avatar3.png', avatarSelector.selectedAvatarUrl);
+        assertFalse(selector.items[0].classList.contains('iron-selected'));
+        assertFalse(selector.items[1].classList.contains('iron-selected'));
+        assertTrue(selector.items[2].classList.contains('iron-selected'));
+      });
+
+      test('Fires iron-activate event when an avatar is activated',
+           function(done) {
+        avatarSelector.addEventListener('iron-activate',
+                                        function(event) {
+          assertEquals(event.detail.selected, 'chrome://avatar2.png');
+          done();
+        });
+
+        // Simulate tapping the second avatar.
+        MockInteractions.tap(avatarSelector.$.selector.items[1]);
+      });
+    });
+  }
+
+  return {
+    registerTests: registerTests,
+  };
+});