function ImageTestBase::testImageCaption

Ensures that images can have caption set.

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTestBase.php, line 592

Class

ImageTestBase

@coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Image[[api-linebreak]] @group ckeditor5 @internal

Namespace

Code

public function testImageCaption() : void {
  $page = $this->getSession()
    ->getPage();
  $assert_session = $this->assertSession();
  // The foo attribute is added to be removed later by CKEditor 5 to make sure
  // CKEditor 5 was able to downcast data.
  $img_tag = '<img ' . $this->imageAttributesAsString() . ' alt="drupalimage test image" data-caption="Alpacas &lt;em&gt;are&lt;/em&gt; cute&lt;br&gt;really!" foo="bar">';
  $this->host->body->value = $img_tag;
  $this->host
    ->save();
  $this->drupalGet($this->host
    ->toUrl('edit-form'));
  $this->waitForEditor();
  $this->assertNotEmpty($assert_session->waitForElement('css', '.ck-editor'));
  $this->assertNotEmpty($figcaption = $assert_session->waitForElement('css', '.image figcaption'));
  $this->assertSame('Alpacas <em>are</em> cute<br>really!', $figcaption->getHtml());
  $page->pressButton('Source');
  $editor_dom = $this->getEditorDataAsDom();
  $data_caption = $editor_dom->getElementsByTagName('img')
    ->item(0)
    ->getAttribute('data-caption');
  $this->assertSame('Alpacas <em>are</em> cute<br>really!', $data_caption);
  $page->pressButton('Save');
  $src = $this->imageAttributes()['src'];
  $expected = '<img ' . $this->imageAttributesAsString(TRUE) . ' alt="drupalimage test image" data-caption="Alpacas &lt;em&gt;are&lt;/em&gt; cute&lt;br&gt;really!">';
  $expected_dom = Html::load($expected);
  $this->assertEquals($expected_dom->getElementsByTagName('body')
    ->item(0)
    ->C14N(), $editor_dom->getElementsByTagName('body')
    ->item(0)
    ->C14N());
  $assert_session->elementExists('xpath', '//figure/img[@src="' . $src . '" and not(@data-caption)]');
  $assert_session->responseContains('<figcaption>Alpacas <em>are</em> cute<br>really!</figcaption>');
}