first commit

core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroBlockFilterTest.php

@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\Tests\block\FunctionalJavascript\BlockFilterTest;
+
+/**
+ * Runs BlockFilterTest in Claro.
+ *
+ * @group block
+ *
+ * @see \Drupal\Tests\block\FunctionalJavascript\BlockFilterTest.
+ */
+class ClaroBlockFilterTest extends BlockFilterTest {
+
+  /**
+   * Modules to enable.
+   *
+   * Install the shortcut module so that claro.settings has its schema checked.
+   * There's currently no way for Claro to provide a default and have valid
+   * configuration as themes cannot react to a module install.
+   *
+   * @var string[]
+   */
+  protected static $modules = ['shortcut'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+    $this->container->get('theme_installer')->install(['claro']);
+    $this->config('system.theme')->set('default', 'claro')->save();
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroEntityDisplayTest.php

@@ -0,0 +1,116 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest;
+
+/**
+ * Runs EntityDisplayTest in Claro.
+ *
+ * @group claro
+ *
+ * @see \Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest.
+ */
+class ClaroEntityDisplayTest extends EntityDisplayTest {
+
+  /**
+   * Modules to enable.
+   *
+   * Install the shortcut module so that claro.settings has its schema checked.
+   * There's currently no way for Claro to provide a default and have valid
+   * configuration as themes cannot react to a module install.
+   *
+   * @var string[]
+   */
+  protected static $modules = ['shortcut'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+    $this->container->get('theme_installer')->install(['claro']);
+    $this->config('system.theme')->set('default', 'claro')->save();
+  }
+
+  /**
+   * Copied from parent.
+   *
+   * This is Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest::testEntityForm()
+   * with a line changed to reflect row weight toggle being a link instead
+   * of a button.
+   */
+  public function testEntityForm(): void {
+    $this->drupalGet('entity_test/manage/1/edit');
+    $this->assertSession()->fieldExists('field_test_text[0][value]');
+
+    $this->drupalGet('entity_test/structure/entity_test/form-display');
+    $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'content')->isSelected());
+    $this->getSession()->getPage()->pressButton('Show row weights');
+    $this->assertSession()->waitForElementVisible('css', '[name="fields[field_test_text][region]"]');
+    $this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'hidden');
+    $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
+
+    $this->submitForm([], 'Save');
+    $this->assertSession()->pageTextContains('Your settings have been saved.');
+    $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
+
+    $this->drupalGet('entity_test/manage/1/edit');
+    $this->assertSession()->fieldNotExists('field_test_text[0][value]');
+  }
+
+  /**
+   * Copied from parent.
+   *
+   * This is Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest::testEntityView()
+   * with a line changed to reflect row weight toggle being a link instead
+   * of a button.
+   */
+  public function testEntityView(): void {
+    $this->drupalGet('entity_test/1');
+    $this->assertSession()->elementNotExists('css', '.field--name-field-test-text');
+
+    $this->drupalGet('entity_test/structure/entity_test/display');
+    $this->assertSession()->elementExists('css', '.region-content-message.region-empty');
+    $this->getSession()->getPage()->pressButton('Show row weights');
+    $this->assertSession()->waitForElementVisible('css', '[name="fields[field_test_text][region]"]');
+    $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
+
+    $this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'content');
+    $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'content')->isSelected());
+
+    $this->submitForm([], 'Save');
+    $this->assertSession()->pageTextContains('Your settings have been saved.');
+    $this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'content')->isSelected());
+
+    $this->drupalGet('entity_test/1');
+    $this->assertSession()->elementExists('css', '.field--name-field-test-text');
+  }
+
+  /**
+   * Copied from parent.
+   *
+   * This is Drupal\Tests\field_ui\FunctionalJavascript\EntityDisplayTest::testExtraFields()
+   * with a line changed to reflect Claro's tabledrag selector.
+   */
+  public function testExtraFields(): void {
+    entity_test_create_bundle('bundle_with_extra_fields');
+    $this->drupalGet('entity_test/structure/bundle_with_extra_fields/display');
+    $this->assertSession()->waitForElement('css', '.tabledrag-handle');
+    $id = $this->getSession()->getPage()->find('css', '[name="form_build_id"]')->getValue();
+
+    $extra_field_row = $this->getSession()->getPage()->find('css', '#display-extra-field');
+    $disabled_region_row = $this->getSession()->getPage()->find('css', '.region-hidden-title');
+
+    $extra_field_row->find('css', '.js-tabledrag-handle')->dragTo($disabled_region_row);
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $this->assertSession()
+      ->waitForElement('css', "[name='form_build_id']:not([value='$id'])");
+
+    $this->submitForm([], 'Save');
+    $this->assertSession()->pageTextContains('Your settings have been saved.');
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroMenuUiJavascriptTest.php

@@ -0,0 +1,43 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\Tests\menu_ui\FunctionalJavascript\MenuUiJavascriptTest;
+
+/**
+ * Runs MenuUiJavascriptTest in Claro.
+ *
+ * @group claro
+ *
+ * @see \Drupal\Tests\menu_ui\FunctionalJavascript\MenuUiJavascriptTest;
+ */
+class ClaroMenuUiJavascriptTest extends MenuUiJavascriptTest {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = [
+    'shortcut',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+    $this->container->get('theme_installer')->install(['claro']);
+    $this->config('system.theme')->set('default', 'claro')->save();
+  }
+
+  /**
+   * Intentionally empty method.
+   *
+   * Contextual links do not work in admin themes, so this is empty to prevent
+   * this test running in the parent class.
+   */
+  public function testBlockContextualLinks(): void {
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroModalDisplayTest.php

@@ -0,0 +1,98 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\Core\Field\FieldStorageDefinitionInterface;
+use Drupal\field\Entity\FieldConfig;
+use Drupal\field\Entity\FieldStorageConfig;
+use Drupal\Tests\media_library\FunctionalJavascript\MediaLibraryTestBase;
+use Drupal\Tests\TestFileCreationTrait;
+
+/**
+ * Tests that buttons in modals are not in their button pane.
+ *
+ * @group claro
+ */
+class ClaroModalDisplayTest extends MediaLibraryTestBase {
+
+  use TestFileCreationTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'claro';
+
+  /**
+   * Tests the position f "add another" button in dialogs.
+   */
+  public function testModalAddAnother(): void {
+
+    // Add unlimited field to the media type four.
+    $unlimited_field_storage = FieldStorageConfig::create([
+      'entity_type' => 'media',
+      'field_name' => 'unlimited',
+      'type' => 'string',
+      'cardinality' => FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED,
+    ]);
+    $unlimited_field_storage->save();
+    $unlimited_field = FieldConfig::create([
+      'field_storage' => $unlimited_field_storage,
+      'bundle' => 'type_four',
+      'label' => 'Unlimited',
+    ]);
+    $unlimited_field->save();
+
+    /** @var \Drupal\Core\Entity\EntityDisplayRepositoryInterface $display_repository */
+    $display_repository = \Drupal::service('entity_display.repository');
+
+    $display_repository->getFormDisplay('media', 'type_four', 'media_library')
+      ->setComponent('unlimited', [
+        'type' => 'string_textfield',
+      ])
+      ->save();
+
+    $assert_session = $this->assertSession();
+
+    foreach ($this->getTestFiles('image') as $image) {
+      $extension = pathinfo($image->filename, PATHINFO_EXTENSION);
+      if ($extension === 'jpg') {
+        $jpg_image = $image;
+      }
+    }
+    if (!isset($jpg_image)) {
+      $this->fail('Expected test files not present.');
+    }
+
+    // Create a user that can create media for all media types.
+    $user = $this->drupalCreateUser([
+      'access administration pages',
+      'access content',
+      'create basic_page content',
+      'create media',
+      'view media',
+    ]);
+    $this->drupalLogin($user);
+
+    // Visit a node create page.
+    $this->drupalGet('node/add/basic_page');
+
+    // Add to the twin media field.
+    $this->openMediaLibraryForField('field_twin_media');
+    $this->switchToMediaType('Four');
+
+    // A file needs to be added for the unlimited field to appear in the form.
+    $this->addMediaFileToField('Add files', $this->container->get('file_system')->realpath($jpg_image->uri));
+
+    // Wait for the file upload to be completed.
+    // Copied from \Drupal\Tests\media_library\FunctionalJavascript\MediaLibraryTestBase::assertMediaAdded.
+    $selector = '.js-media-library-add-form-added-media';
+    $this->assertJsCondition('jQuery("' . $selector . '").is(":focus")');
+
+    // Assert that the 'add another item' button is not in the dialog footer.
+    $assert_session->elementNotExists('css', '.ui-dialog-buttonset .field-add-more-submit');
+    $assert_session->elementExists('css', '.ui-dialog-content .field-add-more-submit');
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroPasswordConfirmWidgetTest.php

@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\Tests\user\FunctionalJavascript\PasswordConfirmWidgetTest;
+
+/**
+ * Tests the password confirm widget with Claro theme.
+ *
+ * @group claro
+ */
+class ClaroPasswordConfirmWidgetTest extends PasswordConfirmWidgetTest {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'claro';
+
+  /**
+   * Tests that password match message is invisible when widget is initialized.
+   */
+  public function testPasswordConfirmMessage(): void {
+    $this->drupalGet($this->testUser->toUrl('edit-form'));
+    $password_confirm_widget_selector = '.js-form-type-password-confirm.js-form-item-pass';
+    $password_confirm_selector = '.js-form-item-pass-pass2';
+    $password_confirm_widget = $this->assert->elementExists('css', $password_confirm_widget_selector);
+    $password_confirm_item = $password_confirm_widget->find('css', $password_confirm_selector);
+
+    // Password match message.
+    $this->assertTrue($password_confirm_item->has('css', 'input.js-password-confirm + [data-drupal-selector="password-confirm-message"]'));
+    $this->assertFalse($password_confirm_item->find('css', 'input.js-password-confirm + [data-drupal-selector="password-confirm-message"]')->isVisible());
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function testFillConfirmOnly(): void {
+    // This test is not applicable to Claro because confirm field is hidden
+    // until the password has been filled in the main field.
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroTableDragTest.php

@@ -0,0 +1,41 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\FunctionalJavascriptTests\TableDrag\TableDragTest;
+
+/**
+ * Tests draggable tables with Claro theme.
+ *
+ * @group claro
+ *
+ * @see \Drupal\FunctionalJavascriptTests\TableDrag\TableDragTest
+ */
+class ClaroTableDragTest extends TableDragTest {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'claro';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $indentationXpathSelector = 'child::td[1]/div[contains(concat(" ", normalize-space(@class), " "), " js-tabledrag-cell-content ")]/div[contains(concat(" ", normalize-space(@class), " "), " js-indentation ")]';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $tabledragChangedXpathSelector = 'child::td[1]/div[contains(concat(" ", normalize-space(@class), " "), " js-tabledrag-cell-content ")]/abbr[contains(concat(" ", normalize-space(@class), " "), " tabledrag-changed ")]';
+
+  /**
+   * Ensures that there are no duplicate tabledrag handles.
+   */
+  public function testNoDuplicates(): void {
+    $this->drupalGet('tabledrag_test_nested');
+    $this->assertCount(1, $this->findRowById(1)->findAll('css', '.tabledrag-handle'));
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroViewsBulkOperationsTest.php

@@ -0,0 +1,104 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+use Drupal\Tests\node\Traits\ContentTypeCreationTrait;
+use Drupal\Tests\node\Traits\NodeCreationTrait;
+
+/**
+ * Tests Claro's Views Bulk Operations form.
+ *
+ * @group claro
+ */
+class ClaroViewsBulkOperationsTest extends WebDriverTestBase {
+  use ContentTypeCreationTrait;
+  use NodeCreationTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['node', 'views'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'claro';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+
+    // Create a Content type and two test nodes.
+    $this->createContentType(['type' => 'page']);
+    $this->createNode(['title' => 'Page One']);
+    $this->createNode(['title' => 'Page Two']);
+
+    // Create a user privileged enough to use exposed filters and view content.
+    $user = $this->drupalCreateUser([
+      'administer site configuration',
+      'access content',
+      'access content overview',
+      'edit any page content',
+    ]);
+    $this->drupalLogin($user);
+  }
+
+  /**
+   * Tests the dynamic Bulk Operations form.
+   */
+  public function testBulkOperationsUi(): void {
+    $this->drupalGet('admin/content');
+
+    $page = $this->getSession()->getPage();
+    $assert_session = $this->assertSession();
+
+    $no_items_selected = 'No items selected';
+    $one_item_selected = '1 item selected';
+    $two_items_selected = '2 items selected';
+    $vbo_available_message = 'Bulk actions are now available';
+    $this->assertNotNull($assert_session->waitForElementVisible('css', ".js-views-bulk-actions-status:contains(\"$no_items_selected\")"));
+    $select_all = $page->find('css', '.select-all > input');
+
+    $page->checkField('node_bulk_form[0]');
+    $this->assertNotNull($assert_session->waitForElementVisible('css', ".js-views-bulk-actions-status:contains(\"$one_item_selected\")"));
+
+    // When the bulk operations controls are first activated, this should be
+    // relayed to screen readers.
+    $this->assertNotNull($assert_session->waitForElement('css', "#drupal-live-announce:contains(\"$vbo_available_message\")"));
+    $this->assertFalse($select_all->isChecked());
+
+    $page->checkField('node_bulk_form[1]');
+    $this->assertNotNull($assert_session->waitForElementVisible('css', ".js-views-bulk-actions-status:contains(\"$two_items_selected\")"));
+    $this->assertNotNull($assert_session->waitForElement('css', "#drupal-live-announce:contains(\"$two_items_selected\")"));
+    $assert_session->pageTextNotContains($vbo_available_message);
+    $this->assertTrue($select_all->isChecked());
+
+    $page->uncheckField('node_bulk_form[0]');
+    $this->assertNotNull($assert_session->waitForElementVisible('css', ".js-views-bulk-actions-status:contains(\"$one_item_selected\")"));
+    $this->assertNotNull($assert_session->waitForElement('css', "#drupal-live-announce:contains(\"$one_item_selected\")"));
+    $assert_session->pageTextNotContains($vbo_available_message);
+    $this->assertFalse($select_all->isChecked());
+
+    $page->uncheckField('node_bulk_form[1]');
+    $this->assertNotNull($assert_session->waitForElementVisible('css', ".js-views-bulk-actions-status:contains(\"$no_items_selected\")"));
+    $this->assertNotNull($assert_session->waitForElement('css', "#drupal-live-announce:contains(\"$no_items_selected\")"));
+    $assert_session->pageTextNotContains($vbo_available_message);
+    $this->assertFalse($select_all->isChecked());
+
+    $select_all->check();
+    $this->assertNotNull($assert_session->waitForElementVisible('css', ".js-views-bulk-actions-status:contains(\"$two_items_selected\")"));
+    $this->assertNotNull($assert_session->waitForElement('css', "#drupal-live-announce:contains(\"$vbo_available_message\")"));
+    $this->assertNotNull($assert_session->waitForElement('css', "#drupal-live-announce:contains(\"$two_items_selected\")"));
+
+    $select_all->uncheck();
+    $this->assertNotNull($assert_session->waitForElementVisible('css', ".js-views-bulk-actions-status:contains(\"$no_items_selected\")"));
+    $this->assertNotNull($assert_session->waitForElement('css', "#drupal-live-announce:contains(\"$no_items_selected\")"));
+    $assert_session->pageTextNotContains($vbo_available_message);
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroViewsUiTest.php

@@ -0,0 +1,98 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Runs tests on Views UI using Claro.
+ *
+ * @group claro
+ */
+class ClaroViewsUiTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['views_ui'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'claro';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+
+    // Disable automatic live preview to make the sequence of calls clearer.
+    $this->config('views.settings')->set('ui.always_live_preview', FALSE)->save();
+
+    // Create the test user and log in.
+    $admin_user = $this->drupalCreateUser([
+      'administer views',
+      'access administration pages',
+      'view the administration theme',
+    ]);
+    $this->drupalLogin($admin_user);
+  }
+
+  /**
+   * Tests Views UI display menu tabs CSS classes.
+   *
+   * Ensures that the CSS classes added to display menu tabs are preserved when
+   * Views UI is updated with AJAX.
+   */
+  public function testViewsUiTabsCssClasses(): void {
+    $this->drupalGet('admin/structure/views/view/who_s_online');
+    $assert_session = $this->assertSession();
+    $assert_session->elementExists('css', '#views-display-menu-tabs.views-tabs.views-tabs--secondary');
+    // Click on the Display name and wait for the Views UI dialog.
+    $assert_session->elementExists('css', '#edit-display-settings-top .views-display-setting a')->click();
+    $this->assertNotNull($this->assertSession()->waitForElement('css', '.js-views-ui-dialog'));
+    // Click the Apply button of the dialog.
+    $assert_session->elementExists('css', '.js-views-ui-dialog .ui-dialog-buttonpane')->findButton('Apply')->press();
+    // Wait for AJAX to finish.
+    $assert_session->assertWaitOnAjaxRequest();
+
+    // Check that the display menu tabs list still has the expected CSS classes.
+    $assert_session->elementExists('css', '#views-display-menu-tabs.views-tabs.views-tabs--secondary');
+  }
+
+  /**
+   * Tests Views UI dropbutton CSS classes.
+   *
+   * Ensures that the CSS classes added to the Views UI extra actions dropbutton
+   * in .views-display-top are preserved when Views UI is refreshed with AJAX.
+   */
+  public function testViewsUiDropButtonCssClasses(): void {
+    $this->drupalGet('admin/structure/views/view/who_s_online');
+    $assert_session = $this->assertSession();
+    $extra_actions_dropbutton_list = $assert_session->elementExists('css', '#views-display-extra-actions.dropbutton--small');
+    $list_item_selectors = ['li:first-child', 'li:last-child'];
+    // Test list item CSS classes.
+    foreach ($list_item_selectors as $list_item_selector) {
+      $this->assertNotNull($extra_actions_dropbutton_list->find('css', "$list_item_selector.dropbutton__item"));
+    }
+
+    // Click on the Display name and wait for the Views UI dialog.
+    $assert_session->elementExists('css', '#edit-display-settings-top .views-display-setting a')->click();
+    $this->assertNotNull($this->assertSession()->waitForElement('css', '.js-views-ui-dialog'));
+    // Click the Apply button of the dialog.
+    $assert_session->elementExists('css', '.js-views-ui-dialog .ui-dialog-buttonpane')->findButton('Apply')->press();
+    // Wait for AJAX to finish.
+    $this->assertSession()->assertWaitOnAjaxRequest();
+
+    // Check that the drop button list still has the expected CSS classes.
+    $this->assertTrue($extra_actions_dropbutton_list->hasClass('dropbutton--small'));
+    // Check list item CSS classes.
+    foreach ($list_item_selectors as $list_item_selector) {
+      $this->assertNotNull($extra_actions_dropbutton_list->find('css', "$list_item_selector.dropbutton__item"));
+    }
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Theme/OliveroMessagesTest.php

@@ -0,0 +1,64 @@
+<?php
+
+declare(strict_types=1);
+
+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(): void {
+    $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");
+      }
+    }
+  }
+
+}