Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

merge-requests/4910/head
Lauri Eskola 2023-09-29 13:07:19 +03:00
parent b164d5c575
commit c669e40652
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
7 changed files with 1027 additions and 932 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

303
core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaLinkabilityTest.php Normal file
View File

@ -0,0 +1,303 @@
<?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'));
}
}

226
core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaPreviewTest.php Normal file
View File

@ -0,0 +1,226 @@
<?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());
}
}

748
core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php
View File

@ -4,19 +4,13 @@ namespace Drupal\Tests\ckeditor5\FunctionalJavascript;
use Drupal\Core\Entity\Entity\EntityViewDisplay;
use Drupal\Core\Entity\Entity\EntityViewMode;
use Drupal\Core\Database\Database;
use Drupal\ckeditor5\Plugin\Editor\CKEditor5;
use Drupal\editor\Entity\Editor;
use Drupal\field\Entity\FieldConfig;
use Drupal\file\Entity\File;
use Drupal\filter\Entity\FilterFormat;
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
use Drupal\language\Entity\ConfigurableLanguage;
use Drupal\language\Entity\ContentLanguageSettings;
use Drupal\media\Entity\Media;
use Drupal\Tests\media\Traits\MediaTypeCreationTrait;
use Drupal\Tests\TestFileCreationTrait;
use Drupal\Tests\ckeditor5\Traits\CKEditor5TestTrait;
use Drupal\ckeditor5\Plugin\Editor\CKEditor5;
use Drupal\user\Entity\Role;
use Drupal\user\RoleInterface;
use Symfony\Component\Validator\ConstraintViolation;
@ -29,207 +23,7 @@ use Symfony\Component\Validator\ConstraintViolation;
* @group #slow
* @internal
*/
class MediaTest extends WebDriverTestBase {
use CKEditor5TestTrait;
use MediaTypeCreationTrait;
use TestFileCreationTrait;
/**
* The user to use during testing.
*
* @var \Drupal\user\UserInterface
*/
protected $adminUser;
/**
* The sample Media entity to embed.
*
* @var \Drupal\media\MediaInterface
*/
protected $media;
/**
* The second sample Media entity to embed used in one of the tests.
*
* @var \Drupal\media\MediaInterface
*/
protected $mediaFile;
/**
* A host entity with a body field to embed media in.
*
* @var \Drupal\node\NodeInterface
*/
protected $host;
/**
* {@inheritdoc}
*/
protected static $modules = [
'ckeditor5',
'media',
'node',
'text',
'media_test_embed',
'media_library',
'ckeditor5_test',
];
/**
* {@inheritdoc}
*/
protected $defaultTheme = 'starterkit_theme';
/**
* {@inheritdoc}
*/
protected function setUp(): void {
parent::setUp();
EntityViewMode::create([
'id' => 'media.view_mode_1',
'targetEntityType' => 'media',
'status' => TRUE,
'enabled' => TRUE,
'label' => 'View Mode 1',
])->save();
EntityViewMode::create([
'id' => 'media.22222',
'targetEntityType' => 'media',
'status' => TRUE,
'enabled' => TRUE,
'label' => 'View Mode 2 has Numeric ID',
])->save();
FilterFormat::create([
'format' => 'test_format',
'name' => 'Test format',
'filters' => [
'filter_html' => [
'status' => TRUE,
'settings' => [
'allowed_html' => '<p> <br> <strong> <em> <a href> <drupal-media data-entity-type data-entity-uuid data-align data-view-mode data-caption alt>',
],
],
'filter_align' => ['status' => TRUE],
'filter_caption' => ['status' => TRUE],
'media_embed' => [
'status' => TRUE,
'settings' => [
'default_view_mode' => 'view_mode_1',
'allowed_view_modes' => [
'view_mode_1' => 'view_mode_1',
'22222' => '22222',
],
'allowed_media_types' => [],
],
],
],
])->save();
Editor::create([
'editor' => 'ckeditor5',
'format' => 'test_format',
'settings' => [
'toolbar' => [
'items' => [
'sourceEditing',
'link',
'bold',
'italic',
],
],
'plugins' => [
'ckeditor5_sourceEditing' => [
'allowed_tags' => [],
],
'media_media' => [
'allow_view_mode_override' => TRUE,
],
],
],
'image_upload' => [
'status' => FALSE,
],
])->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')
))
));
// Note that media_install() grants 'view media' to all users by default.
$this->adminUser = $this->drupalCreateUser([
'use text format test_format',
'bypass node access',
]);
// Create a sample media entity to be embedded.
$this->createMediaType('image', ['id' => 'image']);
File::create([
'uri' => $this->getTestFiles('image')[0]->uri,
])->save();
$this->media = Media::create([
'bundle' => 'image',
'name' => 'Screaming hairy armadillo',
'field_media_image' => [
[
'target_id' => 1,
'alt' => 'default alt',
'title' => 'default title',
],
],
]);
$this->media->save();
$this->createMediaType('file', ['id' => 'file']);
File::create([
'uri' => $this->getTestFiles('text')[0]->uri,
])->save();
$this->mediaFile = Media::create([
'bundle' => 'file',
'name' => 'Information about screaming hairy armadillo',
'field_media_file' => [
[
'target_id' => 2,
],
],
]);
$this->mediaFile->save();
// Set created media types for each view mode.
EntityViewDisplay::create([
'id' => 'media.image.view_mode_1',
'targetEntityType' => 'media',
'status' => TRUE,
'bundle' => 'image',
'mode' => 'view_mode_1',
])->save();
EntityViewDisplay::create([
'id' => 'media.image.22222',
'targetEntityType' => 'media',
'status' => TRUE,
'bundle' => 'image',
'mode' => '22222',
])->save();
// Create a sample host entity to embed media in.
$this->drupalCreateContentType(['type' => 'blog']);
$this->host = $this->createNode([
'type' => 'blog',
'title' => 'Animals with strange names',
'body' => [
'value' => '<drupal-media data-entity-type="media" data-entity-uuid="' . $this->media->uuid() . '" data-caption="baz"></drupal-media>',
'format' => 'test_format',
],
]);
$this->host->save();
$this->drupalLogin($this->adminUser);
}
class MediaTest extends MediaTestBase {
/**
* Tests that `<drupal-media>` is converted into a block element.
@ -391,183 +185,6 @@ class MediaTest extends WebDriverTestBase {
$this->assertNotEmpty($editor_dom->query('//div[@data-bar="baz"]/drupal-media'));
}
/**
* 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 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 caption editing in the CKEditor widget.
*/
@ -940,300 +557,6 @@ class MediaTest extends WebDriverTestBase {
$assert_session->elementExists('xpath', '//img[contains(@alt, "' . $qui_est_zartan . '")]');
}
/**
* 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'));
}
/**
* 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,
],
];
}
/**
* Tests alignment integration.
*
@ -1686,71 +1009,4 @@ class MediaTest extends WebDriverTestBase {
];
}
/**
* Verifies value of an attribute on the downcast <drupal-media> element.
*
* Assumes CKEditor is in source mode.
*
* @param string $attribute
* The attribute to check.
* @param string|null $value
* Either a string value or if NULL, asserts that <drupal-media> element
* doesn't have the attribute.
*
* @internal
*/
protected function assertSourceAttributeSame(string $attribute, ?string $value): void {
$dom = $this->getEditorDataAsDom();
$drupal_media = (new \DOMXPath($dom))->query('//drupal-media');
$this->assertNotEmpty($drupal_media);
if ($value === NULL) {
$this->assertFalse($drupal_media[0]->hasAttribute($attribute));
}
else {
$this->assertSame($value, $drupal_media[0]->getAttribute($attribute));
}
}
/**
* Gets the transfer size of the last preview request.
*
* @return int
* The size of the bytes transferred.
*/
protected function getLastPreviewRequestTransferSize() {
$javascript = <<<JS
(function(){
return window.performance
.getEntries()
.filter(function (entry) {
return entry.initiatorType == 'fetch' && entry.name.indexOf('/media/test_format/preview') !== -1;
})
.pop()
.transferSize;
})()
JS;
return $this->getSession()->evaluateScript($javascript);
}
/**
* 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());
}
}

271
core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTestBase.php Normal file
View File

@ -0,0 +1,271 @@
<?php
namespace Drupal\Tests\ckeditor5\FunctionalJavascript;
use Drupal\Core\Entity\Entity\EntityViewDisplay;
use Drupal\Core\Entity\Entity\EntityViewMode;
use Drupal\editor\Entity\Editor;
use Drupal\file\Entity\File;
use Drupal\filter\Entity\FilterFormat;
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
use Drupal\media\Entity\Media;
use Drupal\Tests\media\Traits\MediaTypeCreationTrait;
use Drupal\Tests\TestFileCreationTrait;
use Drupal\Tests\ckeditor5\Traits\CKEditor5TestTrait;
use Drupal\ckeditor5\Plugin\Editor\CKEditor5;
use Symfony\Component\Validator\ConstraintViolation;
/**
* Base class for CKEditor 5 Media integration tests.
*
* @internal
*/
abstract class MediaTestBase extends WebDriverTestBase {
use CKEditor5TestTrait;
use MediaTypeCreationTrait;
use TestFileCreationTrait;
/**
* The user to use during testing.
*
* @var \Drupal\user\UserInterface
*/
protected $adminUser;
/**
* The sample Media entity to embed.
*
* @var \Drupal\media\MediaInterface
*/
protected $media;
/**
* The second sample Media entity to embed used in one of the tests.
*
* @var \Drupal\media\MediaInterface
*/
protected $mediaFile;
/**
* A host entity with a body field to embed media in.
*
* @var \Drupal\node\NodeInterface
*/
protected $host;
/**
* {@inheritdoc}
*/
protected static $modules = [
'ckeditor5',
'media',
'node',
'text',
'media_test_embed',
'media_library',
'ckeditor5_test',
];
/**
* {@inheritdoc}
*/
protected $defaultTheme = 'starterkit_theme';
/**
* {@inheritdoc}
*/
protected function setUp(): void {
parent::setUp();
EntityViewMode::create([
'id' => 'media.view_mode_1',
'targetEntityType' => 'media',
'status' => TRUE,
'enabled' => TRUE,
'label' => 'View Mode 1',
])->save();
EntityViewMode::create([
'id' => 'media.22222',
'targetEntityType' => 'media',
'status' => TRUE,
'enabled' => TRUE,
'label' => 'View Mode 2 has Numeric ID',
])->save();
FilterFormat::create([
'format' => 'test_format',
'name' => 'Test format',
'filters' => [
'filter_html' => [
'status' => TRUE,
'settings' => [
'allowed_html' => '<p> <br> <strong> <em> <a href> <drupal-media data-entity-type data-entity-uuid data-align data-view-mode data-caption alt>',
],
],
'filter_align' => ['status' => TRUE],
'filter_caption' => ['status' => TRUE],
'media_embed' => [
'status' => TRUE,
'settings' => [
'default_view_mode' => 'view_mode_1',
'allowed_view_modes' => [
'view_mode_1' => 'view_mode_1',
'22222' => '22222',
],
'allowed_media_types' => [],
],
],
],
])->save();
Editor::create([
'editor' => 'ckeditor5',
'format' => 'test_format',
'settings' => [
'toolbar' => [
'items' => [
'sourceEditing',
'link',
'bold',
'italic',
],
],
'plugins' => [
'ckeditor5_sourceEditing' => [
'allowed_tags' => [],
],
'media_media' => [
'allow_view_mode_override' => TRUE,
],
],
],
'image_upload' => [
'status' => FALSE,
],
])->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')
))
));
// Note that media_install() grants 'view media' to all users by default.
$this->adminUser = $this->drupalCreateUser([
'use text format test_format',
'bypass node access',
]);
// Create a sample media entity to be embedded.
$this->createMediaType('image', ['id' => 'image']);
File::create([
'uri' => $this->getTestFiles('image')[0]->uri,
])->save();
$this->media = Media::create([
'bundle' => 'image',
'name' => 'Screaming hairy armadillo',
'field_media_image' => [
[
'target_id' => 1,
'alt' => 'default alt',
'title' => 'default title',
],
],
]);
$this->media->save();
$this->createMediaType('file', ['id' => 'file']);
File::create([
'uri' => $this->getTestFiles('text')[0]->uri,
])->save();
$this->mediaFile = Media::create([
'bundle' => 'file',
'name' => 'Information about screaming hairy armadillo',
'field_media_file' => [
[
'target_id' => 2,
],
],
]);
$this->mediaFile->save();
// Set created media types for each view mode.
EntityViewDisplay::create([
'id' => 'media.image.view_mode_1',
'targetEntityType' => 'media',
'status' => TRUE,
'bundle' => 'image',
'mode' => 'view_mode_1',
])->save();
EntityViewDisplay::create([
'id' => 'media.image.22222',
'targetEntityType' => 'media',
'status' => TRUE,
'bundle' => 'image',
'mode' => '22222',
])->save();
// Create a sample host entity to embed media in.
$this->drupalCreateContentType(['type' => 'blog']);
$this->host = $this->createNode([
'type' => 'blog',
'title' => 'Animals with strange names',
'body' => [
'value' => '<drupal-media data-entity-type="media" data-entity-uuid="' . $this->media->uuid() . '" data-caption="baz"></drupal-media>',
'format' => 'test_format',
],
]);
$this->host->save();
$this->drupalLogin($this->adminUser);
}
/**
* Verifies value of an attribute on the downcast <drupal-media> element.
*
* Assumes CKEditor is in source mode.
*
* @param string $attribute
* The attribute to check.
* @param string|null $value
* Either a string value or if NULL, asserts that <drupal-media> element
* doesn't have the attribute.
*
* @internal
*/
protected function assertSourceAttributeSame(string $attribute, ?string $value): void {
$dom = $this->getEditorDataAsDom();
$drupal_media = (new \DOMXPath($dom))->query('//drupal-media');
$this->assertNotEmpty($drupal_media);
if ($value === NULL) {
$this->assertFalse($drupal_media[0]->hasAttribute($attribute));
}
else {
$this->assertSame($value, $drupal_media[0]->getAttribute($attribute));
}
}
/**
* Gets the transfer size of the last preview request.
*
* @return int
* The size of the bytes transferred.
*/
protected function getLastPreviewRequestTransferSize() {
$javascript = <<<JS
(function(){
return window.performance
.getEntries()
.filter(function (entry) {
return entry.initiatorType == 'fetch' && entry.name.indexOf('/media/test_format/preview') !== -1;
})
.pop()
.transferSize;
})()
JS;
return $this->getSession()->evaluateScript($javascript);
}
}

