[MD Bookmarks] Add keyboard navigation to sidebar.

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

Index: chrome/test/data/webui/md_bookmarks/md_bookmarks_focus_test.js
diff --git a/chrome/test/data/webui/md_bookmarks/md_bookmarks_focus_test.js b/chrome/test/data/webui/md_bookmarks/md_bookmarks_focus_test.js
new file mode 100644
index 0000000000000000000000000000000000000000..fe8b3bcd81917a573e91194c2086810741b8c5f8
--- /dev/null
+++ b/chrome/test/data/webui/md_bookmarks/md_bookmarks_focus_test.js
@@ -0,0 +1,130 @@
+// 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.
+
+/**
+ * @fileoverview Tests for MD History which are run as interactive ui tests.
+ * Should be used for tests which care about focus.
+ */
+
+var ROOT_PATH = '../../../../../';
+
+GEN_INCLUDE(
+    [ROOT_PATH + 'chrome/test/data/webui/polymer_interactive_ui_test.js']);
+GEN('#include "base/command_line.h"');
+
+function MaterialBookmarksFocusTest() {}
+
+MaterialBookmarksFocusTest.prototype = {
+  __proto__: PolymerInteractiveUITest.prototype,
+
+  browsePreload: 'chrome://bookmarks',
+
+  commandLineSwitches:
+      [{switchName: 'enable-features', switchValue: 'MaterialDesignBookmarks'}],
+
+  extraLibraries: PolymerTest.getLibraries(ROOT_PATH).concat([
+    'test_store.js',
+    'test_util.js',
+  ]),
+};
+
+TEST_F('MaterialBookmarksFocusTest', 'All', function() {
+  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();
+    });
+
+    test('keyboard selection', function() {
+      function focusAndKeydown(id, key) {
+        var container = getFolderNode(id).$.container;
+        container.focus();
+        MockInteractions.keyDownOn(container, '', [], key);
+      }
+
+      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('', getFolderNode('2').$.container.getAttribute('tabindex'));
+
+      // Move down into child.
+      focusAndKeydown('1', 'ArrowDown');

[tsergeant, 2017/05/01 01:35:57]

Two related questions:

- Why do you focus the folder node each time before you do the keydown?
Shouldn't in (most cases?) focus already be there?

- If you do need to manually focus, can we have at least one case that checks
focus is in the right place after the key handler?

[calamity, 2017/05/03 03:01:47]

This was just because the notifyObservers() would mess up things. TestStore
change has made this obsolete.
This is probably a good idea anyway so done.

+
+      assertDeepEquals(bookmarks.actions.selectFolder('2'), store.lastAction);
+      store.data.selectedFolder = '2';

[tsergeant, 2017/05/01 01:35:57]

With the recent changes to TestStore enough, are you able to remove all of these
manual changes to the store?

[calamity, 2017/05/03 03:01:47]

Yep, that was the dream, and now the dream is real.

+      store.notifyObservers();
+
+      assertEquals('', getFolderNode('1').$.container.getAttribute('tabindex'));
+      assertEquals(
+          '0', getFolderNode('2').$.container.getAttribute('tabindex'));
+
+      // Move down past closed folders.
+      focusAndKeydown('2', 'ArrowDown');
+      assertDeepEquals(bookmarks.actions.selectFolder('7'), store.lastAction);
+      store.data.selectedFolder = '7';
+      store.notifyObservers();
+
+      // Move down past end of list.
+      store.resetLastAction();
+      focusAndKeydown('7', 'ArrowDown');
+      assertDeepEquals(null, store.lastAction);
+      store.data.selectedFolder = '7';
+      store.notifyObservers();
+
+      // Move up past closed folders.
+      focusAndKeydown('7', 'ArrowUp');
+      assertDeepEquals(bookmarks.actions.selectFolder('2'), store.lastAction);
+      store.data.selectedFolder = '2';
+      store.notifyObservers();
+
+      // Move up into parent.
+      focusAndKeydown('2', 'ArrowUp');
+      assertDeepEquals(bookmarks.actions.selectFolder('1'), store.lastAction);
+      store.data.selectedFolder = '1';
+      store.notifyObservers();
+
+      // Move up past start of list.
+      store.resetLastAction();
+      focusAndKeydown('1', 'ArrowUp');
+      assertDeepEquals(null, store.lastAction);
+      store.data.selectedFolder = '1';
+      store.notifyObservers();
+    });
+  });
+
+  mocha.run();
+});