<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>MozToggle tests</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> <!-- TODO: Bug 1798404 - in-content/common.css can be removed once we have a better
solution for token variables for the new widgets -->
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
<script type="module" src="chrome://global/content/elements/moz-toggle.mjs"></script>
<script src="input-test-helpers.js"></script>
</head>
<body>
<script class="testbody" type="application/javascript">
let testHelpers = new InputTestHelpers();
add_setup(async function setup() {
let { html } = await testHelpers.setupLit();
let templateFn = (attrs, children) => html`
<moz-toggle ${attrs}>${children}</moz-toggle>
`;
await testHelpers.setupInputTests({ templateFn });
testHelpers.activatedProperty = "pressed";
});
add_task(async function testMozToggleProperties() {
await testHelpers.testCommonInputProperties("moz-toggle");
});
add_task(async function testMozToggleInteraction() {
let { trackEvent, verifyEvents } = testHelpers.getInputEventHelpers();
let interactionTemplate = testHelpers.templateFn({ value: "default", label: "Label" });
let renderTarget = await testHelpers.renderInputElements(interactionTemplate);
const mozToggle = renderTarget.querySelector("moz-toggle");
const button = mozToggle.buttonEl;
mozToggle.pressed = true;
await mozToggle.updateComplete;
is(mozToggle.pressed, false, "The toggle pressed state changes on click");
is(button.getAttribute("aria-pressed"), "false", "aria-pressed reflects this change");
// Clicking the label element emits an additional click event that doesn't update the pressed state.
verifyEvents([
{ type: "click", localName: "moz-toggle", pressed: false, value: "default" },
{ type: "click", localName: "moz-toggle", pressed: true, value: "default" },
{ type: "toggle", localName: "moz-toggle", pressed: true, value: "default" },
]);
is(mozToggle.pressed, true, "The toggle pressed state changes on label click");
is(button.getAttribute("aria-pressed"), "true", "aria-pressed reflects this change");
is(mozToggle.pressed, false, "The toggle pressed state can be changed via space bar");
is(button.getAttribute("aria-pressed"), "false", "aria-pressed reflects this change");
isnot(
mozToggle.shadowRoot.activeElement,
mozToggle.buttonEl, "Clicking the description should not focus the toggle button"
);
});
add_task(async function testMozToggleWithoutVisibleLabel() {
const ARIA_LABEL = "I'm not visible";
let ariaLabelTemplate = testHelpers.templateFn({
value: "default", "aria-label": ARIA_LABEL,
});
let renderTarget = await testHelpers.renderInputElements(ariaLabelTemplate);
let mozToggle = renderTarget.querySelector("moz-toggle");
let labelText = mozToggle.shadowRoot.querySelector(".text");
ok(!labelText, "No visible label text is rendered.");
ok(
!mozToggle.getAttribute("aria-label"), "aria-label is not set on the outer toggle element."
);
is(
mozToggle.buttonEl.getAttribute("aria-label"),
ARIA_LABEL, "The aria-label is set on the button element."
);
});
</script>
</pre>
</body>
</html>
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.
