public function CKEditorIntegrationTest::testIntegration in Entity Embed 8

Test integration with Filter, Editor and Ckeditor.

File

tests/src/FunctionalJavascript/CKEditorIntegrationTest.php, line 138

Class

CKEditorIntegrationTest

Tests ckeditor integration.

Namespace

Drupal\Tests\entity_embed\FunctionalJavascript

Code

public function testIntegration() {
  $this
    ->drupalGet('admin/config/content/formats/manage/embed_test');
  $page = $this
    ->getSession()
    ->getPage();
  $page
    ->checkField('filters[entity_embed][status]');
  $page
    ->checkField('filters[filter_html][status]');

  // Add "Embeds" toolbar button group to the active toolbar.
  $this
    ->assertSession()
    ->buttonExists('Show group names')
    ->press();
  $this
    ->assertSession()
    ->waitForElementVisible('css', '.ckeditor-add-new-group');
  $this
    ->assertSession()
    ->buttonExists('Add group')
    ->press();
  $this
    ->assertSession()
    ->waitForElementVisible('css', '[name="group-name"]')
    ->setValue('Embeds');
  $this
    ->assertSession()
    ->buttonExists('Apply')
    ->press();

  // Verify the <drupal-entity> tag is not yet allowed.
  $allowed_html = $this
    ->assertSession()
    ->fieldExists('filters[filter_html][settings][allowed_html]')
    ->getValue();
  $this
    ->assertStringNotContainsString('drupal-entity', $allowed_html);

  // Verify that after dragging the Entity Embed CKEditor plugin button into
  // the active toolbar, the <drupal-entity> tag is allowed, as well as some
  // attributes.
  $item = 'li[data-drupal-ckeditor-button-name="' . $this->button
    ->id() . '"]';
  $from = "ul {$item}";
  $target = 'ul.ckeditor-toolbar-group-buttons';
  $this
    ->assertSession()
    ->waitForElementVisible('css', $target);
  $this
    ->sortableTo($item, $from, $target);
  $allowed_html_updated = $this
    ->assertSession()
    ->fieldExists('filters[filter_html][settings][allowed_html]')
    ->getValue();
  $this
    ->assertStringContainsString('drupal-entity data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-align data-caption data-embed-button', $allowed_html_updated);
  $this
    ->assertSession()
    ->buttonExists('Save configuration')
    ->press();
  $this
    ->assertSession()
    ->responseContains('The text format <em class="placeholder">Embed format</em> has been updated.');
  $filterFormat = $this->container
    ->get('entity_type.manager')
    ->getStorage('filter_format')
    ->load('embed_test');
  $settings = $filterFormat
    ->filters('filter_html')->settings;
  $allowed_html = $settings['allowed_html'];
  $this
    ->assertStringContainsString('drupal-entity data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-align data-caption data-embed-button', $allowed_html);

  // Verify that the Entity Embed button shows up and results in an
  // operational entity embedding experience in the text editor.
  $this
    ->drupalGet('/node/add/page');
  $this
    ->waitForEditor();
  $this
    ->assertSame(1, $this
    ->getCkeditorUndoSnapshotCount());
  $this
    ->getSession()
    ->executeScript("CKEDITOR.instances['edit-body-0-value'].setData('<p>Goodbye world!</p>');");
  $this
    ->assertSame(2, $this
    ->getCkeditorUndoSnapshotCount());
  $this
    ->assignNameToCkeditorIframe();
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertSession()
    ->responseContains('entity_embed.editor.css');
  $this
    ->assertSession()
    ->responseContains('hidden.module.css');
  $this
    ->assertSession()
    ->pageTextNotContains('Billy Bones');
  $this
    ->pressEditorButton($this->button
    ->id());
  $this
    ->assertSession()
    ->waitForId('drupal-modal');
  $this
    ->assertSession()
    ->fieldExists('entity_id')
    ->setValue('Billy Bones (1)');
  $this
    ->assertSession()
    ->elementExists('css', 'button.js-button-next')
    ->click();
  $this
    ->assertSession()
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSession()
    ->responseContains('Selected entity');
  $this
    ->assertSession()
    ->responseContains('Billy Bones');
  $this
    ->assertSession()
    ->elementExists('css', 'button.button--primary')
    ->press();
  $this
    ->assertSession()
    ->assertWaitOnAjaxRequest();

  // Verify that the embedded entity gets a preview inside the text editor.
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertSession()
    ->pageTextContains('Billy Bones');
  $this
    ->getSession()
    ->switchToIFrame();
  $this
    ->assertSame(4, $this
    ->getCkeditorUndoSnapshotCount());
  $this
    ->getSession()
    ->getPage()
    ->find('css', 'input[name="title[0][value]"]')
    ->setValue('Pirates');

  // Verify that undo/redo work.
  $this
    ->assertCkeditorUndoOrRedo('undo', [
    'Goodbye world!',
  ], [
    'Billy Bones',
  ]);
  $this
    ->assertCkeditorUndoOrRedo('undo', [], [
    'Billy Bones',
    'Goodbye world!',
  ]);
  $this
    ->assertCkeditorUndoOrRedo('redo', [
    'Goodbye world!',
  ], [
    'Billy Bones',
  ]);
  $this
    ->assertCkeditorUndoOrRedo('redo', [
    'Billy Bones',
    'Goodbye world!',
  ], []);

  // Verify that the embedded entity is rendered by the filter for end users.
  $this
    ->assertSession()
    ->buttonExists('Save')
    ->press();
  $this
    ->assertSession()
    ->responseContains('Billy Bones');
  $this
    ->drupalGet('/node/3/edit');
  $this
    ->assignNameToCkeditorIframe();

  // Verify that the text editor previews the current embedded entity.
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertSession()
    ->waitForText('Billy Bones');
  $this
    ->getSession()
    ->switchToIFrame();

  // Test opening the dialog and switching embedded nodes.
  $this
    ->reopenDialog();
  $this
    ->assertSession()
    ->waitForElementVisible('css', 'div.ui-dialog-buttonset')
    ->findButton('Back')
    ->click();
  $this
    ->assertSession()
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSession()
    ->fieldExists('entity_id')
    ->setValue('Long John Silver (2)');
  $this
    ->assertSession()
    ->elementExists('css', 'button.js-button-next')
    ->click();
  $this
    ->assertSession()
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSession()
    ->responseContains('Selected entity');
  $this
    ->assertSession()
    ->responseContains('Long John Silver');
  $this
    ->assertSession()
    ->elementExists('css', 'button.button--primary')
    ->press();
  $this
    ->assertSession()
    ->assertWaitOnAjaxRequest();

  // Verify that the text editor previews the updated embedded entity.
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertSession()
    ->waitForText('Long John Silver');
  $this
    ->getSession()
    ->switchToIFrame();
  $this
    ->assertSession()
    ->buttonExists('Save')
    ->press();

  // Verify that the embedded entity is rendered by the filter for end users.
  $this
    ->assertSession()
    ->responseContains('Long John Silver');
}