class MediaPreviewTest

Same name and namespace in other branches
  1. 11.x core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaPreviewTest.php \Drupal\Tests\ckeditor5\FunctionalJavascript\MediaPreviewTest

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

Hierarchy

Expanded class hierarchy of MediaPreviewTest

File

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

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript
View source
class MediaPreviewTest extends MediaTestBase {
  
  /**
   * Tests that failed media embed preview requests inform the end user.
   */
  public function testErrorMessages() : void {
    // This test currently frequently causes the SQLite database to lock, so
    // skip the test on SQLite until the issue can be resolved.
    // @todo https://www.drupal.org/project/drupal/issues/3273626
    if (Database::getConnection()->driver() === 'sqlite') {
      $this->markTestSkipped('Test frequently causes a locked database on SQLite');
    }
    // Assert that a request to the `media.filter.preview` route that does not
    // result in a 200 response (due to server error or network error) is
    // handled in the JavaScript by displaying the expected error message.
    // @see core/modules/media/js/media_embed_ckeditor.theme.js
    // @see js/ckeditor5_plugins/drupalMedia/src/drupalmediaediting.js
    $this->container
      ->get('state')
      ->set('test_media_filter_controller_throw_error', TRUE);
    $this->drupalGet($this->host
      ->toUrl('edit-form'));
    $this->waitForEditor();
    $assert_session = $this->assertSession();
    $assert_session->waitForElementVisible('css', '.ck-widget.drupal-media');
    $this->assertEmpty($assert_session->waitForElementVisible('css', 'img[src*="image-test.png"]', 1000));
    $assert_session->elementNotExists('css', '.ck-widget.drupal-media .media');
    $this->assertNotEmpty($assert_session->waitForText('An error occurred while trying to preview the media. Save your work and reload this page.'));
    // Now assert that the error doesn't appear when the override to force an
    // error is removed.
    $this->container
      ->get('state')
      ->set('test_media_filter_controller_throw_error', FALSE);
    $this->getSession()
      ->reload();
    $this->waitForEditor();
    $this->assertNotEmpty($assert_session->waitForElementVisible('css', 'img[src*="image-test.png"]'));
    // There's a second kind of error message that comes from the back end
    // that happens when the media uuid can't be converted to a media preview.
    // In this case, the error will appear in a the themeable
    // media-embed-error.html template.  We have a hook altering the css
    // classes to test the twig template is working properly and picking up our
    // extra class.
    // @see \Drupal\media\Plugin\Filter\MediaEmbed::renderMissingMediaIndicator()
    // @see core/modules/media/templates/media-embed-error.html.twig
    // @see media_test_embed_preprocess_media_embed_error()
    $original_value = $this->host->body->value;
    $this->host->body->value = str_replace($this->media
      ->uuid(), 'invalid_uuid', $original_value);
    $this->host
      ->save();
    $this->drupalGet($this->host
      ->toUrl('edit-form'));
    $this->waitForEditor();
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ck-widget.drupal-media .this-error-message-is-themeable'));
    // Test when using the starterkit_theme theme, an additional class is added
    // to the error, which is supported by
    // stable9/templates/content/media-embed-error.html.twig.
    $this->assertTrue($this->container
      ->get('theme_installer')
      ->install([
      'starterkit_theme',
    ]));
    $this->config('system.theme')
      ->set('default', 'starterkit_theme')
      ->save();
    $this->drupalGet($this->host
      ->toUrl('edit-form'));
    $this->waitForEditor();
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ck-widget.drupal-media .this-error-message-is-themeable'));
    // Test that restoring a valid UUID results in the media embed preview
    // displaying.
    $this->host->body->value = $original_value;
    $this->host
      ->save();
    $this->drupalGet($this->host
      ->toUrl('edit-form'));
    $this->waitForEditor();
    $this->assertNotEmpty($assert_session->waitForElementVisible('css', 'img[src*="image-test.png"]'));
    $assert_session->elementNotExists('css', '.ck-widget.drupal-media .this-error-message-is-themeable');
  }
  
