function CKEditor5AllowedTagsTest::testFullHtml

Tests full HTML text format.

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5AllowedTagsTest.php, line 444

Class

CKEditor5AllowedTagsTest

Tests for CKEditor 5.

Namespace

Code

public function testFullHtml() {
    FilterFormat::create(Yaml::parseFile('core/profiles/standard/config/install/filter.format.full_html.yml'))->save();
    FilterFormat::create(Yaml::parseFile('core/profiles/standard/config/install/filter.format.basic_html.yml'))->save();
    $page = $this->getSession()
        ->getPage();
    $assert_session = $this->assertSession();
    // Add a node with text rendered via the Plain Text format.
    $this->drupalGet('node/add');
    $page->fillField('title[0][value]', 'My test content');
    $page->fillField('body[0][value]', '<foo bar="baz">⬅️✌️➡️</foo><p><a style="color:#ff0000;" foo="bar" hreflang="en" href="https://example.com"><abbr title="National Aeronautics and Space Administration">NASA</abbr> is an acronym.</a></p>');
    $page->pressButton('Save');
    // Configure Full HTML text format to use CKEditor 5.
    $this->drupalGet('admin/config/content/formats/manage/full_html');
    $page->checkField('roles[authenticated]');
    $page->selectFieldOption('editor[editor]', 'ckeditor5');
    $assert_session->assertWaitOnAjaxRequest();
    $page->pressButton('Save configuration');
    $this->assertTrue($assert_session->waitForText('The text format Full HTML has been updated.'));
    // Change the node's text format to Full HTML.
    $this->drupalGet('node/1/edit');
    $page->selectFieldOption('body[0][format]', 'full_html');
    $this->assertNotEmpty($assert_session->waitForText('Change text format?'));
    $page->pressButton('Continue');
    // Ensure the editor is loaded and ensure that arbitrary markup is retained.
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ck-editor'));
    $page->pressButton('Save');
    // But note that the `style` attribute was stripped by
    // \Drupal\editor\EditorXssFilter\Standard.
    $assert_session->responseContains('<foo bar="baz">⬅️✌️➡️</foo><p><a foo="bar" hreflang="en" href="https://example.com"><abbr title="National Aeronautics and Space Administration">NASA</abbr> is an acronym.</a></p>');
    // Ensure attributes are retained after enabling link plugin.
    $this->drupalGet('admin/config/content/formats/manage/full_html');
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-link'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-link', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();
    $page->pressButton('Save configuration');
    $this->drupalGet('node/1/edit');
    $page->pressButton('Save');
    $assert_session->responseContains('<p><a foo="bar" hreflang="en" href="https://example.com"><abbr title="National Aeronautics and Space Administration">NASA</abbr> is an acronym.</a></p>');
    // Configure Basic HTML text format to use CKE5 and enable the link plugin.
    $this->drupalGet('admin/config/content/formats/manage/basic_html');
    $page->checkField('roles[authenticated]');
    $page->selectFieldOption('editor[editor]', 'ckeditor5');
    $assert_session->assertWaitOnAjaxRequest();
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-link'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-link', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();
    $page->pressButton('Save configuration');
    $this->assertTrue($assert_session->waitForText('The text format Basic HTML has been updated.'));
    // Change the node's text format to Basic HTML.
    $this->drupalGet('node/1/edit');
    $page->selectFieldOption('body[0][format]', 'basic_html');
    $this->assertNotEmpty($assert_session->waitForText('Change text format?'));
    $page->pressButton('Continue');
    $assert_session->assertWaitOnAjaxRequest();
    $page->pressButton('Save');
    // The `style` and foo` attributes should have been removed, as should the
    // `<abbr>` and `<foo>` tags.
    $assert_session->responseContains('<p>⬅️✌️➡️</p><p><a href="https://example.com" hreflang="en">NASA is an acronym.</a></p>');
}