function MediaTest::testEditableCaption
Same name in this branch
- 9 core/modules/ckeditor/tests/src/FunctionalJavascript/MediaTest.php \Drupal\Tests\ckeditor\FunctionalJavascript\MediaTest::testEditableCaption()
Same name in other branches
- 10 core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php \Drupal\Tests\ckeditor5\FunctionalJavascript\MediaTest::testEditableCaption()
- 11.x core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php \Drupal\Tests\ckeditor5\FunctionalJavascript\MediaTest::testEditableCaption()
Tests caption editing in the CKEditor widget.
File
-
core/
modules/ ckeditor5/ tests/ src/ FunctionalJavascript/ MediaTest.php, line 515
Class
- MediaTest
- @coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Media @group ckeditor5 @internal
Namespace
Drupal\Tests\ckeditor5\FunctionalJavascriptCode
public function testEditableCaption() {
$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<br>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://drupal.org');
$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://drupal.org">Llamas are the most awesome ever</a>', $figcaption->getHtml());
$editor_dom = $this->getEditorDataAsDom();
$this->assertEquals('<a href="https://drupal.org">Llamas are the most awesome ever</a>', $editor_dom->getElementsByTagName('drupal-media')
->item(0)
->getAttribute('data-caption'));
}
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.