| Quellcodebibliothek Statistik Leitseite products/Sources/formale Sprachen/C/Firefox/toolkit/content/tests/widgets/ (Browser von der Mozilla Stiftung Version 136.0.1©) Datei vom 10.2.2025 mit Größe 6 kB |
|
Quelle test_moz_message_bar.html Sprache: 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"></sc </head> <body> <p id="display"></p> <div id="content"> <moz-message-bar id="infoMessage" heading="Heading" message="Test message"></moz-messa <moz-message-bar id="infoMessage2" dismissable message="Test message"></moz-message-ba <moz-message-bar id="warningMessage" type="warning" message="Test message"></moz-messa <moz-message-bar id="successMessage" type="success" message="Test message"></moz-messa <moz-message-bar id="errorMessage" type="error" message="Test message"></moz-message-b <moz-message-bar id="messageWithLink" message="Test message"> <a slot="support-link" href="#learn-less">Learn less</a> </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."); is(mozMessageBar.getAttribute("role"), "alert", "moz-message-bar component is mark 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 di }); 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 dismissabl 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 b }); 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> </pre> </body> </html>
¤ Dauer der Verarbeitung: 0.14 Sekunden (vorverarbeitet) ¤*© Formatika GbR, Deutschland |
|
||||||||||||||||
2026-04-02