MD WebUI: Reimplement cr-shared-menu using iron-dropdown.

chrome/test/data/webui/cr_elements/cr_shared_menu_tests.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.
+
+/** @fileoverview Suite of tests for cr-shared-menu. */
+suite('cr-shared-menu', function() {
+  var menu;
+
+  var button;
+
+  var item1;
+  var item2;
+  var item3;
+
+  function afterOpen(callback) {
+    menu.addEventListener('iron-overlay-opened', function f() {
+      menu.removeEventListener('iron-overlay-opened', f);
+      callback();
+    });
+  }
+
+  suiteSetup(function() {
+    return PolymerTest.importHtml(
+        'chrome://resources/polymer/v1_0/paper-item/paper-item.html');
+  });
+
+  setup(function() {
+    PolymerTest.clearBody();
+    // Basic wiring to set up a menu which opens when a button is pressed.
+    menu = document.createElement('cr-shared-menu');
+    menu.$$('#dropdown').noAnimations = true;
+
+    item1 = document.createElement('paper-item');
+    menu.appendChild(item1);
+    item2 = document.createElement('paper-item');
+    menu.appendChild(item2);
+    item3 = document.createElement('paper-item');
+    menu.appendChild(item3);
+
+    button = document.createElement('button');
+    button.addEventListener('tap', function() {
+      menu.toggleMenu(button, {});
+    });
+
+    document.body.appendChild(menu);
+    document.body.appendChild(button);
+  });
+
+  test('opening and closing menu', function(done) {
+    MockInteractions.tap(button);
+    assertTrue(menu.menuOpen);
+
+    afterOpen(function() {
+      // Using tap to close the menu requires that the iron-overlay-behavior
+      // has finished initializing, which happens asynchronously between
+      // tapping the button and firing iron-overlay-opened.
+      MockInteractions.tap(document.body);
+      assertFalse(menu.menuOpen);
+
+      MockInteractions.tap(button);
+      assertTrue(menu.menuOpen);
+
+      // Pressing escape should close the menu.
+      MockInteractions.pressAndReleaseKeyOn(menu, 27);
+      assertTrue(menu.menuOpen);
+      done();
+    });
+  });
+
+  test('refocus button on close', function(done) {
+    button.focus();
+    MockInteractions.tap(button);
+
+    afterOpen(function() {
+      assertTrue(menu.menuOpen);
+      // Focus is applied asynchronously after the menu is opened.
+      assertEquals(item1, menu.shadowRoot.activeElement);
+
+      menu.closeMenu();
+      assertFalse(menu.menuOpen);
+
+      // Button should regain focus after closing the menu.
+      assertEquals(button, document.activeElement);
+
+      done();
+    });
+  });
+
+  test('closeMenu does not refocus button when focus moves', function(done) {
+    var input = document.createElement('input');
+    document.body.appendChild(input);
+
+    button.focus();
+    MockInteractions.tap(button);
+
+    afterOpen(function() {
+      input.focus();
+      menu.closeMenu();
+      assertEquals(input, document.activeElement);
+
+      done();
+    });
+  });
+
+  test('focus is trapped inside the menu', function(done) {
+    button.focus();
+    MockInteractions.tap(button);
+
+    afterOpen(function() {
+      // Simulate shift-tab on first element.
+      assertEquals(item1, menu.shadowRoot.activeElement);
+      MockInteractions.pressAndReleaseKeyOn(item1, 9, ['shift']);
+      assertEquals(item3, menu.shadowRoot.activeElement);
+
+      // Simulate tab on last element.
+      MockInteractions.pressAndReleaseKeyOn(item3, 9);
+      assertEquals(item1, menu.shadowRoot.activeElement);
+
+      done();
+    });
+  });
+});