diff --git a/core/modules/ckeditor5/tests/modules/ckeditor5_drupalelementstyle_test/ckeditor5_drupalelementstyle_test.info.yml b/core/modules/ckeditor5/tests/modules/ckeditor5_drupalelementstyle_test/ckeditor5_drupalelementstyle_test.info.yml new file mode 100644 index 00000000000..d7789c80f6c --- /dev/null +++ b/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 diff --git a/core/modules/ckeditor5/tests/modules/ckeditor5_drupalelementstyle_test/ckeditor5_drupalelementstyle_test.module b/core/modules/ckeditor5/tests/modules/ckeditor5_drupalelementstyle_test/ckeditor5_drupalelementstyle_test.module new file mode 100644 index 00000000000..aed6f573ccf --- /dev/null +++ b/core/modules/ckeditor5/tests/modules/ckeditor5_drupalelementstyle_test/ckeditor5_drupalelementstyle_test.module @@ -0,0 +1,30 @@ +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); +} diff --git a/core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php b/core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php index 5e9afb0cea3..cbbfead2da5 100644 --- a/core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php +++ b/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. */