Issue #3388505 by catch: CKEditor 5's Functional JS tests take a long time to run

<?php

namespace Drupal\Tests\ckeditor5\FunctionalJavascript;

use Drupal\editor\Entity\Editor;

use Drupal\filter\Entity\FilterFormat;

use Drupal\ckeditor5\Plugin\Editor\CKEditor5;

use Symfony\Component\Validator\ConstraintViolation;

// cspell:ignore layercake

/**

 * @coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Media

 * @group ckeditor5

 * @group #slow

 * @internal

 */

class MediaLinkabilityTest extends MediaTestBase {

  /**

   * Ensures arbitrary attributes can be added on links wrapping media via GHS.

   *

   * @dataProvider providerLinkability

   */

  public function testLinkedMediaArbitraryHtml(bool $unrestricted): void {

    $assert_session = $this->assertSession();

    $editor = Editor::load('test_format');

    $settings = $editor->getSettings();

    $filter_format = $editor->getFilterFormat();

    if ($unrestricted) {

      $filter_format

        ->setFilterConfig('filter_html', ['status' => FALSE]);

    }

    else {

      // Allow the data-foo attribute in <a> via GHS. Also, add support for div's

      // with data-foo attribute to ensure that linked drupal-media elements can

      // be wrapped with <div>.

      $settings['plugins']['ckeditor5_sourceEditing']['allowed_tags'] = ['<a data-foo>', '<div data-bar>'];

      $editor->setSettings($settings);

      $filter_format->setFilterConfig('filter_html', [

        'status' => TRUE,

        'settings' => [

          'allowed_html' => '<p> <br> <strong> <em> <a href data-foo> <drupal-media data-entity-type data-entity-uuid data-align data-caption alt data-view-mode> <div data-bar>',

        ],

      ]);

    }

    $editor->save();

    $filter_format->save();

    $this->assertSame([], array_map(

      function (ConstraintViolation $v) {

        return (string) $v->getMessage();

      },

      iterator_to_array(CKEditor5::validatePair(

        Editor::load('test_format'),

        FilterFormat::load('test_format')

      ))

    ));

    // Wrap the existing drupal-media tag with a div and an a that include

    // attributes allowed via GHS.

    $original_value = $this->host->body->value;

    $this->host->body->value = '<div data-bar="baz"><a href="https://example.com" data-foo="bar">' . $original_value . '</a></div>';

    $this->host->save();

    $this->drupalGet($this->host->toUrl('edit-form'));

    // Confirm data-foo is present in the editing view.

    $this->assertNotEmpty($link = $assert_session->waitForElementVisible('css', 'a[href="https://example.com"]'));

    $this->assertEquals('bar', $link->getAttribute('data-foo'));

    // Confirm that the media is wrapped by the div on the editing view.

    $assert_session->elementExists('css', 'div[data-bar="baz"] > .drupal-media > a[href="https://example.com"] > div[data-drupal-media-preview]');

    // Confirm that drupal-media is wrapped by the div and a, and that GHS has

    // retained arbitrary HTML allowed by source editing.

    $editor_dom = new \DOMXPath($this->getEditorDataAsDom());

    $this->assertNotEmpty($editor_dom->query('//div[@data-bar="baz"]/a[@data-foo="bar"]/drupal-media'));

  }

  /**

   * Tests linkability of the media CKEditor widget.

   *

   * Due to the very different HTML markup generated for the editing view and

   * the data view, this is explicitly testing the "editingDowncast" and

   * "dataDowncast" results. These are CKEditor 5 concepts.

   *

   * @see https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/editing-engine.html#conversion

   *

   * @dataProvider providerLinkability

   */

