[MD Bookmarks] Add keyboard navigation and selection to bookmark list.

chrome/test/data/webui/md_bookmarks/md_bookmarks_focus_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.
 
 /**
  * @fileoverview Tests for MD Bookmarks which are run as interactive ui tests.
  * Should be used for tests which care about focus.
  */
 
 var ROOT_PATH = '../../../../../';
@@ skipping 162 matching lines @@
           bookmarks.actions.changeFolderOpen('2', true), store.lastAction);
 
       keydown('2', 'ArrowRight');
       assertDeepEquals(
           bookmarks.actions.changeFolderOpen('2', false), store.lastAction);
 
       document.body.style.direction = 'ltr';
     });
   });
 
+  suite('<bookmarks-list>', function() {
+    var list;
+    var store;
+    var items;
+    var multiKey = cr.isMac ? 'meta' : 'ctrl';
+
+    function keydown(item, key, modifiers) {
+      MockInteractions.keyDownOn(item, '', modifiers, key);
+    }
+
+    setup(function() {
+      store = new bookmarks.TestStore({
+        nodes: testTree(createFolder(
+            '1',
+            [
+              createItem('2'),
+              createItem('3'),
+              createItem('4'),
+              createItem('5'),
+              createItem('6'),
+              createFolder('7', []),
+            ])),
+        selectedFolder: '1',
+      });
+      store.setReducersEnabled(true);
+      bookmarks.Store.instance_ = store;
+
+      list = document.createElement('bookmarks-list');
+      list.style.height = '100%';
+      list.style.width = '100%';
+      list.style.position = 'absolute';
+      replaceBody(list);
+      Polymer.dom.flush();
+      items = list.root.querySelectorAll('bookmarks-item');
+    });
+
+    test('simple keyboard selection', function() {
+      var focusedItem = items[0];
+      assertEquals('0', focusedItem.getAttribute('tabindex'));
+      assertEquals(
+          '0', focusedItem.$$('.more-vert-button').getAttribute('tabindex'));
+      focusedItem.focus();
+
+      keydown(focusedItem, 'ArrowDown');
+      focusedItem = items[1];
+      assertEquals('0', focusedItem.getAttribute('tabindex'));
+      assertEquals(
+          '0', focusedItem.$$('.more-vert-button').getAttribute('tabindex'));
+      assertDeepEquals(['3'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowUp');
+      focusedItem = items[0];
+      assertEquals('0', focusedItem.getAttribute('tabindex'));
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'End');
+      focusedItem = items[5];
+      assertDeepEquals(['7'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'Home');
+      focusedItem = items[0];
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'Escape');
+      assertDeepEquals([], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'a', 'ctrl');
+      assertDeepEquals(
+          ['2', '3', '4', '5', '6', '7'],
+          normalizeSet(store.data.selection.items));
+    });
+
+    test('shift selection', function() {
+      // TODO(calamity): Make the first item the anchor index when a new folder
+      // is selected.
+      var focusedItem = items[0];
+      focusedItem.focus();
+
+      keydown(focusedItem, 'ArrowDown');
+      focusedItem = items[1];
+      assertDeepEquals(['3'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowUp', 'shift');
+      focusedItem = items[0];
+      assertDeepEquals(['2', '3'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', 'shift');
+      focusedItem = items[1];
+      assertDeepEquals(['3'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', 'shift');
+      focusedItem = items[2];
+      assertDeepEquals(['3', '4'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'End', 'shift');
+      focusedItem = items[2];
+      assertDeepEquals(
+          ['3', '4', '5', '6', '7'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'Home', 'shift');
+      focusedItem = items[2];
+      assertDeepEquals(['2', '3'], normalizeSet(store.data.selection.items));
+    });
+
+    test('ctrl selection', function() {
+      var focusedItem = items[0];
+      focusedItem.focus();
+
+      keydown(focusedItem, ' ', 'ctrl');
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', 'ctrl');
+      focusedItem = items[1];
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));

[tsergeant, 2017/05/22 05:19:00]

Should you be checking that the anchor changes here?

[calamity, 2017/05/23 05:27:29]

Done.

+
+      keydown(focusedItem, 'ArrowDown', 'ctrl');
+      focusedItem = items[2];
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, ' ', 'ctrl');
+      assertDeepEquals(['2', '4'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, ' ', 'ctrl');
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+    });
+
+    test('ctrl+shift selection', function() {
+      var focusedItem = items[0];
+      focusedItem.focus();
+
+      keydown(focusedItem, ' ', 'ctrl');
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', 'ctrl');
+      focusedItem = items[1];
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', 'ctrl');
+      focusedItem = items[2];
+      assertDeepEquals(['2'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', ['ctrl', 'shift']);
+      focusedItem = items[3];
+      assertDeepEquals(
+          ['2', '4', '5'], normalizeSet(store.data.selection.items));
+
+      keydown(focusedItem, 'ArrowDown', ['ctrl', 'shift']);
+      focusedItem = items[3];
+      assertDeepEquals(
+          ['2', '4', '5', '6'], normalizeSet(store.data.selection.items));
+    });
+  });
+
   mocha.run();
 });