[MD Bookmarks] Add keyboard navigation to sidebar.

chrome/test/data/webui/md_bookmarks/folder_node_test.js

Index: chrome/test/data/webui/md_bookmarks/folder_node_test.js
diff --git a/chrome/test/data/webui/md_bookmarks/folder_node_test.js b/chrome/test/data/webui/md_bookmarks/folder_node_test.js
index 49e080bc14ba7894c7988030723da8d12c190ed0..c13157f9dd81f0e7287030e358a07f0cc845a601 100644
--- a/chrome/test/data/webui/md_bookmarks/folder_node_test.js
+++ b/chrome/test/data/webui/md_bookmarks/folder_node_test.js
@@ -6,6 +6,10 @@ suite('<bookmarks-folder-node>', function() {
   var rootNode;
   var store;
 
+  function getFolderNode(id) {
+    return findFolderNode(rootNode, id);
+  }
+
   setup(function() {
     store = new bookmarks.TestStore({
       nodes: testTree(
@@ -21,6 +25,7 @@ suite('<bookmarks-folder-node>', function() {
                 createItem('5'),
               ]),
           createFolder('7', [])),
+      selectedFolder: '1',
     });
     bookmarks.Store.instance_ = store;
 
@@ -75,9 +80,6 @@ suite('<bookmarks-folder-node>', function() {
   test('doesn\'t highlight selected folder while searching', function() {
     var rootFolders = rootNode.root.querySelectorAll('bookmarks-folder-node');
 
-    store.data.selectedFolder = '1';
-    store.notifyObservers();
-
     assertEquals('1', rootFolders['0'].itemId);
     assertTrue(rootFolders['0'].isSelectedFolder_);
 
@@ -90,4 +92,100 @@ suite('<bookmarks-folder-node>', function() {
 
     assertFalse(rootFolders['0'].isSelectedFolder_);
   });
+
+  test('last visible descendant', function() {
+    assertEquals('7', rootNode.getLastVisibleDescendant_().itemId);
+    assertEquals('4', getFolderNode('1').getLastVisibleDescendant_().itemId);
+
+    store.data.closedFolders = new Set('2');
+    store.notifyObservers();
+
+    assertEquals('2', getFolderNode('1').getLastVisibleDescendant_().itemId);
+  });
+
+  test('next/previous folder nodes', function() {
+    function getNextVisibleFolderNode(parentId, targetId, reverse) {
+      return getFolderNode(parentId).getNextVisibleFolderNode_(
+          reverse, getFolderNode(targetId));
+    }
+
+    // Forwards.
+    assertEquals('2', getNextVisibleFolderNode('1', '1', false).itemId);
+    assertEquals('4', getNextVisibleFolderNode('2', '3', false).itemId);
+    assertEquals(null, getNextVisibleFolderNode('2', '4', false));
+
+    // Backwards.
+    assertEquals('1', getNextVisibleFolderNode('1', '2', true).itemId);
+    assertEquals('3', getNextVisibleFolderNode('2', '4', true).itemId);
+    assertEquals('4', getNextVisibleFolderNode('0', '7', true).itemId);
+
+    // Skips closed folders.
+    store.data.closedFolders = new Set('2');
+    store.notifyObservers();
+
+    assertEquals(null, getNextVisibleFolderNode('1', '2', false));
+    assertEquals(null, getNextVisibleFolderNode('2', '2', false));
+    assertEquals('2', getNextVisibleFolderNode('0', '7', true).itemId);
+  });
+
+  test('keyboard selection', function() {

[tsergeant, 2017/04/19 07:32:18]

I think it would make a lot of sense to use an interactive UI 'integration' test
instead of this.

So much stuff is done manually here, and it still isn't able to test the actual
keydown handler, or that the correct element gets focused. I think it would be
nicer to test that pressing the down key focuses the right element directly.

[calamity, 2017/04/28 06:15:47]

Yeah, ok.

+    function changeKeyboardFocus(direction, targetId, activeElementId) {
+      return getFolderNode(targetId).changeKeyboardSelection_(
+          direction, getFolderNode(activeElementId));
+    }
+
+    store.data.closedFolders = new Set('2');
+    store.notifyObservers();
+
+    // The selected folder is focus enabled on attach.
+    assertEquals('0', getFolderNode('1').$.container.getAttribute('tabindex'));
+
+    // Only the selected folder should be focusable.
+    assertEquals('-1', getFolderNode('2').$.container.getAttribute('tabindex'));
+
+    // Move down into child.
+    assertTrue(changeKeyboardFocus(1, '1', '1'));
+    assertDeepEquals(bookmarks.actions.selectFolder('2'), store.lastAction);
+    store.data.selectedFolder = '2';
+    store.notifyObservers();
+
+    assertEquals('-1', getFolderNode('1').$.container.getAttribute('tabindex'));
+    assertEquals('0', getFolderNode('2').$.container.getAttribute('tabindex'));
+
+    // Move down past closed folders.
+    assertFalse(changeKeyboardFocus(1, '2', '2'));

[tsergeant, 2017/04/19 07:32:18]

I think this is testing slightly the wrong thing?

Here you're setting activeElement to the folder-node with ID 2, but in reality
it should be the #container child of that node. It doesn't cause any problems at
the moment, but it conceivably could if you follow my suggestions from above.

[calamity, 2017/04/28 06:15:47]

Yeah, you're right. Fixed.

+    assertFalse(changeKeyboardFocus(1, '1', '2'));
+    assertTrue(changeKeyboardFocus(1, '0', '1'));
+    assertDeepEquals(bookmarks.actions.selectFolder('7'), store.lastAction);
+    store.data.selectedFolder = '7';
+    store.notifyObservers();
+
+    // Move down past end of list.
+    assertFalse(changeKeyboardFocus(1, '7', '7'));
+    assertFalse(changeKeyboardFocus(1, '0', '7'));
+    assertDeepEquals(bookmarks.actions.selectFolder('7'), store.lastAction);
+    store.data.selectedFolder = '7';
+    store.notifyObservers();
+
+    // Move up past closed folders.
+    assertFalse(changeKeyboardFocus(-1, '7', '7'));
+    assertTrue(changeKeyboardFocus(-1, '0', '7'));
+    assertDeepEquals(bookmarks.actions.selectFolder('2'), store.lastAction);
+    store.data.selectedFolder = '2';
+    store.notifyObservers();
+
+    // Move up into parent.
+    assertFalse(changeKeyboardFocus(-1, '2', '2'));
+    assertTrue(changeKeyboardFocus(-1, '1', '2'));
+    assertDeepEquals(bookmarks.actions.selectFolder('1'), store.lastAction);
+    store.data.selectedFolder = '1';
+    store.notifyObservers();
+
+    // Move up past start of list.
+    assertFalse(changeKeyboardFocus(-1, '1', '1'));
+    assertTrue(changeKeyboardFocus(-1, '0', '1'));
+    assertDeepEquals(bookmarks.actions.selectFolder('1'), store.lastAction);
+    store.data.selectedFolder = '1';
+    store.notifyObservers();
+  });
 });