MD Settings: adjust iron-list focus row behaviors.

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

+// 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('focus-row-behavior', function() {
+  /** @type {FocusableIronListItemElement} */ var testElement;
+
+  suiteSetup(function() {
+    document.body.innerHTML = `
+      <dom-module is="focus-row-element">
+        <template>
+          <style></style>

[hcarmona, 2017/03/16 21:31:54]

Nit: style is optional, it can be removed when empty.

[scottchen, 2017/03/17 21:26:58]

Done.

+          <div id="container" focus-row-container>
+            <span>fake text</span>
+            <button id="control" focus-row-control type='fake-button'>
+              fake button
+            </button>
+            <button id="controlTwo" focus-row-control type='fake-button-two'>
+              fake button two
+            </button>
+          </div>
+        </template>
+      </dom-module>
+    `;
+
+    Polymer({
+      is: 'focus-row-element',
+      behaviors: [FocusRowBehavior],
+    });
+  });
+
+  setup(function(done) {
+    PolymerTest.clearBody();
+
+    testElement = document.createElement('focus-row-element');
+    document.body.appendChild(testElement);
+
+    // Block until FocusRowBehavior.attached finishes running async setup.
+    Polymer.RenderStatus.afterNextRender(this, function() {
+      done();
+    });
+  });
+
+  test('item passes focus to first focusable child', function() {
+    var focused = false;
+    testElement.$.control.addEventListener('focus', function() {
+      focused = true;
+    });
+    testElement.fire('focus');

[hcarmona, 2017/03/16 21:31:54]

I think events are async. This test might need to be changed to:

test('...', function(done) {
  testElement.$.controll.addEventListener('focus', done);
  testElement.focus();
});

This will fail if done isn't called, so no need to assert anything :-)

[scottchen, 2017/03/17 21:26:58]

This was a surprise to me too, but apparently event handlers run synchronously
after the event dispatch.

[hcarmona, 2017/03/17 23:55:50]

Acknowledged.

+    assertTrue(focused);
+  });
+
+  test('will focus a similar item that was last focused', function() {

[hcarmona, 2017/03/16 21:31:54]

This test can be updated in a similar manner to what I mentioned above

[scottchen, 2017/03/17 21:26:58]

same as above

+    var lastButton = document.createElement('button');
+    lastButton.setAttribute('focus-type', 'fake-button-two');
+    testElement.lastFocused = lastButton;
+
+    var focused = false;
+    testElement.$.controlTwo.addEventListener('focus', function() {
+      focused = true;
+    });
+    testElement.fire('focus');
+    assertTrue(focused);
+  });
+
+  test('mouse clicks on the row does not focus the controls', function() {
+    var focused = false;
+    testElement.$.control.addEventListener('focus', function() {
+      focused = true;
+    });
+    MockInteractions.tap(testElement);
+    // iron-list is responsible for firing 'focus' after taps, but is not used

[hcarmona, 2017/03/16 21:31:54]

Does this apply to the other tests above? Maybe move this documentation to the
polymer element that you created.

[scottchen, 2017/03/17 21:26:59]

This is only relevant to testing mouse taps.

[hcarmona, 2017/03/17 23:55:50]

Acknowledged.

+    // in the test, so its necessary to manually fire 'focus' after tap.
+    testElement.fire('focus');
+    assertFalse(focused);
+  });

[hcarmona, 2017/03/16 21:31:54]

Lists can be empty, how should focus be handled in that case? Can we add a test
for that?

[scottchen, 2017/03/17 21:26:58]

I think that's for iron-list to test - the FocusRowBehavior only morphs the
behavior after iron-list focuses a row.

[hcarmona, 2017/03/17 23:55:50]

Acknowledged.

+});