diff options
Diffstat (limited to 'comm/mail/components/unifiedtoolbar/test/browser/browser_unifiedToolbarTab.js')
| -rw-r--r-- | comm/mail/components/unifiedtoolbar/test/browser/browser_unifiedToolbarTab.js | 285 |
1 files changed, 285 insertions, 0 deletions
diff --git a/comm/mail/components/unifiedtoolbar/test/browser/browser_unifiedToolbarTab.js b/comm/mail/components/unifiedtoolbar/test/browser/browser_unifiedToolbarTab.js new file mode 100644 index 0000000000..336199ee51 --- /dev/null +++ b/comm/mail/components/unifiedtoolbar/test/browser/browser_unifiedToolbarTab.js @@ -0,0 +1,285 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, you can obtain one at http://mozilla.org/MPL/2.0/. */ + +let tabmail = document.getElementById("tabmail"); +registerCleanupFunction(() => { + tabmail.closeOtherTabs(tabmail.tabInfo[0]); +}); +let browser; +let testDocument; + +const waitForRender = () => { + return new Promise(resolve => { + window.requestAnimationFrame(resolve); + }); +}; +const getTabButton = tab => tab.shadowRoot.querySelector("button"); +/** + * Get the relevant elements for the tab at the given index. + * + * @param {number} tabIndex + * @returns {{tab: UnifiedToolbarTab, button: HTMLButtonElement, pane: HTMLElement}} + */ +const getTabElements = tabIndex => { + const tab = testDocument.querySelector( + `unified-toolbar-tab:nth-child(${tabIndex})` + ); + const button = getTabButton(tab); + const pane = tab.pane; + return { tab, button, pane }; +}; + +add_setup(async function () { + let tab = tabmail.openTab("contentTab", { + url: "chrome://mochitests/content/browser/comm/mail/components/unifiedtoolbar/test/browser/files/unifiedToolbarTab.xhtml", + }); + + await BrowserTestUtils.browserLoaded(tab.browser); + tab.browser.focus(); + browser = tab.browser; + testDocument = tab.browser.contentWindow.document; +}); + +add_task(function test_tabElementInitialization() { + const activeTab = testDocument.querySelector("unified-toolbar-tab[selected]"); + is( + activeTab.getAttribute("role"), + "presentation", + "The custom element is just for show" + ); + ok( + !activeTab.hasAttribute("aria-controls"), + "aria-controls removed from custom element" + ); + ok(activeTab.hasAttribute("selected"), "Active tab kept itself selected"); + const tabButton = getTabButton(activeTab); + is(tabButton.getAttribute("role"), "tab", "Active tab is marked as tab"); + is(tabButton.tabIndex, 0, "Active tab is in the focus ring"); + is( + tabButton.getAttribute("aria-selected"), + "true", + "Tab is marked as selected" + ); + ok( + tabButton.hasAttribute("aria-controls"), + "aria-controls got given to button" + ); + + const otherTab = testDocument.querySelector( + "unified-toolbar-tab:not([selected])" + ); + is( + otherTab.getAttribute("role"), + "presentation", + "The custom element is just for show on the other tab" + ); + ok( + !otherTab.hasAttribute("aria-controls"), + "aria-controls removed from the other tab" + ); + ok(!otherTab.hasAttribute("selected"), "Other tab didn't select itself"); + const otherButton = getTabButton(otherTab); + is(otherButton.getAttribute("role"), "tab", "Other tab is marked as tab"); + is(otherButton.tabIndex, -1, "Other tab is not in the focus ring"); + ok( + !otherButton.hasAttribute("aria-selected"), + "Other tab isn't marked as selected" + ); + ok( + otherButton.hasAttribute("aria-controls"), + "aria-controls got given to other button" + ); +}); + +add_task(async function test_paneGetter() { + const tab1 = getTabElements(1); + const tabPane = testDocument.getElementById("tabPane"); + const tab2 = getTabElements(2); + const otherTabPane = testDocument.getElementById("otherTabPane"); + + is( + tab1.button.getAttribute("aria-controls"), + tabPane.id, + "Tab 1 controls tab 1 pane" + ); + is( + tab2.button.getAttribute("aria-controls"), + otherTabPane.id, + "Tab 2 controls tab 2 pane" + ); + + Assert.strictEqual( + tab1.tab.pane, + tabPane, + "Tab 1 pane getter returns #tabPane" + ); + Assert.strictEqual( + tab2.tab.pane, + otherTabPane, + "Tab 2 pane getter returns #otherTabPane" + ); +}); + +add_task(async function test_unselect() { + const tab = getTabElements(1); + + tab.tab.unselect(); + + ok(!tab.button.hasAttribute("aria-selected"), "Tab not marked as selected"); + is(tab.button.tabIndex, -1, "Tab not in focus ring"); + ok(!tab.tab.hasAttribute("selected"), "Tab not marked selected"); + ok(tab.pane.hidden, "Tab pane hidden"); +}); + +add_task(async function test_select() { + const tab1 = getTabElements(1); + const tab2 = getTabElements(2); + + let tabswitchPromise = BrowserTestUtils.waitForEvent( + testDocument.body, + "tabswitch" + ); + tab1.tab.select(); + + await tabswitchPromise; + ok(tab1.tab.hasAttribute("selected"), "Tab 1 selected"); + is( + tab1.button.getAttribute("aria-selected"), + "true", + "Tab 1 marked as selected" + ); + is(tab1.button.tabIndex, 0, "Tab 1 keyboard selectable"); + ok(!tab1.pane.hidden, "Tab pane for tab 1 visible"); + + tabswitchPromise = BrowserTestUtils.waitForEvent(tab2.tab, "tabswitch"); + tab2.tab.select(); + + await tabswitchPromise; + ok(tab2.tab.hasAttribute("selected"), "Tab 2 selected"); + is( + tab2.button.getAttribute("aria-selected"), + "true", + "Tab 2 has a11y selection" + ); + is(tab2.button.tabIndex, 0, "Tab 2 keyboard selectable"); + ok(!tab2.pane.hidden, "Tab pane for tab 2 visible"); + + ok(!tab1.tab.hasAttribute("selected"), "Tab 1 unselected"); + ok(!tab1.button.hasAttribute("aria-selected"), "Tab 1 marked as unselected"); + is(tab1.button.tabIndex, -1, "Tab 1 not in focus ring"); + ok(tab1.pane.hidden, "Tab pane for tab 1 hidden"); +}); + +add_task(async function test_switchingTabWithMouse() { + const tab1 = getTabElements(1); + const tab2 = getTabElements(2); + + tab2.button.click(); + ok(tab2.tab.hasAttribute("selected"), "Other tab is selected"); + is(tab2.button.tabIndex, 0, "Other tab is in focus ring"); + ok(!tab1.tab.hasAttribute("selected"), "First tab is not selected"); + is(tab1.button.tabIndex, -1, "First tab is not in focus ring"); + ok( + BrowserTestUtils.is_visible(tab2.pane), + "Tab pane for selected tab is visible" + ); + ok(BrowserTestUtils.is_hidden(tab1.pane), "Tab pane for first tab is hidden"); + + tab1.button.click(); + ok(tab1.tab.hasAttribute("selected"), "First tab is selected"); + is(tab1.button.tabIndex, 0, "First tab is in focus ring"); + ok(!tab2.tab.hasAttribute("selected"), "Other tab is not selected"); + is(tab2.button.tabIndex, -1, "Other tab is not in focus ring"); + ok( + BrowserTestUtils.is_visible(tab1.pane), + "Tab pane for first tab is visible" + ); + ok(BrowserTestUtils.is_hidden(tab2.pane), "Tab pane for other tab is hidden"); +}); + +add_task(async function test_switchingTabWithKeyboard() { + const tab1 = getTabElements(1); + const tab2 = getTabElements(2); + + tab1.tab.focus(); + is(testDocument.activeElement, tab1.tab, "Initially first tab is active"); + + await BrowserTestUtils.synthesizeKey("KEY_ArrowRight", {}, browser); + is(testDocument.activeElement, tab2.tab, "Second tab is focused"); + is( + tab2.tab.shadowRoot.activeElement, + tab2.button, + "Button within tab is focused" + ); + await BrowserTestUtils.synthesizeKey(" ", {}, browser); + ok(tab2.tab.hasAttribute("selected"), "Other tab is selected"); + is(tab2.button.tabIndex, 0, "Other tab is in focus ring"); + ok(!tab1.tab.hasAttribute("selected"), "First tab is not selected"); + is(tab1.button.tabIndex, -1, "First tab is not in focus ring"); + ok( + BrowserTestUtils.is_visible(tab2.pane), + "Tab pane for selected tab is visible" + ); + ok(BrowserTestUtils.is_hidden(tab1.pane), "Tab pane for first tab is hidden"); + + await BrowserTestUtils.synthesizeKey("KEY_ArrowLeft", {}, browser); + is(testDocument.activeElement, tab1.tab, "Previous tab is selected"); + await BrowserTestUtils.synthesizeKey("KEY_End", {}, browser); + is(testDocument.activeElement, tab2.tab, "Last tab is selected"); + await BrowserTestUtils.synthesizeKey("KEY_Home", {}, browser); + is(testDocument.activeElement, tab1.tab, "First tab is selected"); + await BrowserTestUtils.synthesizeKey("KEY_Enter", {}, browser); + ok(tab1.tab.hasAttribute("selected"), "First tab is selected"); + is(tab1.button.tabIndex, 0, "First tab is in focus ring"); + ok(!tab2.tab.hasAttribute("selected"), "Other tab is not selected"); + is(tab2.button.tabIndex, -1, "Other tab is not in focus ring"); + ok( + BrowserTestUtils.is_visible(tab1.pane), + "Tab pane for first tab is visible" + ); + ok(BrowserTestUtils.is_hidden(tab2.pane), "Tab pane for other tab is hidden"); +}); + +add_task(async function test_switchingTabWithKeyboardRTL() { + testDocument.dir = "rtl"; + await waitForRender(); + const tab1 = getTabElements(1); + const tab2 = getTabElements(2); + + tab1.tab.focus(); + is(testDocument.activeElement, tab1.tab, "Initially first tab is active"); + + await BrowserTestUtils.synthesizeKey("KEY_ArrowLeft", {}, browser); + is(testDocument.activeElement, tab2.tab, "Second tab is selected"); + is( + tab2.tab.shadowRoot.activeElement, + tab2.button, + "Button within tab is focused" + ); + await BrowserTestUtils.synthesizeKey(" ", {}, browser); + ok(tab2.tab.hasAttribute("selected"), "Other tab is selected"); + is(tab2.button.tabIndex, 0, "Other tab is in focus ring"); + ok(!tab1.tab.hasAttribute("selected"), "First tab is not selected"); + is(tab1.button.tabIndex, -1, "First tab is not in focus ring"); + ok( + BrowserTestUtils.is_visible(tab2.pane), + "Tab pane for selected tab is visible" + ); + ok(BrowserTestUtils.is_hidden(tab1.pane), "Tab pane for first tab is hidden"); + + await BrowserTestUtils.synthesizeKey("KEY_ArrowRight", {}, browser); + is(testDocument.activeElement, tab1.tab, "Previous tab is selected"); + await BrowserTestUtils.synthesizeKey("KEY_Enter", {}, browser); + ok(tab1.tab.hasAttribute("selected"), "First tab is selected"); + is(tab1.button.tabIndex, 0, "First tab is in focus ring"); + ok(!tab2.tab.hasAttribute("selected"), "Other tab is not selected"); + is(tab2.button.tabIndex, -1, "Other tab is not in focus ring"); + ok( + BrowserTestUtils.is_visible(tab1.pane), + "Tab pane for first tab is visible" + ); + ok(BrowserTestUtils.is_hidden(tab2.pane), "Tab pane for other tab is hidden"); + + testDocument.dir = "ltr"; +}); |