function CKEditor5AllowedTagsTest::testImgAddedViaUploadPlugin

Tests that the img tag is added after enabling image uploads.

File

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

Class

CKEditor5AllowedTagsTest

Tests for CKEditor 5.

Namespace

Code

public function testImgAddedViaUploadPlugin() {
  $page = $this->getSession()
    ->getPage();
  $assert_session = $this->assertSession();
  $this->createNewTextFormat($page, $assert_session);
  $assert_session->assertWaitOnAjaxRequest();
  $allowed_html_field = $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');
  $this->assertTrue($allowed_html_field->hasAttribute('readonly'));
  // Allowed tags are currently the default, with no <img>.
  $this->assertEquals($this->allowedElements, $allowed_html_field->getValue());
  // The image upload settings form should not be present.
  $assert_session->elementNotExists('css', '[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-imageupload"]');
  $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-drupalInsertImage'));
  $this->triggerKeyUp('.ckeditor5-toolbar-item-drupalInsertImage', 'ArrowDown');
  $assert_session->assertWaitOnAjaxRequest();
  // The image upload settings form should now be present.
  $assert_session->elementExists('css', '[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-image"]');
  $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-active .ckeditor5-toolbar-item-drupalInsertImage'));
  // The image insert plugin is enabled and inserting <img> is allowed.
  $this->assertEquals($this->allowedElements . ' <img src alt height width>', $allowed_html_field->getValue());
  $page->clickLink('Image');
  $assert_session->waitForText('Enable image uploads');
  $this->assertTrue($page->hasUncheckedField('editor[settings][plugins][ckeditor5_image][status]'));
  $page->checkField('editor[settings][plugins][ckeditor5_image][status]');
  $assert_session->assertWaitOnAjaxRequest();
  // Enabling image uploads adds <img> with several attributes to allowed
  // tags.
  $this->assertEquals($this->allowedElements . ' <img src alt height width data-entity-uuid data-entity-type>', $allowed_html_field->getValue());
  // Also enabling the caption filter will add the data-caption attribute to
  // <img>.
  $this->assertTrue($page->hasUncheckedField('filters[filter_caption][status]'));
  $page->checkField('filters[filter_caption][status]');
  $assert_session->assertWaitOnAjaxRequest();
  $this->assertEquals($this->allowedElements . ' <img src alt height width data-entity-uuid data-entity-type data-caption>', $allowed_html_field->getValue());
  // Also enabling the alignment filter will add the data-align attribute to
  // <img>.
  $this->assertTrue($page->hasUncheckedField('filters[filter_align][status]'));
  $page->checkField('filters[filter_align][status]');
  $assert_session->assertWaitOnAjaxRequest();
  $this->assertEquals($this->allowedElements . ' <img src alt height width data-entity-uuid data-entity-type data-caption data-align>', $allowed_html_field->getValue());
  // Disable image upload.
  $page->clickLink('Image');
  $assert_session->waitForText('Enable image uploads');
  $this->assertTrue($page->hasCheckedField('editor[settings][plugins][ckeditor5_image][status]'));
  $page->uncheckField('editor[settings][plugins][ckeditor5_image][status]');
  $assert_session->assertWaitOnAjaxRequest();
  // The image insert is still allowed when image uploads are disabled.
  $this->assertEquals($this->allowedElements . ' <img src alt height width data-caption data-align>', $allowed_html_field->getValue());
  $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-drupalInsertImage'));
  $this->triggerKeyUp('.ckeditor5-toolbar-item-drupalInsertImage', 'ArrowUp');
  $assert_session->assertWaitOnAjaxRequest();
  // Confirm <img> is no longer an allowed tag, once image insert is disabled.
  $this->assertEquals($this->allowedElements, $allowed_html_field->getValue());
}