194 lines
6.8 KiB
HTML
194 lines
6.8 KiB
HTML
<!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>
|
|
<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
|
|
// visibility of the gap between the message and link (bug 1938906).
|
|
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>
|