1 files changed, 92 insertions, 0 deletions
diff --git a/toolkit/content/tests/widgets/test_moz_message_bar.html b/toolkit/content/tests/widgets/test_moz_message_bar.html
new file mode 100644
index 0000000000..7ee6825ef3
--- /dev/null
+++ b/toolkit/content/tests/widgets/test_moz_message_bar.html
@@ -0,0 +1,92 @@
+<!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.");
+
+      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.closeButtonEl;
+      ok(!closeButton, "Close button doesn't show when the message bar isn't dismissable.");
+
+      let dismissableComponent = document.querySelector("#infoMessage2");
+      closeButton = dismissableComponent.closeButtonEl;
+      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>