public function MediaImageTest::testCkeditorWidgetHasEditableCaption in Entity Embed 8

Tests caption editing in the CKEditor widget.

File

tests/src/FunctionalJavascript/MediaImageTest.php, line 408

Class

MediaImageTest

Test Media Image specific functionality.

Namespace

Drupal\Tests\entity_embed\FunctionalJavascript

Code

public function testCkeditorWidgetHasEditableCaption() {
  $this
    ->drupalGet($this->host
    ->toUrl('edit-form'));
  $this
    ->waitForEditor();
  $this
    ->assignNameToCkeditorIframe();
  $this
    ->pressEditorButton('test_media_entity_embed');
  $this
    ->assertSession()
    ->waitForId('drupal-modal');

  // Embed media.
  $this
    ->assertSession()
    ->fieldExists('entity_id')
    ->setValue('Screaming hairy armadillo (1)');
  $this
    ->assertSession()
    ->elementExists('css', 'button.js-button-next')
    ->click();
  $this
    ->assertSession()
    ->waitForElementVisible('css', 'form.entity-embed-dialog-step--embed');
  $this
    ->assertSession()
    ->selectExists('attributes[data-entity-embed-display]')
    ->setValue('entity_reference:media_thumbnail');
  $this
    ->assertSession()
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSession()
    ->fieldExists('attributes[data-caption]')
    ->setValue('Is this the real life? Is this just fantasy?');
  $this
    ->submitDialog();

  // Assert that the embedded media was upcasted to a CKEditor widget.
  $figcaption = $this
    ->assertSession()
    ->elementExists('css', 'figcaption');
  $this
    ->assertTrue($figcaption
    ->hasAttribute('contenteditable'));

  // Type in the widget's editable for the caption.
  $this
    ->assertSession()
    ->waitForElement('css', 'figcaption');
  $this
    ->setCaption('Caught in a <strong>landslide</strong>! No escape from <em>reality</em>!');
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertSession()
    ->elementExists('css', 'figcaption > em');
  $this
    ->assertSession()
    ->elementExists('css', 'figcaption > strong')
    ->click();

  // Select the <strong> element and unbold it.
  $this
    ->clickPathLinkByTitleAttribute("strong element");
  $this
    ->pressEditorButton('bold');
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertSession()
    ->elementExists('css', 'figcaption > em');
  $this
    ->assertSession()
    ->elementNotExists('css', 'figcaption > strong');

  // Select the <em> element and unitalicize it.
  $this
    ->assertSession()
    ->elementExists('css', 'figcaption > em')
    ->click();
  $this
    ->clickPathLinkByTitleAttribute("em element");
  $this
    ->pressEditorButton('italic');

  // The "source" button should reveal the HTML source in a state matching
  // what is shown in the CKEditor widget.
  $this
    ->pressEditorButton('source');
  $source = $this
    ->assertSession()
    ->elementExists('css', 'textarea.cke_source');
  $value = $source
    ->getValue();
  $dom = Html::load($value);
  $xpath = new \DOMXPath($dom);
  $drupal_entity = $xpath
    ->query('//drupal-entity')[0];
  $this
    ->assertEquals('Caught in a landslide! No escape from reality!', $drupal_entity
    ->getAttribute('data-caption'));

  // Change the caption by modifying the HTML source directly. When exiting
  // "source" mode, this should be respected.
  $poor_boy_text = "I'm just a <strong>poor boy</strong>, I need no sympathy!";
  $drupal_entity
    ->setAttribute("data-caption", $poor_boy_text);
  $source
    ->setValue(Html::serialize($dom));
  $this
    ->pressEditorButton('source');
  $this
    ->assignNameToCkeditorIframe();
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $figcaption = $this
    ->assertSession()
    ->waitForElement('css', 'figcaption');
  $this
    ->assertEquals($poor_boy_text, $figcaption
    ->getHtml());

  // Select the <strong> element that we just set in "source" mode. This
  // proves that it was indeed rendered by the CKEditor widget.
  $figcaption
    ->find('css', 'strong')
    ->click();
  $this
    ->pressEditorButton('bold');

  // Insert a link into the caption.
  $this
    ->clickPathLinkByTitleAttribute("Caption element");
  $this
    ->pressEditorButton('drupallink');
  $this
    ->assertSession()
    ->waitForId('drupal-modal');
  $this
    ->assertSession()
    ->waitForElementVisible('css', '#editor-link-dialog-form')
    ->findField('attributes[href]')
    ->setValue('https://www.drupal.org');
  $this
    ->assertSession()
    ->elementExists('css', 'button.form-submit')
    ->press();
  $this
    ->assertSession()
    ->assertWaitOnAjaxRequest();

  // Wait for the live preview in the CKEditor widget to finish loading, then
  // edit the link; no `data-cke-saved-href` attribute should exist on it.
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $figcaption = $this
    ->assertSession()
    ->waitForElement('css', 'figcaption');
  $figcaption
    ->find('css', 'a')
    ->click();
  $this
    ->clickPathLinkByTitleAttribute("a element");
  $this
    ->pressEditorButton('drupallink');
  $this
    ->assertSession()
    ->waitForId('drupal-modal');
  $this
    ->assertSession()
    ->waitForElementVisible('css', '#editor-link-dialog-form')
    ->findField('attributes[href]')
    ->setValue('https://www.drupal.org/project/drupal');
  $this
    ->assertSession()
    ->elementExists('css', 'button.form-submit')
    ->press();
  $this
    ->assertSession()
    ->assertWaitOnAjaxRequest();
  $this
    ->pressEditorButton('source');
  $source = $this
    ->assertSession()
    ->elementExists('css', "textarea.cke_source");
  $value = $source
    ->getValue();
  $this
    ->assertStringContainsString('https://www.drupal.org/project/drupal', $value);
  $this
    ->assertStringNotContainsString('data-cke-saved-href', $value);

  // Save the entity.
  $this
    ->assertSession()
    ->buttonExists('Save')
    ->press();

  // Verify the saved entity when viewed also contains the captioned media.
  $link = $this
    ->assertSession()
    ->elementExists('css', 'figcaption > a');
  $this
    ->assertEquals('https://www.drupal.org/project/drupal', $link
    ->getAttribute('href'));
  $this
    ->assertEquals("I'm just a poor boy, I need no sympathy!", $link
    ->getText());

  // Edit it again, type a different caption in the widget.
  $this
    ->drupalGet($this->host
    ->toUrl('edit-form'));
  $this
    ->waitForEditor();
  $this
    ->assignNameToCkeditorIframe();
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertSession()
    ->waitForElementVisible('css', 'figcaption');
  $this
    ->setCaption('Scaramouch, <em>Scaramouch</em>, will you do the <strong>Fandango</strong>?');

  // Verify that the element path usefully indicates the specific media type
  // that is being embedded.
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertSession()
    ->elementExists('xpath', '//figcaption//em')
    ->click();
  $this
    ->getSession()
    ->switchToIFrame();
  $this
    ->assertSession()
    ->elementTextContains('css', '#cke_1_path', 'Embedded Media Entity Embed');

  // Test that removing caption in the EntityEmbedDialog form sets the embed
  // to be captionless.
  $this
    ->reopenDialog();
  $this
    ->assertSession()
    ->fieldExists('attributes[data-caption]')
    ->setValue('');
  $this
    ->submitDialog();
  $this
    ->assertSession()
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSession()
    ->elementExists('css', 'drupal-entity');
  $this
    ->assertSession()
    ->elementNotExists('css', 'figcaption');

  // Set a caption again; this time not using the CKEditor Widget, but through
  // the dialog. We're typing HTML in the form field, but it will have to be
  // HTML-encoded for it to actually show up properly in the CKEditor Widget.
  $this
    ->reopenDialog();
  $freddys_lament = "Mama, life had just begun. But now I've gone and <strong>thrown it all away</strong>! :(";
  $this
    ->assertSession()
    ->fieldExists('attributes[data-caption]')
    ->setValue($freddys_lament);
  $this
    ->submitDialog();
  $this
    ->assertSession()
    ->elementExists('css', 'figcaption');

  // Change the caption in the dialog to contain a link.
  $wind_markup = '<a href="http://www.drupal.org">anyway the wind blows</a>';
  $this
    ->reopenDialog();
  $this
    ->assertSession()
    ->fieldExists('attributes[data-caption]')
    ->setValue($wind_markup);
  $this
    ->submitDialog();

  // Assert the caption in the CKEditor widget was updated.
  $figcaption = $this
    ->assertSession()
    ->waitForElementVisible('css', 'figcaption');
  $this
    ->assertEquals('anyway the wind blows', $figcaption
    ->getText());

  // Change the text of the link in the caption.
  $gallileo = '<a href="http://www.drupal.org">Gallileo, figaro, magnifico</a>';
  $this
    ->reopenDialog();
  $this
    ->assertSession()
    ->fieldExists('attributes[data-caption]')
    ->setValue($gallileo);
  $this
    ->submitDialog();

  // Assert the caption in the CKEditor widget was updated.
  $figcaption = $this
    ->assertSession()
    ->waitForElementVisible('css', 'figcaption');
  $this
    ->assertEquals('Gallileo, figaro, magnifico', $figcaption
    ->getText());

  // Erase the caption in the CKEditor Widget, verify the <figcaption> still
  // exists and contains placeholder text, then type something else.
  $this
    ->setCaption('');
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertSession()
    ->elementContains('css', 'figcaption', '');
  $this
    ->assertSession()
    ->elementAttributeContains('css', 'figcaption', 'data-placeholder', 'Enter caption here');
  $this
    ->setCaption('Fin.');
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertSession()
    ->elementContains('css', 'figcaption', 'Fin.');
}