MD Settings: Implementing modal popup/action menus.

chrome/test/data/webui/settings/settings_action_menu_test.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 Tests for settings-action-menu element. */
+suite('SettingsActionMenu', function() {
+  var menu = null;
+  var buttons = null;

[Dan Beam, 2016/10/14 03:51:13]

nit: @types if you can

[dpapad, 2016/10/14 17:39:23]

Done.

+
+  setup(function() {
+    PolymerTest.clearBody();
+
+    document.body.innerHTML = `
+      <button id='dots'>...</button>

[Dan Beam, 2016/10/14 03:51:13]

nit: use " instead of '

+      <dialog is='settings-action-menu'>
+        <button class='dropdown-item'>Un</button>
+        <button class='dropdown-item'>Dos</button>
+        <button class='dropdown-item'>Tres</button>
+      </dialog>
+    `;
+
+    menu = document.querySelector('dialog[is=settings-action-menu]');
+    buttons = menu.querySelectorAll('button');

[Dan Beam, 2016/10/14 03:51:13]

arguable nit: use .dropdown-item / items instead

[dpapad, 2016/10/14 17:39:23]

Done.

+    assertEquals(3, buttons.length);
+  });
+
+  teardown(function() {
+    if (menu.open)
+      menu.close();
+  });
+
+  test('focus after showing', function() {
+    menu.showAt(document.querySelector('#dots'));
+    assertEquals(buttons[0], menu.root.activeElement);
+    assertEquals(buttons[0], menu.querySelector('[autofocus]'));

[Dan Beam, 2016/10/14 03:51:13]

do you want to check that this is the only [autofocus] thing as well (not just
the first?)

[dpapad, 2016/10/14 17:39:23]

Done, good idea.

+
+    menu.close();
+    buttons[0].hidden = true;
+    menu.showAt(document.querySelector('#dots'));
+    assertEquals(buttons[1], menu.root.activeElement);
+    assertEquals(buttons[1], menu.querySelector('[autofocus]'));
+
+    menu.close();
+    buttons[1].hidden = true;
+    menu.showAt(document.querySelector('#dots'));
+    assertEquals(buttons[2], menu.root.activeElement);
+    assertEquals(buttons[2], menu.querySelector('[autofocus]'));
+
+    menu.close();
+    buttons[2].disabled = true;
+    menu.showAt(document.querySelector('#dots'));
+    assertEquals(null, menu.root.activeElement);
+    assertEquals(null, menu.querySelector('[autofocus]'));
+  });
+
+  test('focus after down/up arrow', function() {
+    function down() {
+      MockInteractions.keyDownOn(menu, 'ArrowDown', [], 'ArrowDown');
+    }
+
+    function up() {
+      MockInteractions.keyDownOn(menu, 'ArrowUp', [], 'ArrowUp');
+    }
+
+    menu.showAt(document.querySelector('#dots'));
+    assertEquals(buttons[0], menu.root.activeElement);
+
+    down();
+    assertEquals(buttons[1], menu.root.activeElement);
+    down();
+    assertEquals(buttons[2], menu.root.activeElement);
+    down();
+    assertEquals(buttons[0], menu.root.activeElement);
+    up();
+    assertEquals(buttons[2], menu.root.activeElement);
+    up();
+    assertEquals(buttons[1], menu.root.activeElement);
+    up();
+    assertEquals(buttons[0], menu.root.activeElement);
+    up();
+    assertEquals(buttons[2], menu.root.activeElement);
+
+    buttons[1].disabled = true;
+    up();
+    assertEquals(buttons[0], menu.root.activeElement);
+  });
+
+  test('close on resize', function() {
+    menu.showAt(document.querySelector('#dots'));
+    assertTrue(menu.open);
+
+    window.dispatchEvent(new CustomEvent('resize'));
+    assertFalse(menu.open);
+  });
+
+  test('close on Tab', function() {
+    menu.showAt(document.querySelector('#dots'));
+    assertTrue(menu.open);
+
+    MockInteractions.keyDownOn(menu, 'Tab', [], 'Tab');
+    assertFalse(menu.open);
+  });
+});