test_moz_toggle.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<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;

    mozToggle.addEventListener("click", trackEvent);

    mozToggle.addEventListener("toggle", trackEvent);

    is(mozToggle.pressed, true, "moz-toggle is pressed initially");

    is(button.getAttribute("aria-pressed"), "true", "aria-pressed reflects the pressed state");

    synthesizeMouseAtCenter(button, {});

    await TestUtils.waitForTick();

    verifyEvents([

      { type: "click", localName: "moz-toggle", pressed: false, value: "default" },

      { type: "toggle", localName: "moz-toggle", pressed: false, value: "default" },

]);

    is(mozToggle.pressed, false, "The toggle pressed state changes on click");

    is(button.getAttribute("aria-pressed"), "false", "aria-pressed reflects this change");

    synthesizeMouseAtCenter(mozToggle.labelEl, {});

    await TestUtils.waitForTick();

    // 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");

    mozToggle.focus();

    synthesizeKey(" ", {});

    await TestUtils.waitForTick();

    verifyEvents([

      { type: "click", localName: "moz-toggle", pressed: false, value: "default" },

      { type: "toggle", localName: "moz-toggle", pressed: false, value: "default" },

]);

    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");

    synthesizeMouseAtCenter(mozToggle.descriptionEl, {});

    await TestUtils.waitForTick();

    verifyEvents([]);

    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>