Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>MozMessageBar tests</title>
<link
rel="stylesheet"
/>
<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>
<moz-message-bar id="messageWithLink" message="Test message">
<a slot="support-link" href="#learn-less">Learn less</a>
</moz-message-bar>
</div>
<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.");
});
add_task(async function test_support_link_slot() {
const mozMessageBar = document.querySelector("#messageWithLink");
const link = mozMessageBar.querySelector("[href='#learn-less']");
const msgEl = mozMessageBar.messageEl;
is(mozMessageBar.supportLinkEls[0], link, "Link is assigned");
// Inspect internal class name - this is relied upon to toggle the
is(msgEl.className, "message has-link-after", "Expected class list");
link.remove();
await mozMessageBar.updateComplete;
is(msgEl.className, "message", "has-link-after class should be gone");
mozMessageBar.append(link);
await mozMessageBar.updateComplete;
is(msgEl.className, "message has-link-after", "class should be back");
mozMessageBar.message = "Different test message";
await mozMessageBar.updateComplete;
is(
msgEl.className,
"message has-link-after",
"class should not change"
);
mozMessageBar.message = "Test message";
await mozMessageBar.updateComplete;
is(
msgEl.className,
"message has-link-after",
"class should not change"
);
// Sanity check: A moz-message-bar that never had any link should not
// have the .has-link-after class name.
const mozMessageBar2 = document.querySelector("#infoMessage");
const msgEl2 = mozMessageBar2.messageEl;
is(msgEl2.className, "message", "Class when link was never assigned");
});
</script>
</body>
</html>