102
core/modules/ckeditor5/tests/src/FunctionalJavascript/SourceEditingEmptyElementTest.php Normal file
View File

@ -0,0 +1,102 @@
<?php
namespace Drupal\Tests\ckeditor5\FunctionalJavascript;
use Drupal\ckeditor5\HTMLRestrictions;
use Drupal\editor\Entity\Editor;
use Drupal\filter\Entity\FilterFormat;
use Drupal\ckeditor5\Plugin\Editor\CKEditor5;
use Symfony\Component\Validator\ConstraintViolation;
// cspell:ignore gramma sourceediting
/**
* @coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\SourceEditing
* @covers \Drupal\ckeditor5\Plugin\CKEditor5PluginManager::getCKEditor5PluginConfig
* @group ckeditor5
* @group #slow
* @internal
*/
class SourceEditingEmptyElementTest extends SourceEditingTestBase {
/**
* Tests creating empty inline elements using Source Editing.
*
* @testWith ["<p>Before <i class=\"fab fa-drupal\"></i> and after.</p>", "<p>Before and after.</p>", "<p>Before and after.</p>", null]
* ["<p>Before <i class=\"fab fa-drupal\"></i> and after.</p>", "<p>Before &nbsp;and after.</p>", null, "<i>"]
* ["<p>Before <i class=\"fab fa-drupal\"></i> and after.</p>", null, null, "<i class>"]
* ["<p>Before <span class=\"icon my-icon\"></span> and after.</p>", "<p>Before and after.</p>", "<p>Before and after.</p>", null]
* ["<p>Before <span class=\"icon my-icon\"></span> and after.</p>", "<p>Before &nbsp;and after.</p>", null, "<span>"]
* ["<p>Before <span class=\"icon my-icon\"></span> and after.</p>", "<p>Before <span class=\"icon\"></span> and after.</p>", null, "<span class=\"icon\">"]
*/
public function testEmptyInlineElement(string $input, ?string $expected_output_when_restricted, ?string $expected_output_when_unrestricted, ?string $allowed_elements_string): void {
$this->host->body->value = $input;
$this->host->save();
// If no expected output is specified, it should be identical to the input.
if ($expected_output_when_restricted === NULL) {
$expected_output_when_restricted = $input;
}
if ($expected_output_when_unrestricted === NULL) {
$expected_output_when_unrestricted = $input;
}
$text_editor = Editor::load('test_format');
$text_format = FilterFormat::load('test_format');
if ($allowed_elements_string) {
// Allow creating additional HTML using SourceEditing.
$settings = $text_editor->getSettings();
$settings['plugins']['ckeditor5_sourceEditing']['allowed_tags'][] = $allowed_elements_string;
$text_editor->setSettings($settings);
// Keep the allowed HTML tags in sync.
$allowed_elements = HTMLRestrictions::fromTextFormat($text_format);
$updated_allowed_tags = $allowed_elements->merge(HTMLRestrictions::fromString($allowed_elements_string));
$filter_html_config = $text_format->filters('filter_html')
->getConfiguration();
$filter_html_config['settings']['allowed_html'] = $updated_allowed_tags->toFilterHtmlAllowedTagsString();
$text_format->setFilterConfig('filter_html', $filter_html_config);
// Verify the text format and editor are still a valid pair.
$this->assertSame([], array_map(
function (ConstraintViolation $v) {
return (string) $v->getMessage();
},
iterator_to_array(CKEditor5::validatePair(
$text_editor,
$text_format
))
));
// If valid, save both.
$text_format->save();
$text_editor->save();
}
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$this->assertSame($expected_output_when_restricted, $this->getEditorDataAsHtmlString());
// Make the text format unrestricted: disable filter_html.
$text_format
->setFilterConfig('filter_html', ['status' => FALSE])
->save();
// Verify the text format and editor are still a valid pair.
$this->assertSame([], array_map(
function (ConstraintViolation $v) {
return (string) $v->getMessage();
},
iterator_to_array(CKEditor5::validatePair(
$text_editor,
$text_format
))
));
// Test with a text format allowing arbitrary HTML.
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$this->assertSame($expected_output_when_unrestricted, $this->getEditorDataAsHtmlString());
}
}

