[MD Bookmarks] Add keyboard navigation to sidebar.

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

 // 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.
 
 suite('<bookmarks-folder-node>', function() {
   var rootNode;
   var store;
 
+  function getFolderNode(id) {
+    return findFolderNode(rootNode, id);
+  }
+
   setup(function() {
     store = new bookmarks.TestStore({
       nodes: testTree(
           createFolder(
               '1',
               [
                 createFolder(
                     '2',
                     [
                       createFolder('3', []),
                       createFolder('4', []),
                     ]),
                 createItem('5'),
               ]),
           createFolder('7', [])),
+      selectedFolder: '1',
     });
     bookmarks.Store.instance_ = store;
 
     rootNode = document.createElement('bookmarks-folder-node');
     rootNode.itemId = '0';
     rootNode.depth = -1;
     replaceBody(rootNode);
     Polymer.dom.flush();
   });
 
@@ skipping 34 matching lines @@
     });
     Array.prototype.forEach.call(secondGen, function(f) {
       assertEquals(2, f.depth);
       assertEquals('2', f.style.getPropertyValue('--node-depth'));
     });
   });
 
   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_);
 
     store.data.search = {
       term: 'test',
       inProgress: false,
       results: ['3'],
     };
     store.notifyObservers();
 
     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();
+  });
 });