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

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

<?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);

}

    $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.

   */