Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>MozSupportLink tests</title>
<link
rel="stylesheet"
/>
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>