Issue #77245 by drpal, tedbow, nod_, phenaproxima, Wim Leers, googletorp,...

Issue #77245 by drpal, tedbow, nod_, phenaproxima, Wim Leers, googletorp, rteijeiro, vineet.osscube, tim.plunkett, idflood, joelpittet, pk188, lauriii, BarisW, lokapujya, chr.fritsch, droplet, andrewmacpherson, dmsmidt, dawehner, alexpott, jessebeach, NickWilde, DuaelFr, Cottser, seutje, samuel.mortenson: Provide a common API for displaying JavaScript messages

core/tests/Drupal/FunctionalJavascriptTests/Core/JsMessageTest.php

+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Core;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+use Drupal\system\Tests\JsMessageTestCases;
+
+/**
+ * Tests core/drupal.messages library.
+ *
+ * @group Javascript
+ */
+class JsMessageTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = ['js_message_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    // Enable the theme.
+    \Drupal::service('theme_installer')->install(['test_messages']);
+    $theme_config = \Drupal::configFactory()->getEditable('system.theme');
+    $theme_config->set('default', 'test_messages');
+    $theme_config->save();
+  }
+
+  /**
+   * Test click on links to show messages and remove messages.
+   */
+  public function testAddRemoveMessages() {
+    $web_assert = $this->assertSession();
+    $this->drupalGet('js_message_test_link');
+
+    $current_messages = [];
+    foreach (JsMessageTestCases::getMessagesSelectors() as $messagesSelector) {
+      $web_assert->elementExists('css', $messagesSelector);
+      foreach (JsMessageTestCases::getTypes() as $type) {
+        $this->click('[id="add-' . $messagesSelector . '-' . $type . '"]');
+        $selector = "$messagesSelector .messages.messages--$type";
+        $msg_element = $web_assert->waitForElementVisible('css', $selector);
+        $this->assertNotEmpty($msg_element, "Message element visible: $selector");
+        $web_assert->elementContains('css', $selector, "This is a message of the type, $type. You be the the judge of its importance.");
+        $current_messages[$selector] = "This is a message of the type, $type. You be the the judge of its importance.";
+        $this->assertCurrentMessages($current_messages, $messagesSelector);
+      }
+      // Remove messages 1 by 1 and confirm the messages are expected.
+      foreach (JsMessageTestCases::getTypes() as $type) {
+        $this->click('[id="remove-' . $messagesSelector . '-' . $type . '"]');
+        $selector = "$messagesSelector .messages.messages--$type";
+        // The message for this selector should not be on the page.
+        unset($current_messages[$selector]);
+        $this->assertCurrentMessages($current_messages, $messagesSelector);
+      }
+    }
+
+    $messagesSelector = JsMessageTestCases::getMessagesSelectors()[0];
+    $current_messages = [];
+    $types = JsMessageTestCases::getTypes();
+    $nb_messages = count($types) * 2;
+    for ($i = 0; $i < $nb_messages; $i++) {
+      $current_messages[] = "This is message number $i of the type, {$types[$i % count($types)]}. You be the the judge of its importance.";
+    }
+    // Test adding multiple messages at once.
+    // @see processMessages()
+    $this->click('[id="add-multiple"]');
+    $this->assertCurrentMessages($current_messages, $messagesSelector);
+    $this->click('[id="remove-multiple"]');
+    $this->assertCurrentMessages([], $messagesSelector);
+
+    $current_messages = [];
+    for ($i = 0; $i < $nb_messages; $i++) {
+      $current_messages[] = "Msg-$i";
+    }
+    // The last message is of a different type and shouldn't get cleared.
+    $last_message = 'Msg-' . count($current_messages);
+    $current_messages[] = $last_message;
+    $this->click('[id="add-multiple-error"]');
+    $this->assertCurrentMessages($current_messages, $messagesSelector);
+    $this->click('[id="remove-type"]');
+    $this->assertCurrentMessages([$last_message], $messagesSelector);
+    $this->click('[id="clear-all"]');
+    $this->assertCurrentMessages([], $messagesSelector);
+
+    // Confirm that when adding a message with an "id" specified but no status
+    // that it receives the default status.
+    $this->click('[id="id-no-status"]');
+    $no_status_msg = 'Msg-id-no-status';
+    $this->assertCurrentMessages([$no_status_msg], $messagesSelector);
+    $web_assert->elementTextContains('css', "$messagesSelector .messages--status[data-drupal-message-id=\"my-special-id\"]", $no_status_msg);
+
+  }
+
+  /**
+   * Asserts that currently shown messages match expected messages.
+   *
+   * @param array $expected_messages
+   *   Expected messages.
+   * @param string $messagesSelector
+   *   The css selector for the containing messages element.
+   */
+  protected function assertCurrentMessages(array $expected_messages, $messagesSelector) {
+    $expected_messages = array_values($expected_messages);
+    $current_messages = [];
+    if ($message_divs = $this->getSession()->getPage()->findAll('css', "$messagesSelector .messages")) {
+      foreach ($message_divs as $message_div) {
+        /** @var \Behat\Mink\Element\NodeElement $message_div */
+        $current_messages[] = $message_div->getText();
+      }
+    }
+    $this->assertEquals($expected_messages, $current_messages);
+  }
+
+}

core/themes/bartik/css/components/messages.css

@@ -4,10 +4,15 @@
  */
 
 .messages__wrapper {
-  padding: 20px 0 5px 8px;
+  padding: 0 0 0 8px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  margin: 8px 0;
 }
 [dir="rtl"] .messages__wrapper {
-  padding: 20px 8px 5px 0;
+  padding: 0 8px 0 0;
+}
+.messages:first-child {
+  margin-top: 28px;
+}
+.messages:last-child {
+  margin-bottom: 13px;
 }

core/themes/classy/templates/misc/status-messages.html.twig

@@ -19,6 +19,7 @@
  *   - class: HTML classes.
  */
 #}
+<div data-drupal-messages>
 {% block messages %}
 {% for type, messages in message_list %}
   {%
@@ -51,3 +52,4 @@
   {% set attributes = attributes.removeClass(classes) %}
 {% endfor %}
 {% endblock messages %}
+</div>

core/themes/stable/templates/misc/status-messages.html.twig

@@ -19,6 +19,7 @@
  *   - class: HTML classes.
  */
 #}
+<div data-drupal-messages>
 {% for type, messages in message_list %}
   <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes|without('role', 'aria-label') }}>
     {% if type == 'error' %}
@@ -41,3 +42,4 @@
     {% endif %}
   </div>
 {% endfor %}
+</div>