187
core/modules/ckeditor5/tests/src/FunctionalJavascript/SourceEditingTest.php
View File

@ -5,7 +5,6 @@ namespace Drupal\Tests\ckeditor5\FunctionalJavascript;
use Drupal\ckeditor5\HTMLRestrictions;
use Drupal\editor\Entity\Editor;
use Drupal\filter\Entity\FilterFormat;
use Drupal\Tests\ckeditor5\Traits\CKEditor5TestTrait;
use Drupal\ckeditor5\Plugin\Editor\CKEditor5;
use Symfony\Component\Validator\ConstraintViolation;
@ -18,111 +17,7 @@ use Symfony\Component\Validator\ConstraintViolation;
* @group #slow
* @internal
*/
class SourceEditingTest extends CKEditor5TestBase {
use CKEditor5TestTrait;
/**
* The user to use during testing.
*
* @var \Drupal\user\UserInterface
*/
protected $adminUser;
/**
* A host entity with a body field whose text to edit with CKEditor 5.
*
* @var \Drupal\node\NodeInterface
*/
protected $host;
/**
* {@inheritdoc}
*/
protected static $modules = [
'ckeditor5',
'node',
'text',
];
/**
* {@inheritdoc}
*/
protected $defaultTheme = 'stark';
/**
* {@inheritdoc}
*/
protected function setUp(): void {
parent::setUp();
FilterFormat::create([
'format' => 'test_format',
'name' => 'Test format',
'filters' => [
'filter_html' => [
'status' => TRUE,
'settings' => [
'allowed_html' => '<div class> <p> <br> <a href> <ol> <ul> <li>',
],
],
'filter_align' => ['status' => TRUE],
'filter_caption' => ['status' => TRUE],
],
])->save();
Editor::create([
'editor' => 'ckeditor5',
'format' => 'test_format',
'settings' => [
'toolbar' => [
'items' => [
'sourceEditing',
'link',
'bulletedList',
'numberedList',
],
],
'plugins' => [
'ckeditor5_sourceEditing' => [
'allowed_tags' => ['<div class>'],
],
'ckeditor5_list' => [
'reversed' => FALSE,
'startIndex' => FALSE,
],
],
],
'image_upload' => [
'status' => FALSE,
],
])->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')
))
));
$this->adminUser = $this->drupalCreateUser([
'use text format test_format',
'bypass node access',
]);
// Create a sample host entity to test CKEditor 5.
$this->host = $this->createNode([
'type' => 'page',
'title' => 'Animals with strange names',
'body' => [
'value' => '',
'format' => 'test_format',
],
]);
$this->host->save();
$this->drupalLogin($this->adminUser);
}
class SourceEditingTest extends SourceEditingTestBase {
/**
* @covers \Drupal\ckeditor5\Plugin\CKEditor5Plugin\SourceEditing::buildConfigurationForm
@ -356,84 +251,4 @@ JS;
];
}
/**
* Tests creating empty inline elements using Source Editing.
*
* @testWith ["<p>Before <i class=\"fab fa-drupal\"></i> and after.</p>", "<p>Before and after.</p>", "<p>Before and after.</p>", null]
* ["<p>Before <i class=\"fab fa-drupal\"></i> and after.</p>", "<p>Before &nbsp;and after.</p>", null, "<i>"]
* ["<p>Before <i class=\"fab fa-drupal\"></i> and after.</p>", null, null, "<i class>"]
* ["<p>Before <span class=\"icon my-icon\"></span> and after.</p>", "<p>Before and after.</p>", "<p>Before and after.</p>", null]
* ["<p>Before <span class=\"icon my-icon\"></span> and after.</p>", "<p>Before &nbsp;and after.</p>", null, "<span>"]
* ["<p>Before <span class=\"icon my-icon\"></span> and after.</p>", "<p>Before <span class=\"icon\"></span> and after.</p>", null, "<span class=\"icon\">"]
*/
public function testEmptyInlineElement(string $input, ?string $expected_output_when_restricted, ?string $expected_output_when_unrestricted, ?string $allowed_elements_string): void {
$this->host->body->value = $input;
$this->host->save();
// If no expected output is specified, it should be identical to the input.
if ($expected_output_when_restricted === NULL) {
$expected_output_when_restricted = $input;
}
if ($expected_output_when_unrestricted === NULL) {
$expected_output_when_unrestricted = $input;
}
$text_editor = Editor::load('test_format');
$text_format = FilterFormat::load('test_format');
if ($allowed_elements_string) {
// Allow creating additional HTML using SourceEditing.
$settings = $text_editor->getSettings();
$settings['plugins']['ckeditor5_sourceEditing']['allowed_tags'][] = $allowed_elements_string;
$text_editor->setSettings($settings);
// Keep the allowed HTML tags in sync.
$allowed_elements = HTMLRestrictions::fromTextFormat($text_format);
$updated_allowed_tags = $allowed_elements->merge(HTMLRestrictions::fromString($allowed_elements_string));
$filter_html_config = $text_format->filters('filter_html')
->getConfiguration();
$filter_html_config['settings']['allowed_html'] = $updated_allowed_tags->toFilterHtmlAllowedTagsString();
$text_format->setFilterConfig('filter_html', $filter_html_config);
// Verify the text format and editor are still a valid pair.
$this->assertSame([], array_map(
function (ConstraintViolation $v) {
return (string) $v->getMessage();
},
iterator_to_array(CKEditor5::validatePair(
$text_editor,
$text_format
))
));
// If valid, save both.
$text_format->save();
$text_editor->save();
}
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$this->assertSame($expected_output_when_restricted, $this->getEditorDataAsHtmlString());
// Make the text format unrestricted: disable filter_html.
$text_format
->setFilterConfig('filter_html', ['status' => FALSE])
->save();
// Verify the text format and editor are still a valid pair.
$this->assertSame([], array_map(
function (ConstraintViolation $v) {
return (string) $v->getMessage();
},
iterator_to_array(CKEditor5::validatePair(
$text_editor,
$text_format
))
));
// Test with a text format allowing arbitrary HTML.
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$this->assertSame($expected_output_when_unrestricted, $this->getEditorDataAsHtmlString());
}
}

