test_moz_box_button.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>MozBoxButton Tests</title>

  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

  <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">

  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>

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

  <script>

    const { TestUtils } = ChromeUtils.importESModule(

      "resource://testing-common/TestUtils.sys.mjs"

);

    let html, render, defaultTemplate;

    add_setup(async function setup() {

      ({ html, render } = await import(

        "chrome://global/content/vendor/lit.all.mjs"

));

      defaultTemplate = html`<moz-box-button

        label="this is a test"

      ></moz-box-button>`;

});

    async function renderTemplate(template = defaultTemplate) {

      let root = document.getElementById("root");

      if (!root) {

        root = document.createElement("div");

        root.id = "root";

        document.body.append(root);

      render(template, root);

      return root.firstElementChild;

    add_task(async function testMozBoxButtonProperties() {

      let button = await renderTemplate();

      ok(button, "The box button renders.");

is(

        button.type,

        "subpage",

        "The button is a subpage navigation button by default."

);

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 subpage button uses the expected icon."

);

      is(button.label, "this is a test", "The box button has the expected label.");

is(

        button.buttonEl.textContent.trim(),

        "this is a test",

        "The box button label is rendered."

);

});

    add_task(async function testMozBoxButtonEvents() {

      let seenEvents = [];

      let button = await renderTemplate();

      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 firstButton = await renderTemplate(focusTemplate);

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

});

  </script>

</head>

<body>

<p id="display"></p>

<div id="content" style="display: none"></div>

<pre id="test"></pre>

</body>

</html>