Issue #3270765 by Wim Leers, lauriii: Add test coverage for createDropdown in drupalElementStyles

core/modules/ckeditor5/tests/modules/ckeditor5_drupalelementstyle_test/ckeditor5_drupalelementstyle_test.info.yml

@@ -0,0 +1,7 @@
+name: CKEditor 5 Drupal Element Style Test
+type: module
+description: "Provides ability to run DrupalElementStyle CKEditor 5 plugin in multiple ways."
+package: Testing
+dependencies:
+  - drupal:ckeditor5
+  - drupal:media

core/modules/ckeditor5/tests/modules/ckeditor5_drupalelementstyle_test/ckeditor5_drupalelementstyle_test.module

@@ -0,0 +1,30 @@
+<?php
+
+/**
+ * @file
+ * Implements hooks for the CKEditor 5 Drupal Element Style Test module.
+ */
+
+declare(strict_types = 1);
+
+use Drupal\ckeditor5\Plugin\CKEditor5PluginDefinition;
+
+/**
+ * Implements hook_ckeditor4to5upgrade_plugin_info_alter().
+ */
+function ckeditor5_drupalelementstyle_test_ckeditor5_plugin_info_alter(array &$plugin_definitions): void {
+  // Update `media_mediaAlign`.
+  assert($plugin_definitions['media_mediaAlign'] instanceof CKEditor5PluginDefinition);
+  $media_align_plugin_definition = $plugin_definitions['media_mediaAlign']->toArray();
+  $media_align_plugin_definition['ckeditor5']['config']['drupalMedia']['toolbar'] = [
+    0 => [
+      'name' => 'drupalMedia:align',
+      'title' => 'Test title',
+      'items' => array_values(array_filter($media_align_plugin_definition['ckeditor5']['config']['drupalMedia']['toolbar'], function (string $toolbar_item): bool {
+        return $toolbar_item !== '|';
+      })),
+      'defaultItem' => 'drupalElementStyle:breakText',
+    ],
+  ];
+  $plugin_definitions['media_mediaAlign'] = new CKEditor5PluginDefinition($media_align_plugin_definition);
+}

core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php

@@ -1060,6 +1060,43 @@ class MediaTest extends WebDriverTestBase {
     $this->assertFalse($drupal_media_element->hasAttribute('data-align'));
   }
 
+  /**
+   * Ensures that Drupal Media Styles can be displayed in a dropdown.
+   */
+  public function testDrupalMediaStyleInDropdown() {
+    \Drupal::service('module_installer')->install(['ckeditor5_drupalelementstyle_test']);
+    $this->resetAll();
+
+    $assert_session = $this->assertSession();
+    $this->drupalGet($this->host->toUrl('edit-form'));
+    $this->waitForEditor();
+    // Wait for the media preview to load.
+    $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-widget.drupal-media img'));
+
+    // Ensure that by default the "Break text" alignment option is selected and
+    // that the split button title is displayed.
+    $this->click('.ck-widget.drupal-media');
+    $this->assertVisibleBalloon('[aria-label="Drupal Media toolbar"]');
+    $this->assertNotEmpty(($split_button = $this->getBalloonButton('Test title: Break text'))->hasClass('ck-on'));
+
+    // Ensure that the split button can be opened.
+    $split_button->click();
+    $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-dropdown__panel-visible'));
+
+    // Ensure that a button inside the split button can be clicked.
+    $this->assertNotEmpty($align_button = $this->getBalloonButton('Align center and break text'));
+    $align_button->click();
+
+    // Ensure that the "Align center and break text" option is selected and the
+    // split button title is displayed.
+    $this->assertNotEmpty($assert_session->waitForElement('css', '.ck-widget.drupal-media.drupal-media-style-align-center'));
+    $editor_dom = $this->getEditorDataAsDom();
+    $drupal_media_element = $editor_dom->getElementsByTagName('drupal-media')
+      ->item(0);
+    $this->assertEquals('center', $drupal_media_element->getAttribute('data-align'));
+    $this->assertNotEmpty(($this->getBalloonButton('Test title: Align center and break text'))->hasClass('ck-on'));
+  }
+
   /**
    * Tests Drupal Media Style with a CSS class.
    */