test_moz_box_link.html

Enable keyboard shortcuts

<!doctype html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>MozBoxLink Tests</title>

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

    <script

      type="module"

      src="chrome://global/content/elements/moz-box-link.mjs"

    ></script>

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

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

    <script>

      let testHelpers = new LitTestHelpers();

      add_setup(async function setup() {

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

        let templateFn = attrs => html`

          <moz-box-link ${attrs}></moz-box-link>

`;

        testHelpers.setupTests({ templateFn });

});

      add_task(async function testMozBoxLinkProperties() {

        const testLabel = "this is a test";

        const testLink = "https://testing.com/xyz";

        const labelledTemplate = testHelpers.templateFn({

          label: testLabel,

          href: testLink,

});

        const renderTarget = await testHelpers.renderTemplate(labelledTemplate);

        const host = renderTarget.firstElementChild;

        ok(host, "The box link renders.");

        await host.updateComplete;

        const anchor = host.shadowRoot.querySelector("a");

        ok(anchor, "Renders an anchor element");

        is(anchor.href, testLink, "Sets passed href onto href of anchor");

        is(anchor.getAttribute("is"), null, "Sets no 'is' attribute");

is(

          anchor.getAttribute("support-page"),

          null,

          "Has no support-page attribute"

);

        is(anchor.getAttribute("target"), "_blank", "Sets _blank target");

is(

          anchor.getAttribute("aria-describedby"),

          "opens-in-new-tab",

          "Described by opens-in-new-tab text when there is no description"

);

is(

          anchor.getAttribute("data-l10n-id"),

          "moz-box-link-anchor",

          "Anchor uses fluent id for the opens-in-new-tab tooltip"

);

        const opensInNewTab =

          host.shadowRoot.getElementById("opens-in-new-tab");

        ok(opensInNewTab, "Renders opens-in-new-tab description source");

is(

          opensInNewTab.getAttribute("data-l10n-id"),

          "moz-box-link-opens-in-new-tab",

          "Opens-in-new-tab text uses expected fluent id"

);

ok(

          anchor.querySelector("span"),

          "Label is wrapped in a span so moz-support-link does not self-label"

);

is(

          anchor.textContent.trim(),

          testLabel,

          "Anchor text content is only the label"

);

        is(host.label, testLabel, "Has expected label");

is(

          host.labelEl.textContent.trim(),

          testLabel,

          "The box link label is rendered"

);

        const testDescription = "This is a description";

        host.description = testDescription;

        await host.updateComplete;

        const anchorWithDescription = host.shadowRoot.querySelector("a");

is(

          host.descriptionEl.textContent.trim(),

          testDescription,

          "Supports setting a description"

);

ok(

          !anchorWithDescription.contains(host.descriptionEl),

          "Description is not a descendant of the anchor"

);

is(

          anchorWithDescription.getAttribute("aria-describedby"),

          "description opens-in-new-tab",

          "Described by visible description and opens-in-new-tab text"

);

is(

          anchorWithDescription.textContent.trim(),

          testLabel,

          "Anchor text content remains only the label when description is set"

);

        host.description = "";

        await host.updateComplete;

        ok(!host.descriptionEl, "Description element is not rendered");

is(

          host.shadowRoot.querySelector("a").getAttribute("aria-describedby"),

          "opens-in-new-tab",

          "Described by opens-in-new-tab text when there is no description"

);

});

      add_task(async function testMozBoxLinkSupportLink() {

        const supportPage = "test-abc";

        const testLabel = "Get help";

        const supportPageTemplate = testHelpers.templateFn({

          "support-page": supportPage,

          label: testLabel,

});

        const renderTarget =

          await testHelpers.renderTemplate(supportPageTemplate);

        const host = renderTarget.firstElementChild;

        await host.updateComplete;

        const anchor = host.shadowRoot.querySelector("a");

is(

          anchor.getAttribute("is"),

          "moz-support-link",

          "is attribute is set to 'moz-support-link'"

);

        is(host.supportPage, supportPage, "supportPage property is set");

is(

          anchor.getAttribute("support-page"),

          supportPage,

          "support-page attribute is set"

);

ok(

          anchor.href.includes(supportPage),

          "href is set as expected on the support link"

);

is(

          anchor.textContent.trim(),

          testLabel,

          "Support link keeps the provided label instead of defaulting to Learn more"

);

ok(

          anchor.querySelector("span"),

          "Support link label is wrapped in a span"

);

});

    </script>

  </head>

  <body></body>

</html>