<!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" header="Header" 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 header = mozMessageBar.shadowRoot.querySelector(".header");
      is(header.textContent.trim(), "Header", "Header is showing up.");
      const message = mozMessageBar.shadowRoot.querySelector(".message");
      is(message.textContent.trim(), "Test message", "Message is showing up.");
    });

    add_task(async function test_header_display() {
      const mozMessageBar = document.querySelector("#infoMessage2");
      let header = mozMessageBar.shadowRoot.querySelector(".header");
      ok(!header, "The header element isn't displayed if it hasn't been initialized.");

      mozMessageBar.header = "Now there's a header";
      await mozMessageBar.updateComplete;
      header = mozMessageBar.renderRoot.querySelector(".header");
      is(header.textContent.trim(), "Now there's a header", "New header element is displayed.");
    });

    add_task(async function test_close_button() {
      const notDismissableComponent = document.querySelector("#infoMessage");
      let closeButton = notDismissableComponent.shadowRoot.querySelector(".close");
      let closeButtonDislay = window.getComputedStyle(closeButton).display;
      is(closeButtonDislay, "none", "Close button doesn't show when the message bar isn't dismissable.");

      let dismissableComponent = document.querySelector("#infoMessage2");
      closeButton = dismissableComponent.shadowRoot.querySelector(".close");
      closeButtonDislay = window.getComputedStyle(closeButton).display;
      is(closeButtonDislay, "block", "Close button is displayed 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.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>