  /**
   * The CKEditor Widget must load a preview generated using the default theme.
   */
  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());
  }
  
  /**
   * Tests preview route access.
   *
   * @param bool $media_embed_enabled
   *   Whether to test with media_embed filter enabled on the text format.
   * @param bool $can_use_format
   *   Whether the logged in user is allowed to use the text format.
   *
   * @dataProvider previewAccessProvider
   */
  public function testEmbedPreviewAccess($media_embed_enabled, $can_use_format) : void {
    // Reconfigure the host entity's text format to suit our needs.
    /** @var \Drupal\filter\FilterFormatInterface $format */
    $format = FilterFormat::load($this->host->body->format);
    $format->set('filters', [
      'filter_align' => [
        'status' => TRUE,
      ],
      'filter_caption' => [
        'status' => TRUE,
      ],
      'media_embed' => [
        'status' => $media_embed_enabled,
      ],
    ]);
    $format->save();
    $permissions = [
      'bypass node access',
    ];
    if ($can_use_format) {
      $permissions[] = $format->getPermissionName();
    }
    $this->drupalLogin($this->drupalCreateUser($permissions));
    $this->drupalGet($this->host
      ->toUrl('edit-form'));
    $assert_session = $this->assertSession();
    if ($can_use_format) {
      $this->waitForEditor();
      if ($media_embed_enabled) {
        // The preview rendering, which in this test will use Starterkit theme's
        // media.html.twig template, will fail without the CSRF token/header.
        // @see ::testEmbeddedMediaPreviewWithCsrfToken()
        $this->assertNotEmpty($assert_session->waitForElementVisible('css', 'article.media'));
      }
      else {
        // If the filter isn't enabled, there won't be an error, but the
        // preview shouldn't be rendered.
        $assert_session->elementNotExists('css', 'article.media');
      }
    }
    else {
      $assert_session->pageTextContains('This field has been disabled because you do not have sufficient permissions to edit it.');
    }
  }
  
  /**
   * Data provider for ::testEmbedPreviewAccess.
   */
  public static function previewAccessProvider() {
    return [
      'media_embed filter enabled' => [
        TRUE,
        TRUE,
      ],
      'media_embed filter disabled' => [
        FALSE,
        TRUE,
      ],
      'media_embed filter enabled, user not allowed to use text format' => [
        TRUE,
        FALSE,
      ],
    ];
  }
  
  /**
   * Ensure media preview isn't clickable.
   */
  public function testMediaPointerEvent() : void {
    $entityViewDisplay = EntityViewDisplay::load('media.image.view_mode_1');
    $thumbnail = $entityViewDisplay->getComponent('thumbnail');
    $thumbnail['settings']['image_link'] = 'file';
    $entityViewDisplay->setComponent('thumbnail', $thumbnail);
    $entityViewDisplay->save();
    $assert_session = $this->assertSession();
    $page = $this->getSession()
      ->getPage();
    $url = $this->host
      ->toUrl('edit-form');
    $this->drupalGet($url);
    $this->waitForEditor();
    $assert_session->waitForLink('default alt');
    $page->find('css', '.ck .drupal-media')
      ->click();
    // Assert that the media preview is not clickable by comparing the URL.
    $this->assertEquals($url->toString(), $this->getUrl());
  }

}

Members

Title Sort descending Modifiers Object type Summary
MediaPreviewTest::previewAccessProvider public static function Data provider for ::testEmbedPreviewAccess.
MediaPreviewTest::testEmbedPreviewAccess public function Tests preview route access.
MediaPreviewTest::testErrorMessages public function Tests that failed media embed preview requests inform the end user.
MediaPreviewTest::testMediaPointerEvent public function Ensure media preview isn't clickable.
MediaPreviewTest::testPreviewUsesDefaultThemeAndIsClientCacheable public function The CKEditor Widget must load a preview generated using the default theme.
MediaTestBase::$adminUser protected property The user to use during testing.
MediaTestBase::$defaultTheme protected property The theme to install as the default for testing.
MediaTestBase::$host protected property A host entity with a body field to embed media in.
MediaTestBase::$media protected property The sample Media entity to embed.
MediaTestBase::$mediaFile protected property The second sample Media entity to embed used in one of the tests.
MediaTestBase::$modules protected static property Modules to install.
MediaTestBase::assertSourceAttributeSame protected function Verifies value of an attribute on the downcast <drupal-media> element.
MediaTestBase::getLastPreviewRequestTransferSize protected function Gets the transfer size of the last preview request.
MediaTestBase::setUp protected function

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