MD History: Move flaky focus tests into interactive UI tests

chrome/test/data/webui/md_history/md_history_focus_test.js

Index: chrome/test/data/webui/md_history/md_history_focus_test.js
diff --git a/chrome/test/data/webui/md_history/md_history_focus_test.js b/chrome/test/data/webui/md_history/md_history_focus_test.js
new file mode 100644
index 0000000000000000000000000000000000000000..522a45a99016f349f7de1642b6c0d3fa5c0fc41e
--- /dev/null
+++ b/chrome/test/data/webui/md_history/md_history_focus_test.js
@@ -0,0 +1,285 @@
+// 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_browser_test_base.js']);
+GEN('#include "chrome/browser/ui/browser.h"');
+GEN('#include "chrome/browser/ui/tabs/tab_strip_model.h"');
+GEN('#include "content/public/browser/web_contents.h"');
+
+function MaterialHistoryFocusTest() {}
+
+MaterialHistoryFocusTest.prototype = {
+  __proto__: PolymerTest.prototype,
+
+  browsePreload: 'chrome://history',
+
+  extraLibraries: PolymerTest.getLibraries(ROOT_PATH).concat([
+    'test_util.js',
+  ]),
+
+  setUp: function() {
+    PolymerTest.prototype.setUp.call(this);
+
+    suiteSetup(function() {
+      // Wait for the top-level app element to be upgraded.
+      return waitForAppUpgrade()
+          .then(() => md_history.ensureLazyLoaded())
+          .then(() => {
+            $('history-app').queryState_.queryingDisabled = true;
+          });
+    });
+  },
+};
+
+TEST_F('MaterialHistoryFocusTest', 'All', function() {
+  suite('<history-toolbar>', function() {
+    var app;
+    var toolbar;
+    var TEST_HISTORY_RESULTS =
+        [createHistoryEntry('2016-03-15', 'https://google.com')];
+
+    setup(function() {
+      window.resultsRendered = false;
+      app = replaceApp();
+
+      toolbar = app.$['toolbar'];
+    });
+
+    test('search bar is focused on load in wide mode', function() {
+      toolbar.$['main-toolbar'].narrow_ = false;
+
+      historyResult(createHistoryInfo(), []);
+      return PolymerTest.flushTasks().then(() => {
+        // Ensure the search bar is focused on load.
+        assertTrue(
+            app.$.toolbar.$['main-toolbar']
+            .getSearchField()
+            .isSearchFocused());
+      });
+    });
+
+    test('search bar is not focused on load in narrow mode', function() {
+      toolbar.$['main-toolbar'].narrow_ = true;
+
+      historyResult(createHistoryInfo(), []);
+      return PolymerTest.flushTasks().then(() => {
+        // Ensure the search bar is focused on load.
+        assertFalse(
+            $('history-app')
+            .$.toolbar.$['main-toolbar']
+            .getSearchField()
+            .isSearchFocused());
+      });
+    });
+
+    test('shortcuts to open search field', function() {
+      var field = toolbar.$['main-toolbar'].getSearchField();
+      field.blur();
+      assertFalse(field.showingSearch);
+
+      MockInteractions.pressAndReleaseKeyOn(
+          document.body, 191, '', '/');
+      assertTrue(field.showingSearch);
+      assertEquals(field.$.searchInput, field.root.activeElement);
+
+      MockInteractions.pressAndReleaseKeyOn(
+          field.$.searchInput, 27, '', 'Escape');
+      assertFalse(field.showingSearch, 'Pressing escape closes field.');
+      assertNotEquals(field.$.searchInput, field.root.activeElement);
+
+      var modifier = 'ctrl';
+      if (cr.isMac)
+        modifier = 'meta';
+
+      MockInteractions.pressAndReleaseKeyOn(
+          document.body, 70, modifier, 'f');
+      assertTrue(field.showingSearch);
+      assertEquals(field.$.searchInput, field.root.activeElement);
+    });
+  });
+
+  suite('<history-list>', function() {
+    var app;
+    var element;
+    var TEST_HISTORY_RESULTS;
+
+    suiteSetup(function() {
+      TEST_HISTORY_RESULTS = [
+        createHistoryEntry('2016-03-15', 'https://www.google.com'),
+        createHistoryEntry('2016-03-14 10:00', 'https://www.example.com'),
+        createHistoryEntry('2016-03-14 9:00', 'https://www.google.com'),
+        createHistoryEntry('2016-03-13', 'https://en.wikipedia.org')
+      ];
+      TEST_HISTORY_RESULTS[2].starred = true;
+    });
+
+    setup(function() {
+      app = replaceApp();
+      element = app.$['history'].$['infinite-list'];
+    });
+
+    test('list focus and keyboard nav', function(done) {
+      app.historyResult(createHistoryInfo(), TEST_HISTORY_RESULTS);
+      PolymerTest.flushTasks().then(function() {
+        var items = polymerSelectAll(element, 'history-item');
+
+        var focused = items[2].$.checkbox;
+        focused.focus();
+
+        // Wait for next render to ensure that focus handlers have been
+        // registered (see HistoryItemElement.attached).
+        Polymer.RenderStatus.afterNextRender(this, function() {
+          MockInteractions.pressAndReleaseKeyOn(
+              focused, 39, [], 'ArrowRight');
+          focused = items[2].$.title;
+          assertEquals(focused, element.lastFocused_);
+          assertTrue(items[2].row_.isActive());
+          assertFalse(items[3].row_.isActive());
+
+          MockInteractions.pressAndReleaseKeyOn(focused, 40, [], 'ArrowDown');
+          focused = items[3].$.title;
+          assertEquals(focused, element.lastFocused_);
+          assertFalse(items[2].row_.isActive());
+          assertTrue(items[3].row_.isActive());
+
+          MockInteractions.pressAndReleaseKeyOn(
+              focused, 39, [], 'ArrowRight');
+          focused = items[3].$['menu-button'];
+          assertEquals(focused, element.lastFocused_);
+          assertFalse(items[2].row_.isActive());
+          assertTrue(items[3].row_.isActive());
+
+          MockInteractions.pressAndReleaseKeyOn(focused, 38, [], 'ArrowUp');
+          focused = items[2].$['menu-button'];
+          assertEquals(focused, element.lastFocused_);
+          assertTrue(items[2].row_.isActive());
+          assertFalse(items[3].row_.isActive());
+
+          MockInteractions.pressAndReleaseKeyOn(focused, 37, [], 'ArrowLeft');
+          focused = items[2].$$('#bookmark-star');
+          assertEquals(focused, element.lastFocused_);
+          assertTrue(items[2].row_.isActive());
+          assertFalse(items[3].row_.isActive());
+
+          MockInteractions.pressAndReleaseKeyOn(focused, 40, [], 'ArrowDown');
+          focused = items[3].$.title;
+          assertEquals(focused, element.lastFocused_);
+          assertFalse(items[2].row_.isActive());
+          assertTrue(items[3].row_.isActive());
+
+          done();
+        });
+      });
+    });
+  });
+
+  suite('<history-synced-device-manager>', function() {
+    var element;
+
+    setup(function() {
+      element = document.createElement('history-synced-device-manager');
+      element.signInState = true;
+      element.searchTerm = '';
+      replaceBody(element);
+    });
+
+    test('focus and keyboard nav', function() {
+      var sessionList = [
+        createSession('Nexus 5', [createWindow([
+                        'http://www.example.com', 'http://www.google.com'
+                      ])]),
+        createSession('Pixel C', [createWindow(['http://www.badssl.com'])]),
+        createSession('Potato', [createWindow(['http://www.wikipedia.org'])]),
+      ];
+
+      element.sessionList = sessionList;
+
+      var lastFocused;
+      var cards;
+      var focused;
+      var onFocusHandler = element.focusGrid_.onFocus;
+      element.focusGrid_.onFocus = function(row, e) {
+        onFocusHandler.call(element.focusGrid_, row, e);
+        lastFocused = e.currentTarget;
+      };
+
+      return PolymerTest.flushTasks().then(function() {
+        cards = polymerSelectAll(element, 'history-synced-device-card');
+
+        focused = cards[0].$['menu-button'];
+        focused.focus();
+
+        // Go to the collapse button.
+        MockInteractions.pressAndReleaseKeyOn(focused, 39, [], 'ArrowRight');
+        focused = cards[0].$['collapse-button'];
+        assertEquals(focused, lastFocused);
+
+        // Go to the first url.
+        MockInteractions.pressAndReleaseKeyOn(focused, 40, [], 'ArrowDown');
+        focused = polymerSelectAll(cards[0], '.website-title')[0];
+        assertEquals(focused, lastFocused);
+
+        // Collapse the first card.
+        MockInteractions.pressAndReleaseKeyOn(focused, 38, [], 'ArrowUp');
+        focused = cards[0].$['collapse-button'];
+        assertEquals(focused, lastFocused);
+        MockInteractions.tap(focused);
+      }).then(function() {
+        // Pressing down goes to the next card.
+        MockInteractions.pressAndReleaseKeyOn(focused, 40, [], 'ArrowDown');
+        focused = cards[1].$['collapse-button'];
+        assertEquals(focused, lastFocused);
+
+        // Expand the first card.
+        MockInteractions.pressAndReleaseKeyOn(focused, 38, [], 'ArrowUp');
+        focused = cards[0].$['collapse-button'];
+        assertEquals(focused, lastFocused);
+        MockInteractions.tap(focused);
+      }).then(function() {
+        // First card's urls are focusable again.
+        MockInteractions.pressAndReleaseKeyOn(focused, 40, [], 'ArrowDown');
+        focused = polymerSelectAll(cards[0], '.website-title')[0];
+        assertEquals(focused, lastFocused);
+
+        // Remove the second URL from the first card.
+        sessionList[0].windows[0].tabs.splice(1, 1);
+        element.sessionList = sessionList.slice();
+        return PolymerTest.flushTasks();
+      }).then(function() {
+        cards = polymerSelectAll(element, 'history-synced-device-card');
+
+        // Go to the next card's menu buttons.
+        MockInteractions.pressAndReleaseKeyOn(focused, 40, [], 'ArrowDown');
+        focused = cards[1].$['collapse-button'];
+        assertEquals(focused, lastFocused);
+
+        MockInteractions.pressAndReleaseKeyOn(focused, 38, [], 'ArrowUp');
+        focused = polymerSelectAll(cards[0], '.website-title')[0];
+        assertEquals(focused, lastFocused);
+
+        // Remove the second card.
+        sessionList.splice(1, 1);
+        element.sessionList = sessionList.slice();
+        return PolymerTest.flushTasks();
+      }).then(function() {
+        cards = polymerSelectAll(element, 'history-synced-device-card');
+
+        // Pressing down goes to the next card.
+        MockInteractions.pressAndReleaseKeyOn(focused, 40, [], 'ArrowDown');
+        focused = cards[1].$['collapse-button'];
+        assertEquals(focused, lastFocused);
+      });
+    });
+  });
+
+  mocha.run();
+});