public function MediaTest::testEditableCaption in Drupal 10

Same name in this branch
10 core/modules/ckeditor/tests/src/FunctionalJavascript/MediaTest.php \Drupal\Tests\ckeditor\FunctionalJavascript\MediaTest::testEditableCaption()
10 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 516
Class

MediaTest: @coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Media @group ckeditor5 @internal
Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript
Code

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 be linked.
  $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('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'));
}
You are here

public function MediaTest::testEditableCaption in Drupal 10

File

Class

Namespace

Code

API Navigation
