<!
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>
<moz-message-bar
id=
"messageWithSupportPage"
message=
"Test message"
supportPage=
"support-test"
>
</moz-message-bar>
<moz-message-bar id=
"slottedMessage">
<
span slot=
"message"
>Here is
a message with
a nested
<
a href=
"https://example.com" target=
"_blank">
link</
a>.</
span
>
<
a slot=
"support-link" href=
"#learn-less">Learn less</
a>
</moz-message-bar>
<moz-message-bar
id=
"customRoleMessage"
role=
"status"
message=
"Test message"
></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_page_attribute() {
const mozMessageBar = document.querySelector(
"#messageWithSupportPage");
const
link = mozMessageBar.shadowRoot.querySelector(
"[is='moz-support-link']"
);
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");
mozMessageBar.supportPage =
"";
await mozMessageBar.updateComplete;
is(msgEl.className,
"message",
"has-link-after class should be gone");
mozMessageBar.supportPage =
"support-test";
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"
);
});
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");
});
add_task(async function test_message_slot() {
const mozMessageBar = document.querySelector(
"#slottedMessage");
const slottedMessageElement = mozMessageBar.querySelector(
"span[slot='message']"
);
ok(slottedMessageElement,
"renders the message slot");
const slottedSupportLinkElement = mozMessageBar.querySelector(
"a[slot='support-link']"
);
ok(slottedSupportLinkElement,
"still renders a slotted support link");
});
add_task(async function test_role_property() {
const mozMessageBar = document.querySelector(
"#customRoleMessage");
is(
mozMessageBar.getAttribute(
"role"),
"status",
"Custom role attribute is set correctly from HTML."
);
mozMessageBar.role =
"log";
await mozMessageBar.updateComplete;
is(
mozMessageBar.getAttribute(
"role"),
"log",
"Role attribute updates when property changes."
);
const defaultMessageBar = document.querySelector(
"#infoMessage");
is(
defaultMessageBar.getAttribute(
"role"),
"alert",
"Default role is 'alert' when not specified."
);
});
</
script>
</
body>
</
html>