  public function testLinkability(bool $unrestricted) {

    // Disable filter_html.

    if ($unrestricted) {

      FilterFormat::load('test_format')

        ->setFilterConfig('filter_html', ['status' => FALSE])

        ->save();

    }

    $page = $this->getSession()->getPage();

    $this->drupalGet($this->host->toUrl('edit-form'));

    $this->waitForEditor();

    $assert_session = $this->assertSession();

    // Initial state: the Drupal Media CKEditor Widget is not selected.

    $drupalmedia = $assert_session->waitForElementVisible('css', '.ck-content .ck-widget.drupal-media');

    $this->assertNotEmpty($drupalmedia);

    $this->assertFalse($drupalmedia->hasClass('.ck-widget_selected'));

    // Assert the "editingDowncast" HTML before making changes.

    $assert_session->elementExists('css', '.ck-content .ck-widget.drupal-media > [data-drupal-media-preview]');

    // Assert the "dataDowncast" HTML before making changes.

    $xpath = new \DOMXPath($this->getEditorDataAsDom());

    $this->assertNotEmpty($xpath->query('//drupal-media'));

    $this->assertEmpty($xpath->query('//a'));

    // Assert the link button is present and not pressed.

    $link_button = $this->getEditorButton('Link');

    $this->assertSame('false', $link_button->getAttribute('aria-pressed'));

    // Wait for the preview to load.

    $preview = $assert_session->waitForElement('css', '.ck-content .ck-widget.drupal-media [data-drupal-media-preview="ready"]');

    $this->assertNotEmpty($preview);

    // Tests linking Drupal media.

    $drupalmedia->click();

    $this->assertTrue($drupalmedia->hasClass('ck-widget_selected'));

    $this->assertEditorButtonEnabled('Link');

    // Assert structure of image toolbar balloon.

    $this->assertVisibleBalloon('.ck-toolbar[aria-label="Drupal Media toolbar"]');

    $link_media_button = $this->getBalloonButton('Link media');

    // Click the "Link media" button.

    $this->assertSame('false', $link_media_button->getAttribute('aria-pressed'));

    $link_media_button->press();

    // Assert structure of link form balloon.

    $balloon = $this->assertVisibleBalloon('.ck-link-form');

    $url_input = $balloon->find('css', '.ck-labeled-field-view__input-wrapper .ck-input-text');

    // Fill in link form balloon's <input> and hit "Save".

    $url_input->setValue('http://linking-embedded-media.com');

    $balloon->pressButton('Save');

    // Assert the "editingDowncast" HTML after making changes. Assert the link

    // exists, then assert the link exists. Then assert the expected DOM

    // structure in detail.

    $assert_session->elementExists('css', '.ck-content a[href="http://linking-embedded-media.com"]');

    $assert_session->elementExists('css', '.ck-content .drupal-media.ck-widget > a[href="http://linking-embedded-media.com"] > div[aria-label] > article > div > img[src*="image-test.png"]');

    // Assert the "dataDowncast" HTML after making changes.

    $xpath = new \DOMXPath($this->getEditorDataAsDom());

    $this->assertNotEmpty($xpath->query('//drupal-media'));

    $this->assertNotEmpty($xpath->query('//a[@href="http://linking-embedded-media.com"]'));

    $this->assertNotEmpty($xpath->query('//a[@href="http://linking-embedded-media.com"]/drupal-media'));

    // Ensure that the media caption is retained and not linked as a result of

    // linking media.

    $this->assertNotEmpty($xpath->query('//a[@href="http://linking-embedded-media.com"]/drupal-media[@data-caption="baz"]'));

    // Add `class="trusted"` to the link.

    $this->assertEmpty($xpath->query('//a[@href="http://linking-embedded-media.com" and @class="trusted"]'));

    $this->pressEditorButton('Source');

    $source_text_area = $assert_session->waitForElement('css', '.ck-source-editing-area textarea');

    $this->assertNotEmpty($source_text_area);

    $new_value = str_replace('<a ', '<a class="trusted" ', $source_text_area->getValue());

    $source_text_area->setValue('<p>temp</p>');

    $source_text_area->setValue($new_value);

    $this->pressEditorButton('Source');

    // When unrestricted, additional attributes on links should be retained.

    $xpath = new \DOMXPath($this->getEditorDataAsDom());

    $this->assertCount($unrestricted ? 1 : 0, $xpath->query('//a[@href="http://linking-embedded-media.com" and @class="trusted"]'));

    // Save the entity whose text field is being edited.

    $page->pressButton('Save');

    // Assert the HTML the end user sees.

    $assert_session->elementExists('css', $unrestricted

      ? 'a[href="http://linking-embedded-media.com"].trusted img[src*="image-test.png"]'

      : 'a[href="http://linking-embedded-media.com"] img[src*="image-test.png"]');

    // Go back to edit the now *linked* <drupal-media>. Everything from this

    // point onwards is effectively testing "upcasting" and proving there is no

    // data loss.

    $this->drupalGet($this->host->toUrl('edit-form'));

    $this->waitForEditor();

    // Assert the "dataDowncast" HTML before making changes.

    $xpath = new \DOMXPath($this->getEditorDataAsDom());

    $this->assertNotEmpty($xpath->query('//drupal-media'));

    $this->assertNotEmpty($xpath->query('//a[@href="http://linking-embedded-media.com"]'));

    $this->assertNotEmpty($xpath->query('//a[@href="http://linking-embedded-media.com"]/drupal-media'));

    // Tests unlinking media.

    $drupalmedia->click();

    $this->assertEditorButtonEnabled('Link');

    $this->assertSame('true', $this->getEditorButton('Link')->getAttribute('aria-pressed'));

    // Assert structure of Drupal media toolbar balloon.

    $this->assertVisibleBalloon('.ck-toolbar[aria-label="Drupal Media toolbar"]');

    $link_media_button = $this->getBalloonButton('Link media');

    $this->assertSame('true', $link_media_button->getAttribute('aria-pressed'));

    $link_media_button->click();

    // Assert structure of link actions balloon.

    $this->getBalloonButton('Edit link');

    $unlink_image_button = $this->getBalloonButton('Unlink');

    // Click the "Unlink" button.

    $unlink_image_button->click();

    $this->assertSame('false', $this->getEditorButton('Link')->getAttribute('aria-pressed'));

    // Assert the "editingDowncast" HTML after making changes. Assert the link

    // exists, then assert no link exists. Then assert the expected DOM

    // structure in detail.

    $assert_session->elementNotExists('css', '.ck-content a');

    $assert_session->elementExists('css', '.ck-content .drupal-media.ck-widget > div[aria-label] > article > div > img[src*="image-test.png"]');

    // Ensure that figcaption exists.

    // @see https://www.drupal.org/project/drupal/issues/3268318

    $assert_session->elementExists('css', '.ck-content .drupal-media.ck-widget > figcaption');

    // Assert the "dataDowncast" HTML after making changes.

    $xpath = new \DOMXPath($this->getEditorDataAsDom());

    $this->assertNotEmpty($xpath->query('//drupal-media'));

    $this->assertEmpty($xpath->query('//a'));

  }

