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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
|
<!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>
<a
id="testElement6"
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.supportPage,
supportPage,
"supportPage property matches attribute"
);
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.supportPage,
supportPage,
"supportPage property matches attribute"
);
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,
});
let supportPagePropertyLink = document.getElementById("testElement6");
assertBasicProperties(supportPagePropertyLink, {
supportPage,
supportUrl,
});
let newSupportPage = "support-page-property";
supportPagePropertyLink.supportPage = newSupportPage;
assertBasicProperties(supportPagePropertyLink, {
supportPage: newSupportPage,
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>
|
