diff options
Diffstat (limited to '')
-rw-r--r-- | browser/base/content/test/sidebar/browser_sidebar_switcher.js | 289 |
1 files changed, 289 insertions, 0 deletions
diff --git a/browser/base/content/test/sidebar/browser_sidebar_switcher.js b/browser/base/content/test/sidebar/browser_sidebar_switcher.js new file mode 100644 index 0000000000..032c23b029 --- /dev/null +++ b/browser/base/content/test/sidebar/browser_sidebar_switcher.js @@ -0,0 +1,289 @@ +registerCleanupFunction(() => { + SidebarUI.hide(); +}); + +/** + * Helper function that opens a sidebar switcher panel popup menu + * @returns Promise that resolves when the switcher panel popup is shown + * without any action from a user/test + */ +function showSwitcherPanelPromise() { + return new Promise(resolve => { + SidebarUI._switcherPanel.addEventListener( + "popupshown", + () => { + resolve(); + }, + { once: true } + ); + SidebarUI.showSwitcherPanel(); + }); +} + +/** + * Helper function that waits for a sidebar switcher panel's "popupshown" event + * @returns Promise which resolves when the popup menu is opened + */ +async function waitForSwitcherPopupShown() { + return BrowserTestUtils.waitForEvent(SidebarUI._switcherPanel, "popupshown"); +} + +/** + * Helper function that sends a mouse click to a specific menu item or a key + * event to a active menu item of the sidebar switcher menu popup. Provide a + * querySelector parameter when a click behavior is needed. + * @param {String} [querySelector=null] An HTML attribute of the menu item + * to be clicked + * @returns Promise that resolves when both the menu popup is hidden and + * the sidebar itself is focused + */ +function pickSwitcherMenuitem(querySelector = null) { + let sidebarPopup = document.querySelector("#sidebarMenu-popup"); + let hideSwitcherPanelPromise = Promise.all([ + BrowserTestUtils.waitForEvent(window, "SidebarFocused"), + BrowserTestUtils.waitForEvent(sidebarPopup, "popuphidden"), + ]); + if (querySelector) { + document.querySelector(querySelector).click(); + } else { + EventUtils.synthesizeKey("KEY_Enter", {}); + } + return hideSwitcherPanelPromise; +} + +/** + * Helper function to test a key handling of sidebar menu popup items used to + * access a specific sidebar + * @param {String} key Event.key to open the switcher menu popup + * @param {String} sidebarTitle Title of the sidebar that is to be activated + * during the test (capitalized one word versions), + * i.e. "History" or "Tabs" + */ +async function testSidebarMenuKeyToggle(key, sidebarTitle) { + info(`Testing "${key}" key handling of sidebar menu popup items + to access ${sidebarTitle} sidebar`); + + Assert.ok(SidebarUI.isOpen, "Sidebar is open"); + + let sidebarSwitcher = document.querySelector("#sidebar-switcher-target"); + let sidebar = document.getElementById("sidebar"); + let searchBox = sidebar.firstElementChild; + + // If focus is on the search field (i.e. on the History sidebar), + // or if the focus is on the awesomebar (bug 1835899), + // move it to the switcher target: + + if (searchBox && searchBox.matches(":focus")) { + EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true, repeat: 2 }); + } else if (!sidebarSwitcher.matches(":focus")) { + sidebarSwitcher.focus(); + } + + Assert.equal( + document.activeElement, + sidebarSwitcher, + "The sidebar switcher target button is focused" + ); + Assert.ok( + sidebarSwitcher.matches(":focus"), + "The sidebar switcher target button is focused" + ); + Assert.equal( + SidebarUI._switcherPanel.state, + "closed", + "Sidebar menu popup is closed" + ); + + let promisePopupShown = waitForSwitcherPopupShown(); + + // Activate sidebar switcher target to open its sidebar menu popup: + EventUtils.synthesizeKey(key, {}); + + await promisePopupShown; + + Assert.equal( + SidebarUI._switcherPanel.state, + "open", + "Sidebar menu popup is open" + ); + + info("Testing keyboard navigation between sidebar menu popup controls"); + + let arrowDown = async (menuitemId, msg) => { + let menuItemActive = BrowserTestUtils.waitForEvent( + SidebarUI._switcherPanel, + "DOMMenuItemActive" + ); + EventUtils.synthesizeKey("KEY_ArrowDown", {}); + await menuItemActive; + Assert.ok( + document.getElementById(menuitemId).hasAttribute("_moz-menuactive"), + msg + ); + }; + + // Move to the first sidebar switcher option: + await arrowDown( + "sidebar-switcher-bookmarks", + "The 1st sidebar menu item (Bookmarks) is active" + ); + + // Move to the next sidebar switcher option: + await arrowDown( + "sidebar-switcher-history", + "The 2nd sidebar menu item (History) is active" + ); + + if (sidebarTitle === "Tabs") { + await arrowDown( + "sidebar-switcher-tabs", + "The 3rd sidebar menu item (Synced Tabs) is active" + ); + } + + // Activate the tested sidebar switcher option to open the tested sidebar: + let sidebarShown = BrowserTestUtils.waitForEvent(window, "SidebarShown"); + await pickSwitcherMenuitem(/* querySelector = */ null); + await sidebarShown; + + info("Testing keyboard navigation when a sidebar menu popup is closed"); + + Assert.equal( + SidebarUI._switcherPanel.state, + "closed", + "Sidebar menu popup is closed" + ); + // Test the sidebar panel is updated + Assert.equal( + SidebarUI._box.getAttribute("sidebarcommand"), + `view${sidebarTitle}Sidebar` /* e.g. "viewHistorySidebar" */, + `${sidebarTitle} sidebar loaded` + ); + Assert.equal( + SidebarUI.currentID, + `view${sidebarTitle}Sidebar` /* e.g. "viewHistorySidebar" */, + `${sidebarTitle}'s current ID is updated to a target view` + ); +} + +add_task(async function markup() { + // If a sidebar is already open, close it. + if (!document.getElementById("sidebar-box").hidden) { + Assert.ok( + false, + "Unexpected sidebar found - a previous test failed to cleanup correctly" + ); + SidebarUI.hide(); + } + + let sidebarPopup = document.querySelector("#sidebarMenu-popup"); + let sidebarSwitcher = document.querySelector("#sidebar-switcher-target"); + let sidebarTitle = document.querySelector("#sidebar-title"); + + info("Test default markup of the sidebar switcher control"); + + Assert.equal( + sidebarSwitcher.tagName, + "toolbarbutton", + "Sidebar switcher target control is a toolbarbutton" + ); + Assert.equal( + sidebarSwitcher.children[1], + sidebarTitle, + "Sidebar switcher target control has a child label element" + ); + Assert.equal( + sidebarTitle.tagName, + "label", + "Sidebar switcher target control has a label element (that is expected to provide its accessible name" + ); + Assert.equal( + sidebarSwitcher.getAttribute("aria-expanded"), + "false", + "Sidebar switcher button is collapsed by default" + ); + + info("Test dynamic changes in the markup of the sidebar switcher control"); + + await SidebarUI.show("viewBookmarksSidebar"); + await showSwitcherPanelPromise(); + + Assert.equal( + sidebarSwitcher.getAttribute("aria-expanded"), + "true", + "Sidebar switcher button is expanded when a sidebar menu is shown" + ); + + let waitForPopupHidden = BrowserTestUtils.waitForEvent( + sidebarPopup, + "popuphidden" + ); + + // Close on Escape anywhere + EventUtils.synthesizeKey("KEY_Escape", {}); + await waitForPopupHidden; + + Assert.equal( + sidebarSwitcher.getAttribute("aria-expanded"), + "false", + "Sidebar switcher button is collapsed when a sidebar menu is dismissed" + ); + + SidebarUI.hide(); +}); + +add_task(async function keynav() { + // If a sidebar is already open, close it. + if (SidebarUI.isOpen) { + Assert.ok( + false, + "Unexpected sidebar found - a previous test failed to cleanup correctly" + ); + SidebarUI.hide(); + } + + await SidebarUI.show("viewBookmarksSidebar"); + + await testSidebarMenuKeyToggle("KEY_Enter", "History"); + await testSidebarMenuKeyToggle(" ", "Tabs"); + + SidebarUI.hide(); +}); + +add_task(async function mouse() { + // If a sidebar is already open, close it. + if (!document.getElementById("sidebar-box").hidden) { + Assert.ok( + false, + "Unexpected sidebar found - a previous test failed to cleanup correctly" + ); + SidebarUI.hide(); + } + + let sidebar = document.querySelector("#sidebar-box"); + await SidebarUI.show("viewBookmarksSidebar"); + + await showSwitcherPanelPromise(); + await pickSwitcherMenuitem("#sidebar-switcher-history"); + Assert.equal( + sidebar.getAttribute("sidebarcommand"), + "viewHistorySidebar", + "History sidebar loaded" + ); + + await showSwitcherPanelPromise(); + await pickSwitcherMenuitem("#sidebar-switcher-tabs"); + Assert.equal( + sidebar.getAttribute("sidebarcommand"), + "viewTabsSidebar", + "Tabs sidebar loaded" + ); + + await showSwitcherPanelPromise(); + await pickSwitcherMenuitem("#sidebar-switcher-bookmarks"); + Assert.equal( + sidebar.getAttribute("sidebarcommand"), + "viewBookmarksSidebar", + "Bookmarks sidebar loaded" + ); +}); |