mozilla-central/toolkit/content/tests/widgets/test_moz_page_nav.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Errors

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>MozPageNav Tests</title>
<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
<script type="module" src="chrome://global/content/elements/moz-page-nav.mjs"></script>
</head>
<style>
body {
display: flex;
}
#navigation {
width: var(--page-nav-width);
}
</style>
<body>
<p id="display"></p>
<div id="content">
<div id="navigation">
<moz-page-nav heading="Heading">
<moz-page-nav-button view="view-one" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
<span class="view-name">View 1</span>
</moz-page-nav-button>
<moz-page-nav-button view="view-two" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
<span class="view-name">View 2</span>
</moz-page-nav-button>
<moz-page-nav-button view="view-three" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
<span class="view-name">View 3</span>
</moz-page-nav-button>
<moz-page-nav-button view="view-four" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
<span class="view-name">View 4</span>
</moz-page-nav-button>
<moz-page-nav-button view="view-five" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
<span class="view-name">View 5</span>
</moz-page-nav-button>
<moz-page-nav-button iconSrc="chrome://mozapps/skin/extensions/category-discover.svg" support-page="test" slot="secondary-nav">
<span class="view-name">Support Link</span>
</moz-page-nav-button>
<moz-page-nav-button iconSrc="chrome://mozapps/skin/extensions/category-discover.svg" href="https://www.example.com" slot="secondary-nav">
<span class="view-name">External Link</span>
</moz-page-nav-button>
</moz-page-nav>
</div>
</div>
<pre id="test"></pre>
<script>
Services.scriptloader.loadSubScript(
this
);
const { BrowserTestUtils } = ChromeUtils.importESModule(
);
const mozPageNav = document.querySelector("moz-page-nav");
function isActiveElement(expectedActiveEl) {
return expectedActiveEl.getRootNode().activeElement == expectedActiveEl;
}
/**
* Tests that the first page nav button is selected by default
*/
add_task(async function test_first_item_selected_by_default() {
is(
mozPageNav.pageNavButtons.length,
5,
"Five page nav buttons are in the navigation"
);
ok(
mozPageNav.pageNavButtons[0].view === mozPageNav.currentView,
"The first page nav button is selected by default"
)
});
/**
* Tests that views are selected when clicked
*/
add_task(async function test_select_view() {
let gBrowser = BrowserWindowTracker.getTopWindow().top.gBrowser;
let secondViewButton = mozPageNav.pageNavButtons[1];
let viewChanged = BrowserTestUtils.waitForEvent(
gBrowser,
"change-view"
);
secondViewButton.buttonEl.click();
await viewChanged;
ok(
secondViewButton.view === mozPageNav.currentView,
"The second page nav button is selected"
)
let thirdPageNavButton = mozPageNav.pageNavButtons[2];
viewChanged = BrowserTestUtils.waitForEvent(
gBrowser,
"change-view"
);
thirdPageNavButton.buttonEl.click();
await viewChanged;
ok(
thirdPageNavButton.view === mozPageNav.currentView,
"The third page nav button is selected"
)
let firstPageNavButton = mozPageNav.pageNavButtons[0];
viewChanged = BrowserTestUtils.waitForEvent(
gBrowser,
"change-view"
);
firstPageNavButton.buttonEl.click();
await viewChanged;
ok(
firstPageNavButton.view === mozPageNav.currentView,
"The first page nav button is selected"
)
});
/**
* Tests that footer support links have the expected attributes
*/
add_task(async function test_support_link() {
const supportLinkRootPath = "https://support.mozilla.org/";
let supportLink = mozPageNav.secondaryNavButtons[0];
ok(supportLink.linkEl, "The secondary nav button contains the link element.");
ok(
supportLink.linkEl.hasAttribute("is") && supportLink.linkEl.getAttribute("is") === "moz-support-link",
"The support link has the is=moz-support-link attribute."
);
ok(
supportLink.linkEl.hasAttribute("href") && supportLink.linkEl.getAttribute("href") === `${supportLinkRootPath}test`,
"The support link has the expected href atrribute."
);
});
/**
* Tests that footer external links have the expected attributes
*/
add_task(async function test_external_link() {
const externalLinkPath = "https://www.example.com";
let externalLink = mozPageNav.secondaryNavButtons[1];
ok(externalLink.linkEl, "The secondary nav button contains the link element.");
ok(!externalLink.linkEl.hasAttribute("is"), "The external link doesn't have the is=moz-support-link attribute.");
ok(
externalLink.linkEl.hasAttribute("href") && externalLink.linkEl.getAttribute("href") === externalLinkPath,
"The external link has the expected href atrribute."
);
});
/**
* Tests that categories are keyboard-navigable
*/
add_task(async function test_keyboard_navigation() {
const tab = async shiftKey => {
info(`Tab${shiftKey ? " + Shift" : ""}`);
synthesizeKey("KEY_Tab", { shiftKey });
await mozPageNav.updateComplete;
};
const arrowDown = async () => {
info("Arrow down");
synthesizeKey("KEY_ArrowDown", {});
await mozPageNav.updateComplete;
};
const arrowUp = async () => {
info("Arrow up");
synthesizeKey("KEY_ArrowUp", {});
await mozPageNav.updateComplete;
};
const arrowLeft = async () => {
info("Arrow left");
synthesizeKey("KEY_ArrowLeft", {});
await mozPageNav.updateComplete;
};
const arrowRight = async () => {
info("Arrow right");
synthesizeKey("KEY_ArrowRight", {});
await mozPageNav.updateComplete;
};
// Setting this pref allows the test to run as expected with a keyboard on MacOS
await SpecialPowers.pushPrefEnv({
set: [["accessibility.tabfocus", 7]],
});
let firstPageNavButton = mozPageNav.pageNavButtons[0];
let secondPageNavButton = mozPageNav.pageNavButtons[1];
let thirdPageNavButton = mozPageNav.pageNavButtons[2];
let fourthPageNavButton = mozPageNav.pageNavButtons[3];
let fifthPageNavButton = mozPageNav.pageNavButtons[4];
let supportLink = mozPageNav.secondaryNavButtons[0];
let externalLink = mozPageNav.secondaryNavButtons[1];
is(
firstPageNavButton.view,
mozPageNav.currentView,
"The first page nav button is selected"
)
firstPageNavButton.buttonEl.focus();
await arrowDown();
ok(
isActiveElement(secondPageNavButton),
"The second page nav button is the active element after first arrow down"
);
is(
secondPageNavButton.view,
mozPageNav.currentView,
"The second page nav button is selected"
)
await arrowDown();
is(
thirdPageNavButton.view,
mozPageNav.currentView,
"The third page nav button is selected"
)
await arrowDown();
is(
fourthPageNavButton.view,
mozPageNav.currentView,
"The fourth page nav button is selected"
)
await arrowDown();
is(
fifthPageNavButton.view,
mozPageNav.currentView,
"The fifth page nav button is selected"
)
await arrowDown();
is(
fifthPageNavButton.view,
mozPageNav.currentView,
"The fifth page nav button is still selected"
)
await tab();
ok(
isActiveElement(supportLink.linkEl),
"The support link is selected"
)
await tab();
ok(
isActiveElement(externalLink.linkEl),
"The external link is selected"
)
await tab(true);
await tab(true);
is(
fifthPageNavButton.view,
mozPageNav.currentView,
"The fifth page nav button is selected"
)
await arrowUp();
is(
fourthPageNavButton.view,
mozPageNav.currentView,
"The fourth page nav button is selected"
)
await arrowUp();
is(
thirdPageNavButton.view,
mozPageNav.currentView,
"The third page nav button is selected"
)
await arrowUp();
is(
secondPageNavButton.view,
mozPageNav.currentView,
"The second page nav button is selected"
)
await arrowUp();
is(
firstPageNavButton.view,
mozPageNav.currentView,
"The first page nav button is selected"
)
await arrowUp();
is(
firstPageNavButton.view,
mozPageNav.currentView,
"The first page nav button is still selected"
)
// Test navigation with arrow left/right keys
is(
firstPageNavButton.view,
mozPageNav.currentView,
"The first page nav button is selected"
)
firstPageNavButton.buttonEl.focus();
await arrowRight();
ok(
isActiveElement(secondPageNavButton),
"The second page nav button is the active element after first arrow right"
);
is(
secondPageNavButton.view,
mozPageNav.currentView,
"The second page nav button is selected"
)
await arrowRight();
is(
thirdPageNavButton.view,
mozPageNav.currentView,
"The third page nav button is selected"
)
await arrowRight();
is(
fourthPageNavButton.view,
mozPageNav.currentView,
"The fourth page nav button is selected"
)
await arrowRight();
is(
fifthPageNavButton.view,
mozPageNav.currentView,
"The fifth page nav button is selected"
)
await arrowRight();
is(
fifthPageNavButton.view,
mozPageNav.currentView,
"The fifth page nav button is still selected"
)
await arrowLeft();
is(
fourthPageNavButton.view,
mozPageNav.currentView,
"The fourth page nav button is selected"
)
await arrowLeft();
is(
thirdPageNavButton.view,
mozPageNav.currentView,
"The third page nav button is selected"
)
await arrowLeft();
is(
secondPageNavButton.view,
mozPageNav.currentView,
"The second page nav button is selected"
)
await arrowLeft();
is(
firstPageNavButton.view,
mozPageNav.currentView,
"The first page nav button is selected"
)
await arrowLeft();
is(
firstPageNavButton.view,
mozPageNav.currentView,
"The first page nav button is still selected"
)
await SpecialPowers.popPrefEnv();
});
</script>
</body>
</html>