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

is(

          host.descriptionEl.textContent.trim(),

          testDescription,

          "Supports setting a description"

);

});

      add_task(async function testMozBoxLinkSupportLink() {

        const supportPage = "test-abc";

        const supportPageTemplate = testHelpers.templateFn({

          "support-page": supportPage,

});

        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"

);

});

    </script>

  </head>

  <body></body>

</html>