[MD Bookmarks] Add routing.

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

Index: chrome/test/data/webui/md_bookmarks/store_test.js
diff --git a/chrome/test/data/webui/md_bookmarks/store_test.js b/chrome/test/data/webui/md_bookmarks/store_test.js
index a1cf7e0e42cf12e54260a79b23a8a7a35bce2eaf..046b34645f8825fbadf244e8d69481f9a75a7b5d 100644
--- a/chrome/test/data/webui/md_bookmarks/store_test.js
+++ b/chrome/test/data/webui/md_bookmarks/store_test.js
@@ -6,6 +6,21 @@ suite('<bookmarks-store>', function() {
   var store;
   var TEST_TREE;
 
+  function navigateTo(route) {
+    window.history.replaceState({}, '', route);
+    window.dispatchEvent(new CustomEvent('location-changed'));
+  }
+
+  /**
+   * Overrides the chrome.bookmarks.search to pass results into the callback.
+   * @param {Array} results
+   */
+  function overrideBookmarksSearch(results) {
+    chrome.bookmarks.search = function(searchTerm, callback) {
+      callback(results);
+    };
+  }
+
   setup(function() {
     TEST_TREE = createFolder('0', [
       createFolder(
@@ -16,6 +31,7 @@ suite('<bookmarks-store>', function() {
           ]),
       createItem('4', {url: 'link4'}),
       createItem('5', {url: 'link5'}),
+      createFolder('6', []),
     ]);
 
     store = document.createElement('bookmarks-store');
@@ -23,7 +39,15 @@ suite('<bookmarks-store>', function() {
     store.setupStore_(TEST_TREE);
   });
 
-  test('initNodes inserts nodes into idToNodeMap', function(){
+  teardown(function() {
+    // Clean up anything left in URL.
+    navigateTo('/');
+  });
+
+  //////////////////////////////////////////////////////////////////////////////
+  // store initialization tests:
+
+  test('initNodes inserts nodes into idToNodeMap', function() {
     assertEquals(TEST_TREE, store.idToNodeMap_['0']);
     assertEquals(TEST_TREE.children[0], store.idToNodeMap_['1']);
     assertEquals(TEST_TREE.children[0].children[0], store.idToNodeMap_['2']);
@@ -32,23 +56,6 @@ suite('<bookmarks-store>', function() {
     assertEquals(TEST_TREE.children[2], store.idToNodeMap_['5']);
   });
 
-  test('changing selectedId changes the displayedList', function(){
-    store.selectedId = '0';
-    assertEquals(TEST_TREE.children, store.displayedList);
-    store.selectedId = '1';
-    assertEquals(TEST_TREE.children[0].children, store.displayedList);
-    store.selectedId = '2';
-    assertEquals(
-        TEST_TREE.children[0].children[0].children, store.displayedList);
-    store.selectedId = '3';
-    assertEquals(
-        TEST_TREE.children[0].children[1].children, store.displayedList);
-    store.selectedId = '4';
-    assertEquals(TEST_TREE.children[1].children, store.displayedList);
-    store.selectedId = '5';
-    assertEquals(TEST_TREE.children[2].children, store.displayedList);
-  });
-
   test('correct paths generated for nodes', function() {
     var TEST_PATHS = {
       '0': 'rootNode',
@@ -57,12 +64,30 @@ suite('<bookmarks-store>', function() {
       '3': 'rootNode.children.#0.children.#1',
       '4': 'rootNode.children.#1',
       '5': 'rootNode.children.#2',
+      '6': 'rootNode.children.#3',
     };
 
     for (var id in store.idToNodeMap_)
       assertEquals(TEST_PATHS[id], store.idToNodeMap_[id].path);
   });
 
+  //////////////////////////////////////////////////////////////////////////////
+  // editing bookmarks tree tests:
+
+  test('changing selectedId changes the displayedList', function() {
+    store.selectedId = '0';
+    assertEquals(TEST_TREE.children, store.displayedList);
+    store.selectedId = '1';
+    assertEquals(TEST_TREE.children[0].children, store.displayedList);
+    store.selectedId = '3';
+    assertEquals(
+        TEST_TREE.children[0].children[1].children, store.displayedList);
+
+    // Selecting an item selects the default folder.
+    store.selectedId = '5';
+    assertEquals(TEST_TREE.children[0].children, store.displayedList);
+  });
+
   test('store updates on selected event', function() {
     // First child of root is selected by default.
     assertEquals('1', store.selectedId);
@@ -80,9 +105,9 @@ suite('<bookmarks-store>', function() {
     assertFalse(store.idToNodeMap_['1'].isSelected);
 
     // Select a folder in separate subtree.
-    store.fire('selected-folder-changed', '5');
-    assertEquals('5', store.selectedId);
-    assertTrue(store.idToNodeMap_['5'].isSelected);
+    store.fire('selected-folder-changed', '6');
+    assertEquals('6', store.selectedId);
+    assertTrue(store.idToNodeMap_['6'].isSelected);
     assertFalse(store.idToNodeMap_['3'].isSelected);
   });
 
@@ -128,6 +153,7 @@ suite('<bookmarks-store>', function() {
       '2': 'rootNode.children.#0.children.#0',
       '3': 'rootNode.children.#0.children.#1',
       '5': 'rootNode.children.#1',
+      '6': 'rootNode.children.#2',
     };
 
     for (var id in store.idToNodeMap_)
@@ -138,6 +164,7 @@ suite('<bookmarks-store>', function() {
 
     // Check the tree is correct.
     assertEquals('5', store.rootNode.children[0].id);
+    assertEquals('6', store.rootNode.children[1].id);
 
     // idToNodeMap_ has been updated.
     assertEquals(undefined, store.idToNodeMap_['1']);
@@ -145,11 +172,13 @@ suite('<bookmarks-store>', function() {
     assertEquals(undefined, store.idToNodeMap_['3']);
     assertEquals(undefined, store.idToNodeMap_['4']);
     assertEquals(store.rootNode.children[0], store.idToNodeMap_['5']);
+    assertEquals(store.rootNode.children[1], store.idToNodeMap_['6']);
 
     // Paths have been updated.
     TEST_PATHS = {
       '0': 'rootNode',
       '5': 'rootNode.children.#0',
+      '6': 'rootNode.children.#1'
     };
 
     for (var id in store.idToNodeMap_)
@@ -159,50 +188,17 @@ suite('<bookmarks-store>', function() {
   test('selectedId updates after removing a selected folder', function() {
     // Selected folder gets removed.
     store.selectedId = '2';
-    store.onBookmarkRemoved_('2', {parentId:'1', index:'0'});
+    store.onBookmarkRemoved_('2', {parentId: '1', index: '0'});
     assertTrue(store.idToNodeMap_['1'].isSelected);
     assertEquals('1', store.selectedId);
 
     // A folder with selected folder in it gets removed.
     store.selectedId = '3';
-    store.onBookmarkRemoved_('1', {parentId:'0', index:'0'});
+    store.onBookmarkRemoved_('1', {parentId: '0', index: '0'});
     assertTrue(store.idToNodeMap_['0'].isSelected);
     assertEquals('0', store.selectedId);
   });
 
-  test('displayedList updates after searchTerm changes', function() {
-      var SEARCH_RESULTS = [
-        'cat',
-        'apple',
-        'Paris',
-      ];
-
-      chrome.bookmarks.search = function(searchTerm, callback) {
-        callback(SEARCH_RESULTS);
-      };
-
-      // Search for a non-empty string.
-      store.searchTerm = 'a';
-      assertFalse(store.rootNode.children[0].isSelected);
-      assertEquals(null, store.selectedId);
-      assertEquals(SEARCH_RESULTS, store.displayedList);
-
-      // Clear the searchTerm.
-      store.searchTerm = '';
-      var defaultFolder = store.rootNode.children[0];
-      assertTrue(defaultFolder.isSelected);
-      assertEquals(defaultFolder.id, store.selectedId);
-      assertEquals(defaultFolder.children, store.displayedList);
-
-      // Search with no bookmarks returned.
-      var EMPTY_RESULT = [];
-      chrome.bookmarks.search = function(searchTerm, callback) {
-        callback(EMPTY_RESULT);
-      };
-      store.searchTerm = 'asdf';
-      assertEquals(EMPTY_RESULT, store.displayedList);
-  });
-
   test('bookmark gets updated after editing', function() {
     // Edit title updates idToNodeMap_ properly.
     store.onBookmarkChanged_('4', {'title': 'test'});
@@ -222,4 +218,91 @@ suite('<bookmarks-store>', function() {
     assertEquals('test', store.idToNodeMap_['2'].title);
     assertEquals('http://www.google.com', store.idToNodeMap_['2'].url);
   });
+
+  //////////////////////////////////////////////////////////////////////////////
+  // search tests:
+
+  test('displayedList updates after searchTerm changes', function() {
+    var SEARCH_RESULTS = [
+      'cat',
+      'apple',
+      'Paris',
+    ];
+    overrideBookmarksSearch(SEARCH_RESULTS);
+
+    // Search for a non-empty string.
+    store.searchTerm = 'a';
+    assertFalse(store.rootNode.children[0].isSelected);
+    assertEquals(null, store.selectedId);
+    assertEquals(SEARCH_RESULTS, store.displayedList);
+
+    // Clear the searchTerm.
+    store.searchTerm = '';
+    var defaultFolder = store.rootNode.children[0];
+    assertTrue(defaultFolder.isSelected);
+    assertEquals(defaultFolder.id, store.selectedId);
+    assertEquals(defaultFolder.children, store.displayedList);
+
+    // Search with no bookmarks returned.
+    var EMPTY_RESULT = [];
+    overrideBookmarksSearch(EMPTY_RESULT);
+    store.searchTerm = 'asdf';
+    assertEquals(EMPTY_RESULT, store.displayedList);
+  });
+
+  //////////////////////////////////////////////////////////////////////////////
+  // router tests:
+
+  test('search updates from route', function() {
+    overrideBookmarksSearch([]);
+
+    // Search updates on page reload.
+    var searchTerm = 'Boat24';
+    navigateTo('/?q=' + searchTerm);

[tsergeant, 2017/01/20 02:13:09]

It's minor, but I think these tests are still not quite right.

Calling navigateTo will cause the router to update and fire a
search-term-changed event. After that, we call setupStore which can choose to
update the page state based on the router state.

This means that when we assert below it's not necessarily clear whether it
worked because of navigateTo() or because of setupStore(). eg, A bug in
setupStore() could be disguised because of navigateTo().

My preference would be to have the tests just call navigateTo, since that is the
default way the router works. Then, you can have a separate suite of tests that
check the initialization is correct (using setupStore), since that's the weird
edge case.

To do that, you'll need to create separate tests which change the url and then
create a new store.

[angelayang, 2017/01/20 03:44:37]

Yep i'll fix that up

+    store.setupStore_(TEST_TREE);
+    assertEquals(searchTerm, store.searchTerm);
+
+    // Search updates without store setup.
+    searchTerm = 'Pond';
+    navigateTo('/?q=' + searchTerm);
+    assertEquals(searchTerm, store.searchTerm);
+  });
+
+  test('route updates from search', function() {
+    overrideBookmarksSearch([]);
+    var searchTerm = 'Boat24';
+    store.searchTerm = searchTerm;
+    assertEquals('chrome://bookmarks/?q=' + searchTerm, window.location.href);
+  });
+
+  test('selectedId updates from route', function() {
+    // Folder id routes to the corresponding folder.
+    var selectedId = '3';
+    navigateTo('/?id=' + selectedId);
+    store.setupStore_(TEST_TREE);
+    assertEquals(selectedId, store.selectedId);
+
+    // Bookmark id routes to the default Bookmarks Bar.
+    var selectedId = '2';
+    navigateTo('/?id=' + selectedId);
+    store.setupStore_(TEST_TREE);
+    assertEquals(store.rootNode.children[0].id, store.selectedId);
+
+    // Invalid id routes to the default Bookmarks Bar.
+    selectedId = 'foo';
+    navigateTo('/?id=' + selectedId);
+    store.setupStore_(TEST_TREE);
+    assertEquals(store.rootNode.children[0].id, store.selectedId);
+
+    // SelectedId updates without store setup.
+    selectedId = '3';
+    navigateTo('/?id=' + selectedId);
+    assertEquals(selectedId, store.selectedId);
+  });
+
+  test('route updates from selectedId', function() {
+    var selectedId = '2';
+    store.selectedId = selectedId;
+    assertEquals('chrome://bookmarks/?id=' + selectedId, window.location.href);
+  });
 });