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..8463a2d702198c726957d36dd179faf24736e6db
--- /dev/null
+++ b/chrome/test/data/webui/cr_elements/cr_profile_avatar_selector_tests.js
@@ -0,0 +1,73 @@
+// 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() {

[tommycli, 2016/06/14 23:50:59]

It's awesome that you're adding a test to something that was previously
untested.

+  function registerTests() {
+    suite('cr-profile-avatar-selector', function() {
+      /** @type {!CrProfileavatarSelector} */

[tommycli, 2016/06/14 23:50:59]

Is this typename capitalized correctly? ProfileAvatar?

[Moe, 2016/06/15 19:35:00]

Done.

+      var avatarSelector;

[tommycli, 2016/06/14 23:50:59]

initialized to null normally right?

[Moe, 2016/06/15 19:35:00]

Done.

+
+      suiteSetup(function() {
+        return PolymerTest.importHtml(
+            'chrome://resources/cr_elements/cr_profile_avatar_selector/' +
+            'cr_profile_avatar_selector.html');
+      });
+
+      setup(function() {
+        avatarSelector = document.createElement('cr-profile-avatar-selector');
+        document.body.appendChild(avatarSelector);
+        avatarSelector.avatars =
+            [{url: 'chrome://avatar1.png', label: 'avatar1'},
+             {url: 'chrome://avatar2.png', label: 'avatar2'},
+             {url: 'chrome://avatar3.png', label: 'avatar3'}];
+
+        Polymer.dom.flush();
+      });
+
+      teardown(function() {
+        avatarSelector.remove();
+      });
+
+      test('Displays avatars', function() {
+        var avatars = avatarSelector.$.selector.querySelectorAll('.avatar');
+        assertEquals(3, avatars.length);
+      });
+
+      test('No avatar is initially selected', function() {

[tommycli, 2016/06/14 23:50:59]

Could we add a test to verify that an avatar IS initially selected if the
element is created with an initially selected icon? This will be the use-case
that Manage Profile uses.

I think you will have to recreate the element within the test body.

something like:

avatarSelector = document.createElement...
avatarSelector.avatars = [ ... ]
avatarSelector.selectedAvatarUrl = ...
document.body.appendChild(avatarSelector);

[Moe, 2016/06/15 19:35:00]

Done.

+        assertFalse(!!avatarSelector.selectedAvatarUrl);
+      });
+
+      test('Can select avatar', function() {
+        var avatars = avatarSelector.$.selector.querySelectorAll('.avatar');
+
+        // Simulate tapping the first avatar.
+        MockInteractions.tap(avatars[0]);
+        assertEquals('chrome://avatar1.png', avatarSelector.selectedAvatarUrl);
+
+        // Simulate tapping the third avatar.
+        MockInteractions.tap(avatars[2]);
+        assertEquals('chrome://avatar3.png', avatarSelector.selectedAvatarUrl);
+      });
+
+      test('Fires an event when selected avatar changes', function(done) {

[tommycli, 2016/06/14 23:50:59]

These tests excellent.

+        var avatars = avatarSelector.$.selector.querySelectorAll('.avatar');
+
+        // attach selected-avatar-url-changed listener
+        avatarSelector.addEventListener('selected-avatar-url-changed',
+                                        function(event) {
+            assertEquals(event.detail.value, 'chrome://avatar2.png');

[tommycli, 2016/06/14 23:50:59]

indent is off. (2 spaces)

[Moe, 2016/06/15 19:35:00]

Done.

+            done();
+        });
+
+        // Simulate tapping the second avatar.
+        MockInteractions.tap(avatars[1]);
+      });
+    });
+  }
+
+  return {
+    registerTests: registerTests,
+  };
+});