test_moz_checkbox.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>moz-checkbox 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>

  <script type="module" src="chrome://global/content/elements/moz-checkbox.mjs"></script>

  <script src="input-test-helpers.js"></script>

  <script class="testbody" type="application/javascript">

    let testHelpers = new InputTestHelpers();

    let html;

    add_setup(async function setup() {

      ({ html } = await testHelpers.setupLit());

      await testHelpers.setupInputTests({

        templateFn: (attrs, children) =>

          html`<moz-checkbox ${attrs}>${children}</moz-checkbox>`,

});

      testHelpers.checkable = true;

});

    add_task(async function testMozCheckboxProperties() {

      await testHelpers.testCommonInputProperties("moz-checkbox");

});

    add_task(async function testCheckboxEvents() {

      let eventsTemplate = html`

        <moz-checkbox label="One" name="one" value="1"></moz-checkbox>

        <moz-checkbox label="Two" name="two" value="2" disabled></moz-checkbox>

        <moz-checkbox label="Three" name="three" value="3" description="description"></moz-checkbox>

`;

      let renderTarget = await testHelpers.renderInputElements(eventsTemplate);

      let checkboxes = renderTarget.querySelectorAll("moz-checkbox");

      let [mozCheckbox1, mozCheckbox2, mozCheckbox3] = checkboxes;

      let { trackEvent, verifyEvents } = testHelpers.getInputEventHelpers();

      checkboxes.forEach(checkbox => {

        checkbox.addEventListener("click", trackEvent);

        checkbox.addEventListener("input", trackEvent);

        checkbox.addEventListener("change", trackEvent);

});

      // Ensure that clicking the inner checkbox element emits the expected

      // events in the correct order.

      synthesizeMouseAtCenter(mozCheckbox1.inputEl, {});

      await TestUtils.waitForTick();

      verifyEvents([

        { type: "click", localName: "moz-checkbox", checked: true, value: "1" },

        { type: "input", localName: "moz-checkbox", checked: true, value: "1" },

        { type: "change", localName: "moz-checkbox", checked: true, value: "1" },

]);

ok(

        mozCheckbox1.checked,

        "Clicking the inner checkbox should toggle the checked attribute"

);

      // Ensure that clicking the inner label element emits the

      // expected events in the correct order.

      synthesizeMouseAtCenter(mozCheckbox1.labelEl, {});

      await TestUtils.waitForTick();

      // Since we click the label element, there is an additional

      // click event compared to the checkbox element, and this

      // first click doesn't update the checked value

      verifyEvents([

        { type: "click", localName: "moz-checkbox", checked: true, value: "1" },

        { type: "click", localName: "moz-checkbox", checked: false, value: "1" },

        { type: "input", localName: "moz-checkbox", checked: false, value: "1" },

        { type: "change", localName: "moz-checkbox", checked: false, value: "1" },

]);

ok(

        !mozCheckbox1.checked,

        "Clicking the checkbox should toggle the checked attribute"

);

      // Ensure that using the keyboard to activate the inner checkbox

      // emits the expected events in the correct order.

      mozCheckbox1.focus();

      synthesizeKey(" ", {});

      await TestUtils.waitForTick();

      verifyEvents([

        { type: "click", localName: "moz-checkbox", checked: true, value: "1" },

        { type: "input", localName: "moz-checkbox", checked: true, value: "1" },

        { type: "change", localName: "moz-checkbox", checked: true, value: "1" },

]);

ok(

        mozCheckbox1.checked,

        "Activating the Space key on the inner checkbox should toggle the checked attribute"

);

      // Ensure click() toggles the checkbox.

      mozCheckbox1.click();

      ok(!mozCheckbox1.checked, "click() toggled the checkbox");

      verifyEvents([

        { type: "click", localName: "moz-checkbox", checked: false, value: "1" },

        { type: "input", localName: "moz-checkbox", checked: false, value: "1" },

        { type: "change", localName: "moz-checkbox", checked: false, value: "1" },

]);

      // Ensure clicking on a disabled moz-checkbox does not send

      // any events.

      synthesizeMouseAtCenter(mozCheckbox2.inputEl, {});

      await TestUtils.waitForTick();

      verifyEvents([]);

      // Ensure clicking on a description within moz-checkbox does not

      // change the value of the checkbox input.

      synthesizeMouseAtCenter(mozCheckbox3.descriptionEl, {});

      await TestUtils.waitForTick();

      verifyEvents([

        { type: "click", localName: "moz-checkbox", checked: false, value: "3" },

]);

is(

        mozCheckbox3.checked,

        false,

        "Checkbox input should not change when clicking on description"

);

});

  </script>

</pre>

</body>

</html>