Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>MozBoxButton Tests</title>
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
<link
rel="stylesheet"
/>
<script
type="module"
src="chrome://global/content/elements/moz-box-button.mjs"
></script>
<script src="lit-test-helpers.js"></script>
<script>
let html;
let testHelpers = new LitTestHelpers();
add_setup(async function setup() {
({ html } = await testHelpers.setupLit());
let templateFn = attrs => html`
<moz-box-button ${attrs}></moz-box-button>
`;
testHelpers.setupTests({ templateFn });
});
add_task(async function testMozBoxButtonProperties() {
const TEST_LABEL = "this is a test";
let labelledTemplate = testHelpers.templateFn({ label: TEST_LABEL });
let renderTarget = await testHelpers.renderTemplate(labelledTemplate);
let button = renderTarget.firstElementChild;
ok(button, "The box button renders.");
ok(
button.navIcon,
"The box button has an icon indicating the type of navigation that happens on click."
);
is(
button.navIcon.src,
"chrome://global/skin/icons/arrow-right.svg",
"The button uses the expected icon."
);
is(button.label, TEST_LABEL, "The box button has the expected label.");
is(
button.labelEl.textContent.trim(),
TEST_LABEL,
"The box button label is rendered."
);
const TEST_DESCRIPTION = "This is a description";
button.description = TEST_DESCRIPTION;
await button.updateComplete;
is(
button.descriptionEl.textContent.trim(),
TEST_DESCRIPTION,
"The button supports setting a description."
);
const ICON_SRC = "chrome://global/skin/icons/edit-copy.svg";
button.iconSrc = ICON_SRC;
await button.updateComplete;
is(
button.iconEl.getAttribute("src"),
ICON_SRC,
"The button supports setting an icon."
);
});
add_task(async function testMozBoxButtonEvents() {
let seenEvents = [];
let renderTarget = await testHelpers.renderTemplate();
let button = renderTarget.firstElementChild;
button.addEventListener("click", e => seenEvents.push(e));
synthesizeMouseAtCenter(button, {});
await TestUtils.waitForTick();
is(
seenEvents.length,
1,
"MozBoxButton emitted the expected number of events."
);
is(seenEvents[0].type, "click", "MozBoxButton emitted a click event.");
});
add_task(async function testMozBoxButtonKeyboardFocus() {
let focusTemplate = html`
<button id="first">Button before</button>
<moz-box-button id="box" label="I'm the box button"></moz-box-button>
<button id="last">Button after</button>
`;
let renderTarget = await testHelpers.renderTemplate(focusTemplate);
let firstButton = renderTarget.firstElementChild;
firstButton.focus();
is(document.activeElement, firstButton, "The first button is focused.");
synthesizeKey("KEY_Tab", {});
let mozBoxButton = document.getElementById("box");
is(
document.activeElement,
mozBoxButton,
"The MozBoxButton receives focus."
);
synthesizeKey("KEY_Tab", {});
let lastButton = document.getElementById("last");
is(
document.activeElement,
lastButton,
"Focus moves from the MozBoxButton."
);
});
add_task(async function testMozBoxButtonDisabled() {
let {
children: [button],
} = await testHelpers.renderTemplate();
is(button.disabled, false, "MozBoxButton is enabled by default.");
is(button.buttonEl.disabled, false, "Inner button element is enabled.");
button.disabled = true;
await button.updateComplete;
is(
button.buttonEl.disabled,
true,
"Inner button element gets disabled when MozBoxButton is disabled."
);
});
add_task(async function testMozBoxButtonAccesskey() {
let accesskey = "t";
let accesskeyTemplate = html`
<moz-box-button
label="I have an accesskey"
accesskey=${accesskey}
></moz-box-button>
<moz-box-button label="I don't...yet"></moz-box-button>
`;
let {
children: [firstButton, secondButton],
} = await testHelpers.renderTemplate(accesskeyTemplate);
let seenEvents = [];
function trackEvent(event) {
seenEvents.push(event.type);
}
[firstButton, secondButton].forEach(button => {
button.addEventListener("click", trackEvent);
});
isnot(
document.activeElement,
firstButton,
"firstButton button is not focused."
);
isnot(
firstButton.shadowRoot.activeElement,
firstButton.buttonEl,
"Inner button element is not focused."
);
let accessKeyDetails = navigator.platform.includes("Mac")
? { altKey: true, ctrlKey: true }
: { altKey: true, shiftKey: true };
synthesizeKey(accesskey, accessKeyDetails);
is(
document.activeElement,
firstButton,
"First button recieves focus after accesskey is pressed."
);
is(
firstButton.shadowRoot.activeElement,
firstButton.buttonEl,
"Inner button input element is focused after accesskey is pressed."
);
is(seenEvents.length, 1, "One event was triggered.");
is(seenEvents[0], "click", "The first button was clicked.");
secondButton.setAttribute("accesskey", accesskey);
await secondButton.updateComplete;
synthesizeKey(accesskey, accessKeyDetails);
is(
document.activeElement,
secondButton,
"Focus cycles between buttons with the same accesskey."
);
synthesizeKey(accesskey, accessKeyDetails);
is(
document.activeElement,
firstButton,
"Focus cycles between buttons with the same accesskey."
);
is(seenEvents.length, 1, "No additional click events were triggered.");
});
</script>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test"></pre>
</body>
</html>