function CKEditor5Test::testAttributeEncoding

Ensures that attribute values are encoded.

File

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

Class

CKEditor5Test

Tests for CKEditor 5.

Namespace

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' => [
                    'drupalInsertImage',
                ],
            ],
            '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);
}