Bug 1473210 - Add meatball menu sanity tests. r=birtles
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Thu, 30 Aug 2018 04:19:59 +0000
changeset 482355 d8fc943845d6919d1a2ae73fc9875f6e13e565a0
parent 482354 0a92f8ace9e2d5f72f080236f158a839673f14f6
child 482356 09de350001f07965f787c19f298fd0cd6cd839fa
child 482396 c36af4e5a515788961c6e6a2675e98a9bcff4308
push id232
push userfmarier@mozilla.com
push dateWed, 05 Sep 2018 20:45:54 +0000
reviewersbirtles
bugs1473210
milestone63.0a1
Bug 1473210 - Add meatball menu sanity tests. r=birtles This test will check the following: * Open / Close the meatball menu with click the button. * Handling the keys. (Up / Down / Home / End) * Close the meatball menu with F1 key. * Close the meatball menu with Escape key. Differential Revision: https://phabricator.services.mozilla.com/D3592
devtools/client/framework/test/browser.ini
devtools/client/framework/test/browser_toolbox_meatball.js
--- a/devtools/client/framework/test/browser.ini
+++ b/devtools/client/framework/test/browser.ini
@@ -78,16 +78,17 @@ skip-if = os == 'win' || debug # Bug 128
 [browser_toolbox_dynamic_registration.js]
 [browser_toolbox_getpanelwhenready.js]
 [browser_toolbox_highlight.js]
 [browser_toolbox_hosts.js]
 [browser_toolbox_hosts_size.js]
 [browser_toolbox_hosts_telemetry.js]
 [browser_toolbox_keyboard_navigation.js]
 skip-if = os == "mac" # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard Preferences
+[browser_toolbox_meatball.js]
 [browser_toolbox_options.js]
 [browser_toolbox_options_multiple_tabs.js]
 [browser_toolbox_options_disable_buttons.js]
 [browser_toolbox_options_disable_cache-01.js]
 [browser_toolbox_options_disable_cache-02.js]
 [browser_toolbox_options_disable_js.js]
 [browser_toolbox_options_enable_serviceworkers_testing.js]
 skip-if = verify
new file mode 100644
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_meatball.js
@@ -0,0 +1,93 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Sanity test for meatball menu.
+//
+// We also use this to test the common Menu* components since we don't currently
+// have a means of testing React components in isolation.
+
+const { focusableSelector } = require("devtools/client/shared/focus");
+const { Toolbox } = require("devtools/client/framework/toolbox");
+
+add_task(async function() {
+  const tab = await addTab("about:blank");
+  const toolbox = await openToolboxForTab(tab, "inspector", Toolbox.HostType.BOTTOM);
+
+  info("Check opening meatball menu by clicking the menu button");
+  await openMeatballMenuWithClick(toolbox);
+  const menuDockToBottom = toolbox.doc.getElementById("toolbox-meatball-menu-dock-bottom");
+  ok(menuDockToBottom.getAttribute("aria-checked") === "true",
+     "menuDockToBottom has checked");
+
+  info("Check closing meatball menu by clicking outside the popup area");
+  await closeMeatballMenuWithClick(toolbox);
+
+  info("Check moving the focus element with key event");
+  await openMeatballMenuWithClick(toolbox);
+  checkKeyHandling(toolbox);
+
+  info("Check closing meatball menu with escape key");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, toolbox.win);
+  await waitForMeatballMenuToClose(toolbox);
+
+  // F1 should trigger the settings panel and close the menu at the same time.
+  info("Check closing meatball menu with F1 key");
+  await openMeatballMenuWithClick(toolbox);
+  EventUtils.synthesizeKey("VK_F1", {}, toolbox.win);
+  await waitForMeatballMenuToClose(toolbox);
+});
+
+async function openMeatballMenuWithClick(toolbox) {
+  const meatballButton = toolbox.doc.getElementById("toolbox-meatball-menu-button");
+  await waitUntil(() => meatballButton.style.pointerEvents !== "none");
+  EventUtils.synthesizeMouseAtCenter(meatballButton, {}, toolbox.win);
+
+  const panel = toolbox.doc.querySelectorAll(".tooltip-xul-wrapper");
+  const shownListener = new Promise(res => {
+    panel[0].addEventListener("popupshown", res, { once: true });
+  });
+
+  const menuPanel = toolbox.doc.getElementById("toolbox-meatball-menu-button-panel");
+  ok(menuPanel, "meatball panel is available");
+
+  info("Waiting for the menu panel to be displayed");
+
+  await shownListener;
+  await waitUntil(() => menuPanel.classList.contains("tooltip-visible"));
+}
+
+async function closeMeatballMenuWithClick(toolbox) {
+  const meatballButton = toolbox.doc.getElementById("toolbox-meatball-menu-button");
+  await waitUntil(() => meatballButton.style.pointerEvents === "none");
+  meatballButton.click();
+
+  const menuPanel = toolbox.doc.getElementById("toolbox-meatball-menu-button-panel");
+  ok(menuPanel, "meatball panel is available");
+
+  info("Waiting for the menu panel to be hidden");
+  await waitUntil(() => !menuPanel.classList.contains("tooltip-visible"));
+}
+
+async function waitForMeatballMenuToClose(toolbox) {
+  const menuPanel = toolbox.doc.getElementById("toolbox-meatball-menu-button-panel");
+  ok(menuPanel, "meatball panel is available");
+
+  info("Waiting for the menu panel to be hidden");
+  await waitUntil(() => !menuPanel.classList.contains("tooltip-visible"));
+}
+
+function checkKeyHandling(toolbox) {
+  const selectable =
+    toolbox.doc.getElementById("toolbox-meatball-menu").querySelectorAll(focusableSelector);
+
+  EventUtils.synthesizeKey("VK_DOWN", {}, toolbox.win);
+  is(toolbox.doc.activeElement, selectable[0], "First item selected with down key.");
+  EventUtils.synthesizeKey("VK_UP", {}, toolbox.win);
+  is(toolbox.doc.activeElement, selectable[selectable.length - 1], "End item selected with up key.");
+  EventUtils.synthesizeKey("VK_HOME", {}, toolbox.win);
+  is(toolbox.doc.activeElement, selectable[0], "First item selected with home key.");
+  EventUtils.synthesizeKey("VK_END", {}, toolbox.win);
+  is(toolbox.doc.activeElement, selectable[selectable.length - 1], "End item selected with down key.");
+}