public function StyleTest::testStyleFunctionality in Drupal 10

Tests Style functionality: setting a class, expected style choices.

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/StyleTest.php, line 153

Class

StyleTest

@coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Style @group ckeditor5 @internal

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript

Code

public function testStyleFunctionality() {
  FilterFormat::create([
    'format' => 'test_format',
    'name' => 'Test format',
    'filters' => [
      'filter_html' => [
        'status' => TRUE,
        'settings' => [
          'allowed_html' => '<p class="highlighted interesting"> <br> <a href class="reliable"> <blockquote class="famous"> <h2 class="red-heading">',
        ],
      ],
    ],
  ])
    ->save();
  Editor::create([
    'editor' => 'ckeditor5',
    'format' => 'test_format',
    'settings' => [
      'toolbar' => [
        'items' => [
          'heading',
          'link',
          'blockQuote',
          'style',
        ],
      ],
      'plugins' => [
        'ckeditor5_heading' => [
          'enabled_headings' => [
            'heading2',
          ],
        ],
        'ckeditor5_style' => [
          'styles' => [
            [
              'label' => 'Highlighted & interesting',
              'element' => '<p class="highlighted interesting">',
            ],
            [
              'label' => 'Red heading',
              'element' => '<h2 class="red-heading">',
            ],
            [
              'label' => 'Reliable source',
              'element' => '<a class="reliable">',
            ],
            [
              'label' => 'Famous',
              'element' => '<blockquote class="famous">',
            ],
          ],
        ],
      ],
    ],
    'image_upload' => [
      'status' => FALSE,
    ],
  ])
    ->save();
  $this
    ->assertSame([], array_map(function (ConstraintViolation $v) {
    return (string) $v
      ->getMessage();
  }, iterator_to_array(CKEditor5::validatePair(Editor::load('test_format'), FilterFormat::load('test_format')))));

  // Create a sample entity to test CKEditor 5.
  $node = $this
    ->createNode([
    'type' => 'page',
    'title' => 'A selection of the history of Drupal',
    'body' => [
      'value' => '<h2>Upgrades</h2><p class="history">Drupal has historically been difficult to upgrade from one major version to the next.</p><p class="highlighted interesting">This changed with Drupal 8.</p><blockquote class="famous"><p>Updating from Drupal 8\'s latest version to Drupal 9.0.0 should be as easy as updating between minor versions of Drupal 8.</p></blockquote><p> — <a class="reliable" href="https://dri.es/making-drupal-upgrades-easy-forever">Dries</a></p>',
      'format' => 'test_format',
    ],
  ]);
  $node
    ->save();

  // Observe.
  $this
    ->drupalLogin($this
    ->drupalCreateUser([
    'use text format test_format',
    'bypass node access',
  ]));
  $this
    ->drupalGet($node
    ->toUrl('edit-form'));
  $this
    ->waitForEditor();

  // Select the <h2>, assert that no style is active currently..
  $this
    ->selectTextInsideElement('h2');
  $assert_session = $this
    ->assertSession();
  $style_dropdown = $assert_session
    ->elementExists('css', '.ck-style-dropdown');
  $this
    ->assertSame('Styles', $style_dropdown
    ->getText());

  // Click the dropdown, check the available styles.
  $style_dropdown
    ->click();
  $buttons = $style_dropdown
    ->findAll('css', '.ck-dropdown__panel button');
  $this
    ->assertCount(4, $buttons);
  $this
    ->assertSame('Highlighted & interesting', $buttons[0]
    ->find('css', '.ck-button__label')
    ->getText());
  $this
    ->assertSame('Red heading', $buttons[1]
    ->find('css', '.ck-button__label')
    ->getText());
  $this
    ->assertSame('Famous', $buttons[2]
    ->find('css', '.ck-button__label')
    ->getText());
  $this
    ->assertSame('Reliable source', $buttons[3]
    ->find('css', '.ck-button__label')
    ->getText());
  $this
    ->assertSame('true', $buttons[0]
    ->getAttribute('aria-disabled'));
  $this
    ->assertFalse($buttons[1]
    ->hasAttribute('aria-disabled'));
  $this
    ->assertSame('true', $buttons[2]
    ->getAttribute('aria-disabled'));

  // @todo Uncomment this after https://github.com/ckeditor/ckeditor5/issues/11709 is fixed.
  // $this->assertSame('true', $buttons[3]->getAttribute('aria-disabled'));
  $this
    ->assertTrue($buttons[0]
    ->hasClass('ck-off'));
  $this
    ->assertTrue($buttons[1]
    ->hasClass('ck-off'));
  $this
    ->assertTrue($buttons[2]
    ->hasClass('ck-off'));
  $this
    ->assertTrue($buttons[3]
    ->hasClass('ck-off'));

  // Apply the "Red heading" style and verify it has the expected effect.
  $assert_session
    ->elementExists('css', '.ck-editor__main h2:not(.red-heading)');
  $buttons[1]
    ->click();
  $assert_session
    ->elementExists('css', '.ck-editor__main h2.red-heading');
  $this
    ->assertTrue($buttons[0]
    ->hasClass('ck-off'));
  $this
    ->assertTrue($buttons[1]
    ->hasClass('ck-on'));
  $this
    ->assertTrue($buttons[2]
    ->hasClass('ck-off'));
  $this
    ->assertTrue($buttons[3]
    ->hasClass('ck-off'));
  $this
    ->assertSame('Red heading', $style_dropdown
    ->getText());

  // Select the first paragraph and observe changes in:
  // - styles dropdown label
  // - button states
  $this
    ->selectTextInsideElement('p');
  $this
    ->assertSame('Styles', $style_dropdown
    ->getText());
  $style_dropdown
    ->click();
  $this
    ->assertTrue($buttons[0]
    ->hasClass('ck-off'));
  $this
    ->assertTrue($buttons[1]
    ->hasClass('ck-off'));
  $this
    ->assertTrue($buttons[2]
    ->hasClass('ck-off'));
  $this
    ->assertTrue($buttons[3]
    ->hasClass('ck-off'));
  $this
    ->assertFalse($buttons[0]
    ->hasAttribute('aria-disabled'));
  $this
    ->assertSame('true', $buttons[1]
    ->getAttribute('aria-disabled'));
  $this
    ->assertSame('true', $buttons[2]
    ->getAttribute('aria-disabled'));

  // @todo Uncomment this after https://github.com/ckeditor/ckeditor5/issues/11709 is fixed.
  // $this->assertSame('true', $buttons[3]->getAttribute('aria-disabled'));
  // Close the dropdown.
  $style_dropdown
    ->click();

  // Select the blockquote and observe changes in:
  // - styles dropdown label
  // - button states
  $this
    ->selectTextInsideElement('blockquote');
  $this
    ->assertSame('Famous', $style_dropdown
    ->getText());
  $style_dropdown
    ->click();
  $this
    ->assertTrue($buttons[0]
    ->hasClass('ck-off'));
  $this
    ->assertTrue($buttons[1]
    ->hasClass('ck-off'));
  $this
    ->assertTrue($buttons[2]
    ->hasClass('ck-on'));
  $this
    ->assertTrue($buttons[3]
    ->hasClass('ck-off'));
  $this
    ->assertFalse($buttons[0]
    ->hasAttribute('aria-disabled'));
  $this
    ->assertSame('true', $buttons[1]
    ->getAttribute('aria-disabled'));
  $this
    ->assertFalse($buttons[2]
    ->hasAttribute('aria-disabled'));

  // @todo Uncomment this after https://github.com/ckeditor/ckeditor5/issues/11709 is fixed.
  // $this->assertSame('true', $buttons[3]->getAttribute('aria-disabled'));
  // Close the dropdown.
  $style_dropdown
    ->click();

  // The resulting markup should be identical to the starting markup, with two
  // changes:
  // 1. the `red-heading` class has been added to the `<h2>`
  // 2. the `history` class has been removed from the `<p>`, because CKEditor
  //    5 has not been configured for this: if a Style had configured for it,
  //    it would have been retained.
  $this
    ->assertSame('<h2 class="red-heading">Upgrades</h2><p>Drupal has historically been difficult to upgrade from one major version to the next.</p><p class="highlighted interesting">This changed with Drupal 8.</p><blockquote class="famous"><p>Updating from Drupal 8\'s latest version to Drupal 9.0.0 should be as easy as updating between minor versions of Drupal 8.</p></blockquote><p>— <a class="reliable" href="https://dri.es/making-drupal-upgrades-easy-forever">Dries</a></p>', $this
    ->getEditorDataAsHtmlString());
}