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
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>MozMessageBar 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" />
<script type="module" src="chrome://global/content/elements/moz-message-bar.mjs"></script>
</head>
<body>
<p id="display"></p>
<div id="content">
<moz-message-bar id="infoMessage" heading="Heading" message="Test message"></moz-message-bar>
<moz-message-bar id="infoMessage2" dismissable message="Test message"></moz-message-bar>
<moz-message-bar id="warningMessage" type="warning" message="Test message"></moz-message-bar>
<moz-message-bar id="successMessage" type="success" message="Test message"></moz-message-bar>
<moz-message-bar id="errorMessage" type="error" message="Test message"></moz-message-bar>
</div>
<pre id="test">
<script class="testbody" type="application/javascript">
add_task(async function test_component_declaration() {
const mozMessageBar = document.querySelector("#infoMessage");
ok(mozMessageBar, "moz-message-bar component is rendered.");
is(mozMessageBar.getAttribute("role"), "alert", "moz-message-bar component is marked up as alert.");
const icon = mozMessageBar.shadowRoot.querySelector(".icon");
const iconUrl = icon.src;
ok(iconUrl.includes("info-filled.svg"), "Info icon is showing up.");
const iconAlt = icon.alt;
is(iconAlt, "Info", "Alternate text for the info icon is present.");
const heading = mozMessageBar.shadowRoot.querySelector(".heading");
is(heading.textContent.trim(), "Heading", "Heading is showing up.");
const message = mozMessageBar.shadowRoot.querySelector(".message");
is(message.textContent.trim(), "Test message", "Message is showing up.");
});
add_task(async function test_heading_display() {
const mozMessageBar = document.querySelector("#infoMessage2");
let heading = mozMessageBar.shadowRoot.querySelector(".heading");
ok(!heading, "The heading element isn't displayed if it hasn't been initialized.");
mozMessageBar.heading = "Now there's a heading";
await mozMessageBar.updateComplete;
heading = mozMessageBar.renderRoot.querySelector(".heading");
is(heading.textContent.trim(), "Now there's a heading", "New heading element is displayed.");
});
add_task(async function test_close_button() {
const notDismissableComponent = document.querySelector("#infoMessage");
let closeButton = notDismissableComponent.closeButton;
ok(!closeButton, "Close button doesn't show when the message bar isn't dismissable.");
let dismissableComponent = document.querySelector("#infoMessage2");
closeButton = dismissableComponent.closeButton;
ok(closeButton, "Close button is shown when the message bar is dismissable.");
closeButton.click();
dismissableComponent = document.querySelector("#infoMessage2");
is(dismissableComponent, null, "Clicking on the close button removes the message bar element.");
});
add_task(async function test_warning_message_component() {
const mozMessageBar = document.querySelector("#warningMessage");
const icon = mozMessageBar.shadowRoot.querySelector(".icon");
const iconUrl = icon.src;
ok(iconUrl.includes("warning.svg"), "Warning icon is showing up.");
const iconAlt = icon.alt;
is(iconAlt, "Warning", "Alternate text for the warning icon is present.");
});
add_task(async function test_success_message_component() {
const mozMessageBar = document.querySelector("#successMessage");
const icon = mozMessageBar.shadowRoot.querySelector(".icon");
const iconUrl = icon.src;
ok(iconUrl.includes("check-filled.svg"), "Success icon is showing up.");
const iconAlt = icon.alt;
is(iconAlt, "Success", "Alternate text for the success icon is present.");
});
add_task(async function test_error_message_component() {
const mozMessageBar = document.querySelector("#errorMessage");
const icon = mozMessageBar.shadowRoot.querySelector(".icon");
const iconUrl = icon.src;
ok(iconUrl.includes("error.svg"), "Error icon is showing up.");
const iconAlt = icon.alt;
is(iconAlt, "Error", "Alternate text for the error icon is present.");
});
</script>
</pre>
</body>
</html>
|
