function MediaPreviewTest::testPreviewUsesDefaultThemeAndIsClientCacheable

Same name in other branches
  1. 11.x core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaPreviewTest.php \Drupal\Tests\ckeditor5\FunctionalJavascript\MediaPreviewTest::testPreviewUsesDefaultThemeAndIsClientCacheable()

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

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaPreviewTest.php, line 90

Class

MediaPreviewTest
@coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Media @group ckeditor5 @group #slow @internal

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript

Code

public function testPreviewUsesDefaultThemeAndIsClientCacheable() : void {
    // 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',
    ]))
        ->save();
    // Configure a different default and admin theme, like on most Drupal sites.
    $this->config('system.theme')
        ->set('default', 'stable9')
        ->set('admin', 'starterkit_theme')
        ->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('stable9', $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());
}

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.