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
|
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>MozBadge tests</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<link
rel="stylesheet"
href="chrome://mochikit/content/tests/SimpleTest/test.css"
/>
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
<script
type="module"
src="chrome://global/content/elements/moz-badge.mjs"
></script>
</head>
<body>
<p id="display"></p>
<div id="content">
<moz-badge
id="mozBadge1"
label="Beta"
l10nId="Beta"
iconSrc="chrome://global/skin/icons/info.svg"
></moz-badge>
<moz-badge
id="mozBadge2"
label="Beta"
l10nId="Beta"
title="Beta experiment"
></moz-badge>
</div>
<script>
add_task(async function test_badge_icon() {
const mozBadge = document.querySelector("#mozBadge1");
ok(mozBadge, "moz-badge component is rendered.");
const label = mozBadge.shadowRoot.querySelector(".moz-badge-label");
ok(label, "Label is appearing");
is(label.textContent.trim(), "Beta", "Label text is set");
const icon = mozBadge.shadowRoot.querySelector(".moz-badge-icon");
const iconUrl = icon.src;
ok(iconUrl.includes("info.svg"), "Badge icon is appearing");
const iconRole = icon.getAttribute("role");
is(iconRole, "presentation", "Badge icon has the correct role");
});
add_task(async function test_badge_tooltip() {
const mozBadge = document.querySelector("#mozBadge2");
ok(mozBadge, "moz-badge component is rendered.");
const tooltip = mozBadge.title;
ok(tooltip, "Tooltip content is populated");
is(tooltip, "Beta experiment", "Tooltip content is correct");
});
</script>
</body>
</html>
|
