1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
<!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>
|
