MD Settings: adjust focus-outline behaviors on search engine iron-list.

chrome/test/data/webui/settings/focusable_iron_list_item_behavior_test.js

Index: chrome/test/data/webui/settings/focusable_iron_list_item_behavior_test.js
diff --git a/chrome/test/data/webui/settings/focusable_iron_list_item_behavior_test.js b/chrome/test/data/webui/settings/focusable_iron_list_item_behavior_test.js
new file mode 100644
index 0000000000000000000000000000000000000000..406ec6bb6f2afbb9a5bc3c0e95c941e9249abc79
--- /dev/null
+++ b/chrome/test/data/webui/settings/focusable_iron_list_item_behavior_test.js
@@ -0,0 +1,96 @@
+// Copyright 2017 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.
+
+suite('focusable-iron-list-item-behavior', function() {
+  /** @type {FocusableIronListItemElement} */ var testElement;
+  /** @type {HTMLDivElement} */ var container;
+  /** @type {IronListElement} */ var ironList;
+  /** @type {IronListItemElement} */ var ironListItems;
+
+  suiteSetup(function() {
+    document.body.innerHTML = `
+      <dom-module is="test-element-list">
+        <template>
+          <style>
+          </style>
+          <iron-list items=[[items]]>

[Dan Beam, 2017/02/22 23:25:46]

why do you actually need to test inside of an iron-list?  the code does not seem
to depend on these details.  can you just simulated [focused]?

[scottchen, 2017/02/23 00:31:50]

Done.

+            <template>
+              <test-element-item tabindex$=[[tabIndex]] item=[[item]]
+                  class="item">
+              </test-element-item>
+            </template>
+          </iron-list>
+        </template>
+      </dom-module>
+
+      <dom-module id="test-element-item">
+        <style>
+          :host(.no-outline) {
+            outline: none;
+          };
+        </style>
+        <template>
+          [[item]]
+          <div tabindex$=[[tabindex]]>button</div>
+        </template>
+      </dom-module>
+    `;
+
+    Polymer({
+      is: 'test-element-list',
+
+      properties: {
+        items: {
+          type: Array,
+          value: function() {
+            return ['apple', 'bannana', 'cucumber', 'doughnut'];

[Dan Beam, 2017/02/22 23:25:46]

in the past we've had issues with iron-lists in tests with >3 items

[scottchen, 2017/02/23 00:31:50]

Changing test to not depend on iron-list, this code will be removed.

+          },
+        },
+      },
+    });
+
+    Polymer({
+      is: 'test-element-item',
+      behaviors: [FocusableIronListItemBehavior],
+    });
+  });
+
+  setup(function() {
+    PolymerTest.clearBody();
+
+    testElement = document.createElement('test-element-list');
+    document.body.appendChild(testElement);
+    ironList = testElement.$$('iron-list');
+
+    Polymer.dom.flush();
+    ironList.fire('iron-resize'); // Bug with iron-list.

[Dan Beam, 2017/02/22 23:25:46]

notifyResize()

[scottchen, 2017/02/23 00:31:50]

Changing test to not depend on iron-list, this code will be removed.

+    Polymer.dom.flush();
+
+    ironListItems = ironList.querySelectorAll('test-element-item');

[Dan Beam, 2017/02/22 23:25:46]

i would not recommend accessing the physical items of an iron-list

[scottchen, 2017/02/23 00:31:50]

Changing test to not depend on iron-list, this code will be removed.

+    assertEquals(4, ironListItems.length); // Check the iron-list is setup.
+  });
+
+  test('clicking on the item gives it a no-outline class', function() {
+    var item_1 = ironListItems[0];

[Dan Beam, 2017/02/22 23:25:46]

don't use _ in js var names (jsVarsLikeThis)

[scottchen, 2017/02/23 00:31:50]

Acknowledged.

+    var item_2 = ironListItems[1];
+
+    assertFalse(item_1.classList.contains('no-outline'));
+    MockInteractions.tap(item_1);
+    assertTrue(item_1.classList.contains('no-outline'));
+
+    MockInteractions.tap(item_2);
+    MockInteractions.blur(item_1); // manual call since mock-tap doesn't blur
+    assertTrue(item_2.classList.contains('no-outline'));
+    assertFalse(item_1.classList.contains('no-outline'));
+  });
+
+  test('no-outline class doesn\'t apply to keyboard focused item', function() {
+    var item_1 = ironListItems[0];
+
+    MockInteractions.keyUpOn(item_1);
+    assertFalse(item_1.classList.contains('no-outline'));
+    MockInteractions.tap(item_1);
+    assertFalse(item_1.classList.contains('no-outline'));
+  });
+});