function CKEditor5AllowedTagsTest::testAllowedTags

Test filter_html allowed tags.

File

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

Class

CKEditor5AllowedTagsTest

Tests for CKEditor 5.

Namespace

Code

public function testAllowedTags() {
    $page = $this->getSession()
        ->getPage();
    $assert_session = $this->assertSession();
    $this->createNewTextFormat($page, $assert_session);
    $assert_session->assertWaitOnAjaxRequest();
    // Confirm the "allowed tags" field is  read only, and the value
    // matches the tags required by CKEditor.
    // Allowed HTML field is readonly and its wrapper has a form-disabled class.
    $this->assertNotEmpty($assert_session->waitForElement('css', '.js-form-item-filters-filter-html-settings-allowed-html.form-disabled'));
    $allowed_html_field = $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');
    $this->assertTrue($allowed_html_field->hasAttribute('readonly'));
    $this->assertSame($this->allowedElements, $allowed_html_field->getValue());
    $this->saveNewTextFormat($page, $assert_session);
    $assert_session->pageTextContains('Added text format ckeditor5');
    $assert_session->pageTextContains('Text formats and editors');
    // Confirm the filter config was updated with the correct allowed tags.
    $this->assertSame($this->allowedElements, FilterFormat::load('ckeditor5')->filters('filter_html')
        ->getConfiguration()['settings']['allowed_html']);
    $page->find('css', '[data-drupal-selector="edit-formats-ckeditor5"]')
        ->clickLink('Configure');
    $assert_session->assertWaitOnAjaxRequest();
    // Add the block quote plugin to the CKEditor 5 toolbar.
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-blockQuote'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-blockQuote', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();
    $allowed_with_blockquote = $this->allowedElements . ' <blockquote>';
    $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');
    $this->assertHtmlEsqueFieldValueEquals('filters[filter_html][settings][allowed_html]', $allowed_with_blockquote);
    $page->pressButton('Save configuration');
    $assert_session->pageTextContains('The text format ckeditor5 has been updated.');
    // Flush caches so the updated config can be checked.
    drupal_flush_all_caches();
    // Confirm that the tags required by the newly-added plugins were correctly
    // saved.
    $this->assertSame($allowed_with_blockquote, FilterFormat::load('ckeditor5')->filters('filter_html')
        ->getConfiguration()['settings']['allowed_html']);
    $page->find('css', '[data-drupal-selector="edit-formats-ckeditor5"]')
        ->clickLink('Configure');
    // And for good measure, confirm the correct tags are in the form field when
    // returning to the form.
    $this->assertHtmlEsqueFieldValueEquals('filters[filter_html][settings][allowed_html]', $allowed_with_blockquote);
    // Add the source editing plugin to the CKEditor 5 toolbar.
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-sourceEditing'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-sourceEditing', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();
    // Updating Source Editing's editable tags should automatically update
    // filter_html to include those additional tags.
    $assert_session->waitForText('Source editing');
    $page->find('css', '[href^="#edit-editor-settings-plugins-ckeditor5-sourceediting"]')
        ->click();
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->waitForText('Manually editable HTML tags');
    $source_edit_tags_field = $assert_session->fieldExists('editor[settings][plugins][ckeditor5_sourceEditing][allowed_tags]');
    $source_edit_tags_field->setValue('<aside>');
    $assert_session->assertWaitOnAjaxRequest();
    $this->assertHtmlEsqueFieldValueEquals('filters[filter_html][settings][allowed_html]', '<br> <p> <h2> <h3> <h4> <h5> <h6> <aside> <strong> <em> <blockquote>');
    $allowed_html_field = $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');
    $this->assertTrue($allowed_html_field->hasAttribute('readonly'));
    // Adding tags to Source Editing's editable tags that are already supported
    // by enabled CKEditor 5 plugins must trigger a validation error, and that
    // error must be associated with the correct form item.
    $source_edit_tags_field->setValue('<aside><strong>');
    $assert_session->waitForText('The following tag(s) are already supported by enabled plugins and should not be added to the Source Editing "Manually editable HTML tags" field: Bold (<strong>)');
    $this->assertTrue($page->find('css', '[href^="#edit-editor-settings-plugins-ckeditor5-sourceediting"]')
        ->getParent()
        ->hasClass('is-selected'));
    $this->assertSame('true', $page->findField('editor[settings][plugins][ckeditor5_sourceEditing][allowed_tags]')
        ->getAttribute('aria-invalid'));
    $this->assertTrue($allowed_html_field->hasAttribute('readonly'));
    // The same validation error appears when saving the form regardless of the
    // immediate AJAX validation error above.
    $page->pressButton('Save configuration');
    $assert_session->pageTextContains('The following tag(s) are already supported by enabled plugins and should not be added to the Source Editing "Manually editable HTML tags" field: Bold (<strong>)');
    $this->assertTrue($page->find('css', '[href^="#edit-editor-settings-plugins-ckeditor5-sourceediting"]')
        ->getParent()
        ->hasClass('is-selected'));
    $this->assertSame('true', $page->findField('editor[settings][plugins][ckeditor5_sourceEditing][allowed_tags]')
        ->getAttribute('aria-invalid'));
    $assert_session->pageTextNotContains('The text format ckeditor5 has been updated');
    // Wait for the "Source editing" vertical tab to appear, remove the already
    // supported tags and re-save. Now the text format should save successfully.
    $assert_session->waitForText('Source editing');
    $page->find('css', '[href^="#edit-editor-settings-plugins-ckeditor5-sourceediting"]')
        ->click();
    $assert_session->pageTextContains('Manually editable HTML tags');
    $source_edit_tags_field = $assert_session->fieldExists('editor[settings][plugins][ckeditor5_sourceEditing][allowed_tags]');
    $source_edit_tags_field->setValue('<aside>');
    $assert_session->assertWaitOnAjaxRequest();
    $page->pressButton('Save configuration');
    $assert_session->pageTextContains('The text format ckeditor5 has been updated');
    $assert_session->pageTextNotContains('The following tag(s) are already supported by enabled plugins and should not be added to the Source Editing "Manually editable HTML tags" field: Bold (<strong>)');
    // Ensure that CKEditor can be initialized with Source Editing.
    // @see https://www.drupal.org/i/3231427
    $this->drupalGet('node/add');
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ck-editor'));
}