You are here

public function MediaTest::testPreviewUsesDefaultThemeAndIsClientCacheable in Drupal 10

Same name in this branch
  1. 10 core/modules/ckeditor/tests/src/FunctionalJavascript/MediaTest.php \Drupal\Tests\ckeditor\FunctionalJavascript\MediaTest::testPreviewUsesDefaultThemeAndIsClientCacheable()
  2. 10 core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php \Drupal\Tests\ckeditor5\FunctionalJavascript\MediaTest::testPreviewUsesDefaultThemeAndIsClientCacheable()

The CKEditor Widget must load a preview generated using the default theme.

File

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

Class

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

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript

Code

public function testPreviewUsesDefaultThemeAndIsClientCacheable() {

  // Make the node edit form use the admin theme, like on most Drupal sites.
  $this
    ->config('node.settings')
    ->set('use_admin_theme', TRUE)
    ->save();

  // Allow the test user to view the admin theme.
  $this->adminUser
    ->addRole($this
    ->drupalCreateRole([
    'view the administration theme',
  ]));
  $this->adminUser
    ->save();

  // Configure a different default and admin theme, like on most Drupal sites.
  $this
    ->config('system.theme')
    ->set('default', 'stable')
    ->set('admin', 'classy')
    ->save();

  // Assert that when looking at an embedded entity in the CKEditor Widget,
  // the preview is generated using the default theme, not the admin theme.
  // @see media_test_embed_entity_view_alter()
  $this
    ->drupalGet($this->host
    ->toUrl('edit-form'));
  $this
    ->waitForEditor();
  $assert_session = $this
    ->assertSession();
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', 'img[src*="image-test.png"]'));
  $element = $assert_session
    ->elementExists('css', '[data-media-embed-test-active-theme]');
  $this
    ->assertSame('stable', $element
    ->getAttribute('data-media-embed-test-active-theme'));

  // Assert that the first preview request transferred >500 B over the wire.
  // Then toggle source mode on and off. This causes the CKEditor widget to be
  // destroyed and then reconstructed. Assert that during this reconstruction,
  // a second request is sent. This second request should have transferred 0
  // bytes: the browser should have cached the response, thus resulting in a
  // much better user experience.
  $this
    ->assertGreaterThan(500, $this
    ->getLastPreviewRequestTransferSize());
  $this
    ->pressEditorButton('Source');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElement('css', '.ck-source-editing-area'));

  // CKEditor 5 is very smart: if no changes were made in the Source Editing
  // Area, it will not rerender the contents. In this test, we
  // want to verify that Media preview responses are cached on the client side
  // so it is essential that rerendering occurs. To achieve this, we append a
  // single space.
  $source_text_area = $this
    ->getSession()
    ->getPage()
    ->find('css', '[name="body[0][value]"] + .ck-editor textarea');
  $source_text_area
    ->setValue($source_text_area
    ->getValue() . ' ');
  $this
    ->pressEditorButton('Source');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', 'img[src*="image-test.png"]'));
  $this
    ->assertSame(0, $this
    ->getLastPreviewRequestTransferSize());
}