public function CKEditor5Test::testAttributeEncoding in Drupal 10

Ensures that attribute values are encoded.

File

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

Class

CKEditor5Test

Tests for CKEditor5.

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript

Code

public function testAttributeEncoding() {
  $page = $this
    ->getSession()
    ->getPage();
  $assert_session = $this
    ->assertSession();
  FilterFormat::create([
    'format' => 'ckeditor5',
    'name' => 'CKEditor 5 with image upload',
    'roles' => [
      RoleInterface::AUTHENTICATED_ID,
    ],
  ])
    ->save();
  Editor::create([
    'format' => 'ckeditor5',
    'editor' => 'ckeditor5',
    'settings' => [
      'toolbar' => [
        'items' => [
          'uploadImage',
        ],
      ],
      'plugins' => [
        'ckeditor5_imageResize' => [
          'allow_resize' => FALSE,
        ],
      ],
    ],
    'image_upload' => [
      'status' => TRUE,
      'scheme' => 'public',
      'directory' => 'inline-images',
      'max_size' => '',
    ],
  ])
    ->save();
  $this
    ->assertSame([], array_map(function (ConstraintViolation $v) {
    return (string) $v
      ->getMessage();
  }, iterator_to_array(CKEditor5::validatePair(Editor::load('ckeditor5'), FilterFormat::load('ckeditor5')))));
  $this
    ->drupalGet('node/add');
  $this
    ->waitForEditor();
  $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));
  $assert_session
    ->waitForElementVisible('css', '.ck-widget.image');
  $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]');
  $this
    ->assertSame('', $alt_override_input
    ->getValue());
  $alt_override_input
    ->setValue('</em> Kittens & llamas are cute');
  $this
    ->getBalloonButton('Save')
    ->click();
  $page
    ->pressButton('Save');
  $uploaded_image = File::load(1);
  $image_uuid = $uploaded_image
    ->uuid();
  $image_url = $this->container
    ->get('file_url_generator')
    ->generateString($uploaded_image
    ->getFileUri());
  $this
    ->drupalGet('node/1');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElement('xpath', sprintf('//img[@alt="</em> Kittens & llamas are cute" and @data-entity-uuid="%s" and @data-entity-type="file"]', $image_uuid)));

  // Drupal CKEditor 5 integrations overrides the CKEditor 5 HTML writer to
  // escape ampersand characters (&) and the angle brackets (< and >). This is
  // required because \Drupal\Component\Utility\Xss::filter fails to parse
  // element attributes with unescaped entities in value.
  // @see https://www.drupal.org/project/drupal/issues/3227831
  $this
    ->assertEquals(sprintf('<img data-entity-uuid="%s" data-entity-type="file" src="%s" alt="&lt;/em&gt; Kittens &amp; llamas are cute">', $image_uuid, $image_url), Node::load(1)
    ->get('body')->value);
}