public function CKEditor5Test::testEditorFileReferenceIntegration in Drupal 10

Ensures that CKEditor 5 integrates with file reference filter.

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5Test.php, line 388

Class

CKEditor5Test

Tests for CKEditor5.

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript

Code

public function testEditorFileReferenceIntegration() {
  $page = $this
    ->getSession()
    ->getPage();
  $assert_session = $this
    ->assertSession();
  $this
    ->createNewTextFormat($page, $assert_session);
  $this
    ->assertNotEmpty($assert_session
    ->waitForElement('css', '.ckeditor5-toolbar-item-uploadImage'));
  $this
    ->triggerKeyUp('.ckeditor5-toolbar-item-uploadImage', 'ArrowDown');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $page
    ->clickLink('Image Upload');
  $page
    ->checkField('editor[settings][plugins][ckeditor5_imageUpload][status]');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $page
    ->checkField('filters[editor_file_reference][status]');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->saveNewTextFormat($page, $assert_session);
  $this
    ->drupalGet('node/add');
  $page
    ->fillField('title[0][value]', 'My test content');

  // Ensure that CKEditor 5 is focused.
  $this
    ->click('.ck-content');
  $this
    ->assertNotEmpty($image_upload_field = $page
    ->find('css', '.ck-file-dialog-button input[type="file"]'));
  $image = $this
    ->getTestFiles('image')[0];
  $image_upload_field
    ->attachFile($this->container
    ->get('file_system')
    ->realpath($image->uri));

  // Wait until preview for the image has rendered to ensure that the image
  // upload has completed and the image has been downcast.
  // @see https://www.drupal.org/project/drupal/issues/3250587
  $this
    ->assertNotEmpty($assert_session
    ->waitForElement('css', '.ck-content img[data-entity-uuid]'));

  // Add alt text to the image.
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '.image.ck-widget > img'));
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '.ck-balloon-panel .ck-text-alternative-form'));
  $alt_override_input = $page
    ->find('css', '.ck-balloon-panel .ck-text-alternative-form input[type=text]');
  $alt_override_input
    ->setValue('There is now alt text');
  $this
    ->getBalloonButton('Save')
    ->click();
  $page
    ->pressButton('Save');
  $uploaded_image = File::load(1);
  $image_url = $this->container
    ->get('file_url_generator')
    ->generateString($uploaded_image
    ->getFileUri());
  $image_uuid = $uploaded_image
    ->uuid();
  $assert_session
    ->elementExists('xpath', sprintf('//img[@src="%s" and @loading="lazy" and @width and @height and @data-entity-uuid="%s" and @data-entity-type="file"]', $image_url, $image_uuid));

  // Ensure that width, height, and length attributes are not stored in the
  // database.
  $this
    ->assertEquals(sprintf('<img data-entity-uuid="%s" data-entity-type="file" src="%s" alt="There is now alt text">', $image_uuid, $image_url), Node::load(1)
    ->get('body')->value);

  // Ensure that data-entity-uuid and data-entity-type attributes are upcasted
  // correctly to CKEditor model.
  $this
    ->drupalGet('node/1/edit');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElement('css', '.ck-editor'));
  $page
    ->pressButton('Save');
  $assert_session
    ->elementExists('xpath', sprintf('//img[@src="%s" and @loading="lazy" and @width and @height and @data-entity-uuid="%s" and @data-entity-type="file"]', $image_url, $image_uuid));
}