test_moz_support_link.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>MozSupportLink tests</title>

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

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

  <!-- 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-support-link.mjs"></script>

</head>

<body>

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

<div id="content">

<a

    id="testElement"

    is="moz-support-link"

    data-l10n-id="test"

    support-page="support-test"

    >testElement</a>

<a

    id="testElement2"

    is="moz-support-link"

    data-l10n-id="test2"

    support-page="support-test"

    utm-content="utmcontent-test"

    >testElement2</a>

<a

    id="testElement3"

    is="moz-support-link"

    data-l10n-name="name"

    support-page="support-test"

  ></a>

<a

  id="testElement4"

  is="moz-support-link"

  data-l10n-id="test4"

  data-l10n-name="name"

  support-page="support-test"

></a>

<a

  id="testElement5"

  is="moz-support-link"

  support-page="support-test"

  ></a>

</div>

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

<script>

  function assertBasicProperties(link, { l10nId, l10nName, supportPage, supportUrl, utmContent }) {

    is(link.localName, "a", "Check that it is an anchor");

    is(link.constructor.name, "MozSupportLink", "Element should be a 'moz-support-link'");

    if (l10nId) {

      is(link.getAttribute("data-l10n-id"), l10nId, "Check data-l10n-id is correct");

    if (l10nName) {

      is(link.getAttribute("data-l10n-name"), l10nName, "Check data-l10n-name is correct");

    if (supportPage && utmContent) {

      is(link.getAttribute("utm-content"), utmContent, "Check utm-correct is correct");

      is(link.getAttribute("support-page"), supportPage, "Check support-page is correct");

      is(link.target, "_blank", "support link should open a new window");

      let expectedHref = `${supportUrl}${supportPage}?utm_source=firefox-browser&utm_medium=firefox-browser&utm_content=${utmContent}`;

      is(link.href, expectedHref, "href should be generated correctly when using utm-content");

    } else if (supportPage) {

      is(link.getAttribute("support-page"), supportPage, "Check support-page is correct");

      is(link.target, "_blank", "support link should open a new window");

      is(link.href, `${supportUrl}${supportPage}`, `href should be generated SUPPORT_URL plus ${supportPage}`);

  add_task(async function test_component_declaration() {

    let mozSupportLink = customElements.get("moz-support-link");

    let supportUrl = mozSupportLink.SUPPORT_URL;

    let supportPage = "support-test";

    // Ensure all the semantics of the primary link are present

    let supportLink = document.getElementById("testElement");

    assertBasicProperties(supportLink, {l10nId: "test", supportPage, supportUrl});

    // Ensure AMO support link has the correct values

    let supportLinkAMO = document.getElementById("testElement2");

    assertBasicProperties(supportLinkAMO, {

      l10nId: "test2",

      supportPage,

      supportUrl,

      utmContent:"utmcontent-test"

});

    // Ensure data-l10n-name is not overwritten by the component

    let supportLinkL10nName = document.getElementById("testElement3");

    assertBasicProperties(supportLinkL10nName, {

      l10nId: null,

      l10nName: "name",

      supportPage,

      supportUrl

});

    // Ensure data-l10n-id and data-l10n-name are not overwritten by the component

    let linkWithNameAndId = document.getElementById("testElement4");

    assertBasicProperties(linkWithNameAndId, {

      l10nId: "test4",

      l10nName: "name",

      supportPage,

      supportUrl

});

    // Ensure moz-support-link without assigned data-l10n-id gets the default id

    let defaultLink = document.getElementById("testElement5");

    assertBasicProperties(defaultLink, {

      l10nId: "moz-support-link-text",

      supportPage,

      supportUrl

});

});

  add_task(async function test_creating_component() {

    // Ensure created support link behaves as expected

    let mozSupportLink = customElements.get("moz-support-link");

    let supportUrl = mozSupportLink.SUPPORT_URL;

    let l10nId = "constructedElement";

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

    let utmSupportLink = document.createElement("a", { is: "moz-support-link" });

    utmSupportLink.id = l10nId;

    utmSupportLink.innerText = l10nId;

    document.l10n.setAttributes(utmSupportLink, l10nId);

    content.appendChild(utmSupportLink);

    assertBasicProperties(utmSupportLink, { supportUrl, l10nId });

    // Set href via "support-page" after creating the element

    utmSupportLink.setAttribute("support-page", "created-page");

    assertBasicProperties(utmSupportLink, {

      supportUrl,

      supportPage: "created-page"

});

    // Set href via "utm-content"

    utmSupportLink.setAttribute("utm-content", "created-content");

    assertBasicProperties(utmSupportLink, {

      supportUrl,

      supportPage: "created-page",

      utmContent: "created-content"

});

});

</script>

</body>

</html>