122
core/modules/ckeditor5/tests/src/FunctionalJavascript/SourceEditingTestBase.php Normal file
View File

@ -0,0 +1,122 @@
<?php
namespace Drupal\Tests\ckeditor5\FunctionalJavascript;
use Drupal\editor\Entity\Editor;
use Drupal\filter\Entity\FilterFormat;
use Drupal\Tests\ckeditor5\Traits\CKEditor5TestTrait;
use Drupal\ckeditor5\Plugin\Editor\CKEditor5;
use Symfony\Component\Validator\ConstraintViolation;
// cspell:ignore gramma sourceediting
/**
* @internal
*/
abstract class SourceEditingTestBase extends CKEditor5TestBase {
use CKEditor5TestTrait;
/**
* The user to use during testing.
*
* @var \Drupal\user\UserInterface
*/
protected $adminUser;
/**
* A host entity with a body field whose text to edit with CKEditor 5.
*
* @var \Drupal\node\NodeInterface
*/
protected $host;
/**
* {@inheritdoc}
*/
protected static $modules = [
'ckeditor5',
'node',
'text',
];
/**
* {@inheritdoc}
*/
protected $defaultTheme = 'stark';
/**
* {@inheritdoc}
*/
protected function setUp(): void {
parent::setUp();
FilterFormat::create([
'format' => 'test_format',
'name' => 'Test format',
'filters' => [
'filter_html' => [
'status' => TRUE,
'settings' => [
'allowed_html' => '<div class> <p> <br> <a href> <ol> <ul> <li>',
],
],
'filter_align' => ['status' => TRUE],
'filter_caption' => ['status' => TRUE],
],
])->save();
Editor::create([
'editor' => 'ckeditor5',
'format' => 'test_format',
'settings' => [
'toolbar' => [
'items' => [
'sourceEditing',
'link',
'bulletedList',
'numberedList',
],
],
'plugins' => [
'ckeditor5_sourceEditing' => [
'allowed_tags' => ['<div class>'],
],
'ckeditor5_list' => [
'reversed' => FALSE,
'startIndex' => FALSE,
],
],
],
'image_upload' => [
'status' => FALSE,
],
])->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')
))
));
$this->adminUser = $this->drupalCreateUser([
'use text format test_format',
'bypass node access',
]);
// Create a sample host entity to test CKEditor 5.
$this->host = $this->createNode([
'type' => 'page',
'title' => 'Animals with strange names',
'body' => [
'value' => '',
'format' => 'test_format',
],
]);
$this->host->save();
$this->drupalLogin($this->adminUser);
}
}