summaryrefslogtreecommitdiffstats
path: root/toolkit/content/tests/widgets/test_moz_message_bar.html
blob: 9b48982962799211ccdd92948b84cbf15b584a5d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!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.");
      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.");
    });
  </script>
</pre>
</body>

</html>