diff options
Diffstat (limited to 'toolkit/content/tests/widgets/test_moz_message_bar.html')
-rw-r--r-- | toolkit/content/tests/widgets/test_moz_message_bar.html | 92 |
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> |