Issue #3212975 by marcoscano, mherchel, thejimbirch, Gauravmahlawat, geekygnr, andy-blum, lauriii, larowlan: Olivero: Normalize JavaScript selectors in messages.es6.js

merge-requests/1078/head
Lauri Eskola 2021-08-17 14:46:50 +03:00
parent 8dea1fb4d0
commit 5698e6fb8b
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
5 changed files with 88 additions and 9 deletions

View File

@ -118,7 +118,13 @@ class JsMessageTest extends WebDriverTestBase {
$current_messages[] = $message_div->getText();
}
}
$this->assertEquals($expected_messages, $current_messages);
// Check that each message text contains the expected text.
if (count($expected_messages) !== count($current_messages)) {
$this->fail('The expected messages array contains a different number of values than the current messages array.');
}
for ($i = 0; $i < count($expected_messages); $i++) {
$this->assertStringContainsString($expected_messages[$i], $current_messages[$i]);
}
}
}

View File

@ -0,0 +1,62 @@
<?php
namespace Drupal\FunctionalJavascriptTests\Theme;
use Drupal\FunctionalJavascriptTests\Core\JsMessageTest;
use Drupal\js_message_test\Controller\JSMessageTestController;
/**
* Runs OliveroMessagesTest in Olivero.
*
* @group olivero
*
* @see \Drupal\FunctionalJavascriptTests\Core\JsMessageTest.
*/
class OliveroMessagesTest extends JsMessageTest {
/**
* {@inheritdoc}
*/
protected static $modules = [
'js_message_test',
'system',
'block',
];
/**
* {@inheritdoc}
*/
protected $defaultTheme = 'stark';
/**
* {@inheritdoc}
*/
protected function setUp(): void {
parent::setUp();
// Enable the theme.
\Drupal::service('theme_installer')->install(['olivero']);
$theme_config = \Drupal::configFactory()->getEditable('system.theme');
$theme_config->set('default', 'olivero');
$theme_config->save();
}
/**
* Tests data-drupal-selector="messages" exists.
*/
public function testDataDrupalSelectors() {
$web_assert = $this->assertSession();
$this->drupalGet('js_message_test_link');
foreach (JSMessageTestController::getMessagesSelectors() as $messagesSelector) {
$web_assert->elementExists('css', $messagesSelector);
foreach (JSMessageTestController::getTypes() as $type) {
$this->click('[id="add-' . $messagesSelector . '-' . $type . '"]');
$selector = '[data-drupal-selector="messages"]';
$msg_element = $web_assert->waitForElementVisible('css', $selector);
$this->assertNotEmpty($msg_element, "Message element visible: $selector");
}
}
}
}

View File

@ -11,7 +11,9 @@
* The message object.
*/
const closeMessage = (message) => {
const messageContainer = message.querySelector('.messages__container');
const messageContainer = message.querySelector(
'[data-drupal-selector="messages-container"]',
);
const closeBtnWrapper = document.createElement('div');
closeBtnWrapper.setAttribute('class', 'messages__button');
@ -58,6 +60,7 @@
'class',
`messages-list__item messages messages--${type}`,
);
messageWrapper.setAttribute('data-drupal-selector', 'messages');
messageWrapper.setAttribute(
'role',
type === 'error' || type === 'warning' ? 'alert' : 'status',
@ -91,7 +94,7 @@
}
messageWrapper.innerHTML = `
<div class="messages__container">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header${!svg ? ' no-icon' : ''}">
<h2 class="visually-hidden">${messagesTypes[type]}</h2>
${svg}
@ -117,7 +120,9 @@
*/
Drupal.behaviors.messages = {
attach(context) {
once('olivero-messages', '.messages', context).forEach(closeMessage);
once('messages', '[data-drupal-selector="messages"]', context).forEach(
closeMessage,
);
},
};
})(Drupal, once);

View File

@ -7,7 +7,7 @@
(function (Drupal, once) {
var closeMessage = function closeMessage(message) {
var messageContainer = message.querySelector('.messages__container');
var messageContainer = message.querySelector('[data-drupal-selector="messages-container"]');
var closeBtnWrapper = document.createElement('div');
closeBtnWrapper.setAttribute('class', 'messages__button');
var closeBtn = document.createElement('button');
@ -31,6 +31,7 @@
var messagesTypes = Drupal.Message.getMessageTypeLabels();
var messageWrapper = document.createElement('div');
messageWrapper.setAttribute('class', "messages-list__item messages messages--".concat(type));
messageWrapper.setAttribute('data-drupal-selector', 'messages');
messageWrapper.setAttribute('role', type === 'error' || type === 'warning' ? 'alert' : 'status');
messageWrapper.setAttribute('aria-labelledby', "".concat(id, "-title"));
messageWrapper.setAttribute('data-drupal-message-id', id);
@ -55,14 +56,14 @@
svg += '</svg></div>';
}
messageWrapper.innerHTML = "\n <div class=\"messages__container\">\n <div class=\"messages__header".concat(!svg ? ' no-icon' : '', "\">\n <h2 class=\"visually-hidden\">").concat(messagesTypes[type], "</h2>\n ").concat(svg, "\n </div>\n <div class=\"messages__content\">\n ").concat(text, "\n </div>\n </div>\n ");
messageWrapper.innerHTML = "\n <div class=\"messages__container\" data-drupal-selector=\"messages-container\">\n <div class=\"messages__header".concat(!svg ? ' no-icon' : '', "\">\n <h2 class=\"visually-hidden\">").concat(messagesTypes[type], "</h2>\n ").concat(svg, "\n </div>\n <div class=\"messages__content\">\n ").concat(text, "\n </div>\n </div>\n ");
closeMessage(messageWrapper);
return messageWrapper;
};
Drupal.behaviors.messages = {
attach: function attach(context) {
once('olivero-messages', '.messages', context).forEach(closeMessage);
once('messages', '[data-drupal-selector="messages"]', context).forEach(closeMessage);
}
};
})(Drupal, once);

View File

@ -31,8 +31,13 @@
]
%}
<div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
<div class="messages__container"{% if type == 'error' %} role="alert"{% endif %}>
<div{{ attributes
.addClass(classes)
.setAttribute('data-drupal-selector', 'messages')
.setAttribute('role', 'contentinfo')
.setAttribute('aria-label', status_headings[type])
}}>
<div class="messages__container" data-drupal-selector="messages-container"{% if type == 'error' %} role="alert"{% endif %}>
{% if status_headings[type] %}
<div class="messages__header">
<h2 class="visually-hidden">{{ status_headings[type] }}</h2>