function StyleTest::testStyleFunctionality

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

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());
}