  public function providerLinkability(): array {

    return [

      'restricted' => [FALSE],

      'unrestricted' => [TRUE],

    ];

  }

  /**

   * Ensure that manual link decorators work with linkable media.

   *

   * @dataProvider providerLinkability

   */

  public function testLinkManualDecorator(bool $unrestricted) {

    \Drupal::service('module_installer')->install(['ckeditor5_manual_decorator_test']);

    $this->resetAll();

    $decorator = 'Open in a new tab';

    $decorator_attributes = '[@target="_blank"][@rel="noopener noreferrer"][@class="link-new-tab"]';

    // Disable filter_html.

    if ($unrestricted) {

      FilterFormat::load('test_format')

        ->setFilterConfig('filter_html', ['status' => FALSE])

        ->save();

      $decorator = 'Pink color';

      $decorator_attributes = '[@style="color:pink;"]';

    }

    $this->drupalGet($this->host->toUrl('edit-form'));

    $this->waitForEditor();

    $assert_session = $this->assertSession();

    $page = $this->getSession()->getPage();

    $this->assertNotEmpty($drupalmedia = $assert_session->waitForElementVisible('css', '.ck-content .ck-widget.drupal-media'));

    $drupalmedia->click();

    $this->assertVisibleBalloon('.ck-toolbar[aria-label="Drupal Media toolbar"]');

    // Turn off caption, so we don't accidentally put our link in that text

    // field instead of on the actual media.

    $this->getBalloonButton('Toggle caption off')->click();

    $assert_session->assertNoElementAfterWait('css', 'figure.drupal-media > figcaption');

    $this->assertVisibleBalloon('.ck-toolbar[aria-label="Drupal Media toolbar"]');

    $this->getBalloonButton('Link media')->click();

    $balloon = $this->assertVisibleBalloon('.ck-link-form');

    $url_input = $balloon->find('css', '.ck-labeled-field-view__input-wrapper .ck-input-text');

    $url_input->setValue('http://linking-embedded-media.com');

    $this->getBalloonButton($decorator)->click();

    $balloon->pressButton('Save');

    $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.drupal-media a'));

    $this->assertVisibleBalloon('.ck-link-actions');

    $xpath = new \DOMXPath($this->getEditorDataAsDom());

    $this->assertNotEmpty($xpath->query("//a[@href='http://linking-embedded-media.com']$decorator_attributes"));

    $this->assertNotEmpty($xpath->query("//a[@href='http://linking-embedded-media.com']$decorator_attributes/drupal-media"));

    // Ensure that manual decorators upcast correctly.

    $page->pressButton('Save');

    $this->drupalGet($this->host->toUrl('edit-form'));

    $this->assertNotEmpty($drupalmedia = $assert_session->waitForElementVisible('css', '.ck-content .ck-widget.drupal-media'));

    $xpath = new \DOMXPath($this->getEditorDataAsDom());

    $this->assertNotEmpty($xpath->query("//a[@href='http://linking-embedded-media.com']$decorator_attributes"));

    $this->assertNotEmpty($xpath->query("//a[@href='http://linking-embedded-media.com']$decorator_attributes/drupal-media"));

    // Finally, ensure that media can be unlinked.

    $drupalmedia->click();

    $this->assertVisibleBalloon('.ck-toolbar[aria-label="Drupal Media toolbar"]');

    $this->getBalloonButton('Link media')->click();

    $this->assertVisibleBalloon('.ck-link-actions');

    $this->getBalloonButton('Unlink')->click();

    $this->assertTrue($assert_session->waitForElementRemoved('css', '.drupal-media a'));

    $xpath = new \DOMXPath($this->getEditorDataAsDom());

    $this->assertEmpty($xpath->query('//a'));

    $this->assertNotEmpty($xpath->query('//drupal-media'));

  }

}

<?php

namespace Drupal\Tests\ckeditor5\FunctionalJavascript;

use Drupal\Core\Database\Database;

use Drupal\Core\Entity\Entity\EntityViewDisplay;

use Drupal\filter\Entity\FilterFormat;

/**

 * @coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Media

 * @group ckeditor5

 * @group #slow

 * @internal

 */

class MediaPreviewTest extends MediaTestBase {

  /**

   * Tests that failed media embed preview requests inform the end user.

   */

  public function testErrorMessages() {

    // 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() {

    // 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', '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) {

    // 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->assertWaitOnAjaxRequest();

        $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 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() {

    $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());

  }

}