function MediaTest::testEditableCaption

Tests caption editing in the CKEditor widget.

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php, line 208

Class

MediaTest

@coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Media[[api-linebreak]] @group ckeditor5 @group #slow @internal

Namespace

Code

protected function testEditableCaption() : void {
  $page = $this->getSession()
    ->getPage();
  $assert_session = $this->assertSession();
  // Test that setting caption to blank string doesn't break 'Edit media'
  // button.
  $original_value = $this->host->body->value;
  $this->host->body->value = str_replace('data-caption="baz"', 'data-caption=""', $original_value);
  $this->host
    ->save();
  $this->drupalGet($this->host
    ->toUrl('edit-form'));
  $this->waitForEditor();
  // Wait for the media preview to load.
  $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-widget.drupal-media img'));
  $assert_session->elementExists('css', '[data-drupal-media-preview][aria-label="Screaming hairy armadillo"]');
  $assert_session->elementContains('css', 'figcaption', '');
  $assert_session->elementAttributeContains('css', 'figcaption', 'data-placeholder', 'Enter media caption');
  // Test if you leave the caption blank, but change another attribute,
  // such as the alt text, the editable caption is still there and the edit
  // button still exists.
  $this->click('.ck-widget.drupal-media');
  $this->assertVisibleBalloon('[aria-label="Drupal Media toolbar"]');
  // Click the "Override media image alternative text" button.
  $this->getBalloonButton('Override media image alternative text')
    ->click();
  $this->assertVisibleBalloon('.ck-media-alternative-text-form');
  $alt_override_input = $page->find('css', '.ck-balloon-panel .ck-media-alternative-text-form input[type=text]');
  // Fill in the alt field and submit.
  $alt_override_input->setValue('Gold star for robot boy.');
  $this->getBalloonButton('Save')
    ->click();
  $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.drupal-media img[alt*="Gold star for robot boy."]'));
  $this->assertEquals('', $assert_session->waitForElement('css', '.drupal-media figcaption')
    ->getText());
  $assert_session->elementAttributeContains('css', '.drupal-media figcaption', 'data-placeholder', 'Enter media caption');
  // Restore caption in saved body value.
  $original_value = $this->host->body->value;
  $this->host->body->value = str_replace('data-caption=""', 'data-caption="baz"', $original_value);
  $this->host
    ->save();
  $this->drupalGet($this->host
    ->toUrl('edit-form'));
  $this->waitForEditor();
  $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-widget.drupal-media img'));
  $this->assertNotEmpty($figcaption = $assert_session->waitForElement('css', '.drupal-media figcaption'));
  $this->assertSame('baz', $figcaption->getHtml());
  // Ensure that the media contextual toolbar is visible when figcaption is
  // selected.
  $this->selectTextInsideElement('.drupal-media figcaption');
  $this->assertVisibleBalloon('[aria-label="Drupal Media toolbar"]');
  $expected_buttons = [
    'Toggle caption off',
    'Link media',
    'Override media image alternative text',
    // Check only one of the element style buttons since that is sufficient
    // for confirming that element style buttons are visible in the toolbar.
'Break text',
  ];
  foreach ($expected_buttons as $expected_button) {
    $this->assertNotEmpty($this->getBalloonButton($expected_button));
  }
  // Ensure that caption can be toggled off from the toolbar.
  $this->getBalloonButton('Toggle caption off')
    ->click();
  $assert_session->assertNoElementAfterWait('css', 'figcaption');
  // Ensure that caption can be toggled on from the toolbar.
  $this->click('.ck-widget.drupal-media');
  $this->assertVisibleBalloon('[aria-label="Drupal Media toolbar"]');
  $this->getBalloonButton('Toggle caption on')
    ->click();
  $this->assertNotEmpty($figcaption = $assert_session->waitForElementVisible('css', '.drupal-media figcaption'));
  // Ensure that the media contextual toolbar is visible after toggling
  // caption on.
  $this->assertVisibleBalloon('[aria-label="Drupal Media toolbar"]');
  // Type into the widget's caption element.
  $this->selectTextInsideElement('.drupal-media figcaption');
  $figcaption->setValue('Llamas are the most awesome ever');
  $editor_dom = $this->getEditorDataAsDom();
  $this->assertEquals('Llamas are the most awesome ever', $editor_dom->getElementsByTagName('drupal-media')
    ->item(0)
    ->getAttribute('data-caption'));
  // Ensure that the caption can be changed to bold.
  $this->assertNotEmpty($figcaption = $assert_session->waitForElement('css', '.drupal-media figcaption'));
  $this->selectTextInsideElement('.drupal-media figcaption');
  $this->assertNotEmpty($assert_session->waitForElement('css', '.drupal-media figcaption.ck-editor__nested-editable'));
  $this->pressEditorButton('Bold');
  $this->assertNotEmpty($assert_session->waitForElement('css', '.drupal-media figcaption > strong'));
  $this->assertEquals('<strong>Llamas are the most awesome ever</strong>', $figcaption->getHtml());
  $editor_dom = $this->getEditorDataAsDom();
  $this->assertEquals('<strong>Llamas are the most awesome ever</strong>', $editor_dom->getElementsByTagName('drupal-media')
    ->item(0)
    ->getAttribute('data-caption'));
  // Ensure that bold can be removed from the caption.
  $this->assertNotEmpty($assert_session->waitForElement('css', '.drupal-media figcaption > strong'));
  $this->selectTextInsideElement('.drupal-media figcaption > strong');
  $this->assertNotEmpty($assert_session->waitForElement('css', '.drupal-media figcaption.ck-editor__nested-editable'));
  $this->pressEditorButton('Bold');
  $this->assertTrue($assert_session->waitForElementRemoved('css', '.drupal-media figcaption > strong'));
  $this->assertNotEmpty($figcaption = $assert_session->waitForElement('css', '.drupal-media figcaption'));
  $this->assertEquals('Llamas are the most awesome ever', $figcaption->getHtml());
  $editor_dom = $this->getEditorDataAsDom();
  $this->assertEquals('Llamas are the most awesome ever', $editor_dom->getElementsByTagName('drupal-media')
    ->item(0)
    ->getAttribute('data-caption'));
  // Ensure that caption can contain elements such as <br>.
  $this->pressEditorButton('Source');
  $source_text_area = $assert_session->waitForElement('css', '.ck-source-editing-area textarea');
  $source_text = $source_text_area->getValue();
  $source_text_area->setValue(str_replace('data-caption="Llamas are the most awesome ever"', 'data-caption="Llamas are the most<br>awesome ever"', $source_text));
  // Click source again to make source inactive.
  $this->pressEditorButton('Source');
  // Check that the source mode is toggled off.
  $assert_session->elementNotExists('css', '.ck-source-editing-area textarea');
  // Put back the caption as it was before.
  $this->pressEditorButton('Source');
  $source_text_area = $assert_session->waitForElement('css', '.ck-source-editing-area textarea');
  $source_text = $source_text_area->getValue();
  $source_text_area->setValue(str_replace('data-caption="Llamas are the most&lt;br&gt;awesome ever"', 'data-caption="Llamas are the most awesome ever"', $source_text));
  // Click source again to make source inactive.
  $this->pressEditorButton('Source');
  // Check that the source mode is toggled off.
  $assert_session->elementNotExists('css', '.ck-source-editing-area textarea');
  // Ensure that caption can be linked.
  $this->assertNotEmpty($figcaption = $assert_session->waitForElement('css', '.drupal-media figcaption'));
  $figcaption->click();
  $this->selectTextInsideElement('.drupal-media figcaption');
  $this->assertNotEmpty($assert_session->waitForElement('css', '.drupal-media figcaption.ck-editor__nested-editable'));
  $this->pressEditorButton('Link');
  $this->assertVisibleBalloon('.ck-link-form');
  $link_input = $page->find('css', '.ck-balloon-panel .ck-link-form input[type=text]');
  $link_input->setValue('https://example.com');
  $page->find('css', '.ck-balloon-panel .ck-link-form button[type=submit]')
    ->click();
  $this->assertNotEmpty($assert_session->waitForElement('css', '.drupal-media figcaption > a'));
  $this->assertEquals('<a class="ck-link_selected" href="https://example.com">Llamas are the most awesome ever</a>', $figcaption->getHtml());
  $editor_dom = $this->getEditorDataAsDom();
  $this->assertEquals('<a href="https://example.com">Llamas are the most awesome ever</a>', $editor_dom->getElementsByTagName('drupal-media')
    ->item(0)
    ->getAttribute('data-caption'));
}