class ImageTestBase

Same name in other branches
  1. 9 core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTestBase.php \Drupal\Tests\ckeditor5\FunctionalJavascript\ImageTestBase
  2. 11.x core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTestBase.php \Drupal\Tests\ckeditor5\FunctionalJavascript\ImageTestBase

@coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Image @group ckeditor5 @internal

Hierarchy

Expanded class hierarchy of ImageTestBase

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTestBase.php, line 20

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript
View source
abstract class ImageTestBase extends CKEditor5TestBase {
    use CKEditor5TestTrait;
    use TestFileCreationTrait;
    
    /**
     * The user to use during testing.
     *
     * @var \Drupal\user\UserInterface
     */
    protected $adminUser;
    
    /**
     * A host entity with a body field to embed images in.
     *
     * @var \Drupal\node\NodeInterface
     */
    protected $host;
    
    /**
     * {@inheritdoc}
     */
    protected static $modules = [
        'ckeditor5',
        'node',
        'text',
    ];
    
    /**
     * {@inheritdoc}
     */
    protected $defaultTheme = 'stark';
    
    /**
     * Provides the relevant image attributes.
     *
     * @return string[]
     */
    protected function imageAttributes() {
        return [
            'src' => base_path() . 'core/misc/druplicon.png',
            'width' => '88',
            'height' => '100',
        ];
    }
    
    /**
     * Helper to format attributes.
     *
     * @param bool $reverse
     *   Reverse attributes when printing them.
     *
     * @return string
     */
    protected function imageAttributesAsString($reverse = FALSE) {
        $string = [];
        foreach ($this->imageAttributes() as $key => $value) {
            $string[] = $key . '="' . $value . '"';
        }
        if ($reverse) {
            $string = array_reverse($string);
        }
        return implode(' ', $string);
    }
    
    /**
     * Add an image to the CKEditor 5 editable zone.
     */
    protected function addImage() {
        $page = $this->getSession()
            ->getPage();
        $src = $this->imageAttributes()['src'];
        $this->waitForEditor();
        $this->pressEditorButton('Insert image via URL');
        $panel = $page->find('css', '.ck-dropdown__panel  .ck-image-insert-url');
        $src_input = $panel->find('css', 'input[type=text]');
        $src_input->setValue($src);
        $panel->find('xpath', "//button[span[text()='Insert']]")
            ->click();
        // Wait for the image to be uploaded and rendered by CKEditor 5.
        $this->assertNotEmpty($this->assertSession()
            ->waitForElementVisible('css', '.ck-widget.image > img[src="' . $src . '"]'));
    }
    
    /**
     * Ensures that attributes are retained on conversion.
     */
    public function testAttributeRetentionDuringUpcasting() : void {
        // Run test cases in a single test to make the test run faster.
        $attributes_to_retain = [
            '-none-' => 'inline',
            'data-caption="test caption 🦙"' => 'block',
            'data-align="left"' => 'inline',
        ];
        foreach ($attributes_to_retain as $attribute_to_retain => $expected_upcast_behavior_when_wrapped_in_block_element) {
            if ($attribute_to_retain === '-none-') {
                $attribute_to_retain = '';
            }
            $img_tag = '<img ' . $attribute_to_retain . ' alt="drupalimage test image" ' . $this->imageAttributesAsString() . ' />';
            $test_cases = [
                // Plain image tag for a baseline.
[
                    $img_tag,
                    $img_tag,
                ],
                // Image tag wrapped with <p>.
[
                    "<p>{$img_tag}</p>",
                    $expected_upcast_behavior_when_wrapped_in_block_element === 'inline' ? "<p>{$img_tag}</p>" : $img_tag,
                ],
                // Image tag wrapped with a disallowed paragraph-like element (<div).
                // When inline is the expected upcast behavior, it will wrap in <p>
                // because it still must wrap in a paragraph-like element, and <p> is
                // available to be that element.
[
                    "<div>{$img_tag}</div>",
                    $expected_upcast_behavior_when_wrapped_in_block_element === 'inline' ? "<p>{$img_tag}</p>" : $img_tag,
                ],
            ];
            foreach ($test_cases as $test_case) {
                [
                    $markup,
                    $expected,
                ] = $test_case;
                $this->host->body->value = $markup;
                $this->host
                    ->save();
                $this->drupalGet($this->host
                    ->toUrl('edit-form'));
                $this->waitForEditor();
                // Ensure that the image is rendered in preview.
                $this->assertNotEmpty($this->assertSession()
                    ->waitForElementVisible('css', ".ck-content .ck-widget img"));
                $editor_dom = $this->getEditorDataAsDom();
                $expected_dom = Html::load($expected);
                $xpath = new \DOMXPath($this->getEditorDataAsDom());
                $this->assertEquals($expected_dom->getElementsByTagName('body')
                    ->item(0)
                    ->C14N(), $editor_dom->getElementsByTagName('body')
                    ->item(0)
                    ->C14N());
                // Ensure the test attribute is persisted on downcast.
                if ($attribute_to_retain) {
                    $this->assertNotEmpty($xpath->query("//img[@{$attribute_to_retain}]"));
                }
            }
        }
    }
    
    /**
     * Tests that arbitrary attributes are allowed via GHS.
     */
    public function testImageArbitraryHtml() : void {
        $editor = Editor::load('test_format');
        $settings = $editor->getSettings();
        // Allow the data-foo attribute in img via GHS.
        $settings['plugins']['ckeditor5_sourceEditing']['allowed_tags'] = [
            '<img data-foo>',
        ];
        $editor->setSettings($settings);
        $editor->save();
        $format = FilterFormat::load('test_format');
        $original_config = $format->filters('filter_html')
            ->getConfiguration();
        foreach ($this->providerLinkability() as $data) {
            [
                $image_type,
                $unrestricted,
            ] = $data;
            $format_config = $unrestricted ? [
                'status' => FALSE,
            ] : $original_config;
            $format->setFilterConfig('filter_html', $format_config)
                ->save();
            // Make the test content have either a block image or an inline image.
            $img_tag = '<img data-foo="bar" alt="drupalimage test image" data-entity-type="file" ' . $this->imageAttributesAsString() . ' />';
            $this->host->body->value .= $image_type === 'block' ? $img_tag : "<p>{$img_tag}</p>";
            $this->host
                ->save();
            $expected_widget_selector = $image_type === 'block' ? 'image img' : 'image-inline';
            $this->drupalGet($this->host
                ->toUrl('edit-form'));
            $this->waitForEditor();
            $drupalimage = $this->assertSession()
                ->waitForElementVisible('css', ".ck-content .ck-widget.{$expected_widget_selector}");
            $this->assertNotEmpty($drupalimage);
            $this->assertEquals('bar', $drupalimage->getAttribute('data-foo'));
            $xpath = new \DOMXPath($this->getEditorDataAsDom());
            $this->assertNotEmpty($xpath->query('//img[@data-foo="bar"]'));
        }
    }
    
    /**
     * Tests linkability of the image CKEditor widget.
     *
     * Due to the complex overrides that `drupalImage.DrupalImage` is making, 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
     */
    public function testLinkability() : void {
        $format = FilterFormat::load('test_format');
        $original_config = $format->filters('filter_html')
            ->getConfiguration();
        $original_body_value = $this->host->body->value;
        foreach ($this->providerLinkability() as $data) {
            [
                $image_type,
                $unrestricted,
            ] = $data;
            assert($image_type === 'inline' || $image_type === 'block');
            $format_config = $unrestricted ? [
                'status' => FALSE,
            ] : $original_config;
            $format->setFilterConfig('filter_html', $format_config)
                ->save();
            // Make the test content have either a block image or an inline image.
            $img_tag = '<img alt="drupalimage test image" data-entity-type="file" ' . $this->imageAttributesAsString() . ' />';
            $this->host->body->value = $original_body_value . ($image_type === 'block' ? $img_tag : "<p>{$img_tag}</p>");
            $this->host
                ->save();
            $this->drupalGet($this->host
                ->toUrl('edit-form'));
            $page = $this->getSession()
                ->getPage();
            // Adjust the expectations accordingly.
            $expected_widget_class = $image_type === 'block' ? 'image' : 'image-inline';
            $this->waitForEditor();
            $assert_session = $this->assertSession();
            // Initial state: the image CKEditor Widget is not selected.
            $drupalimage = $assert_session->waitForElementVisible('css', ".ck-content .ck-widget.{$expected_widget_class}");
            $this->assertNotEmpty($drupalimage);
            $this->assertFalse($drupalimage->hasClass('.ck-widget_selected'));
            $src = basename($this->imageAttributes()['src']);
            // Assert the "editingDowncast" HTML before making changes.
            $assert_session->elementExists('css', '.ck-content .ck-widget.' . $expected_widget_class . ' > img[src*="' . $src . '"][alt="drupalimage test image"]');
            // Assert the "dataDowncast" HTML before making changes.
            $xpath = new \DOMXPath($this->getEditorDataAsDom());
            $this->assertNotEmpty($xpath->query('//img[@alt="drupalimage test image"]'));
            $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'));
            // Tests linking images.
            $drupalimage->click();
            $this->assertTrue($drupalimage->hasClass('ck-widget_selected'));
            $this->assertEditorButtonEnabled('Link');
            // Assert structure of image toolbar balloon.
            $this->assertVisibleBalloon('.ck-toolbar[aria-label="Image toolbar"]');
            $link_image_button = $this->getBalloonButton('Link image');
            // Click the "Link image" button.
            $this->assertSame('false', $link_image_button->getAttribute('aria-pressed'));
            $link_image_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://www.drupal.org/association');
            $balloon->pressButton('Save');
            // Assert the "editingDowncast" HTML after making changes. First assert the
            // link exists, then assert the expected DOM structure in detail.
            $assert_session->elementExists('css', '.ck-content a[href*="//www.drupal.org/association"]');
            // For inline images, the link is wrapping the widget; for block images the
            // link lives inside the widget. (This is how it is implemented upstream, it
            // could be implemented differently, we just want to ensure we do not break
            // it. Drupal only cares about having its own "dataDowncast", the
            // "editingDowncast" is considered an implementation detail.)
            $assert_session->elementExists('css', $image_type === 'inline' ? '.ck-content a[href*="//www.drupal.org/association"] .ck-widget.' . $expected_widget_class . ' > img[src*="' . $src . '"][alt="drupalimage test image"]' : '.ck-content .ck-widget.' . $expected_widget_class . ' a[href*="//www.drupal.org/association"] > img[src*="' . $src . '"][alt="drupalimage test image"]');
            // Assert the "dataDowncast" HTML after making changes.
            $xpath = new \DOMXPath($this->getEditorDataAsDom());
            $this->assertCount(1, $xpath->query('//a[@href="http://www.drupal.org/association"]/img[@alt="drupalimage test image"]'));
            $this->assertEmpty($xpath->query('//a[@href="http://www.drupal.org/association" and @class="trusted"]'));
            // Add `class="trusted"` to the link.
            $xpath = new \DOMXPath($this->getEditorDataAsDom());
            $this->assertEmpty($xpath->query('//a[@href="http://www.drupal.org/association" 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://www.drupal.org/association" 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://www.drupal.org/association"].trusted img[src*="' . $src . '"]' : 'a[href="http://www.drupal.org/association"] img[src*="' . $src . '"]');
            // 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('//img[@alt="drupalimage test image"]'));
            $this->assertNotEmpty($xpath->query('//a[@href="http://www.drupal.org/association"]'));
            $this->assertNotEmpty($xpath->query('//a[@href="http://www.drupal.org/association"]/img[@alt="drupalimage test image"]'));
            $this->assertCount($unrestricted ? 1 : 0, $xpath->query('//a[@href="http://www.drupal.org/association" and @class="trusted"]'));
            // Tests unlinking images.
            $drupalimage->click();
            $this->assertEditorButtonEnabled('Link');
            $this->assertSame('true', $this->getEditorButton('Link')
                ->getAttribute('aria-pressed'));
            // Assert structure of image toolbar balloon.
            $this->assertVisibleBalloon('.ck-toolbar[aria-label="Image toolbar"]');
            $link_image_button = $this->getBalloonButton('Link image');
            $this->assertSame('true', $link_image_button->getAttribute('aria-pressed'));
            $link_image_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
            // widget exists but not the link, or *any* link for that matter. Then
            // assert the expected DOM structure in detail.
            $assert_session->elementExists('css', '.ck-content .ck-widget.' . $expected_widget_class);
            $assert_session->elementNotExists('css', '.ck-content a');
            $assert_session->elementExists('css', '.ck-content .ck-widget.' . $expected_widget_class . ' > img[src*="' . $src . '"][alt="drupalimage test image"]');
            // Assert the "dataDowncast" HTML after making changes.
            $xpath = new \DOMXPath($this->getEditorDataAsDom());
            $this->assertCount(0, $xpath->query('//a[@href="http://www.drupal.org/association"]/img[@alt="drupalimage test image"]'));
            $this->assertCount(1, $xpath->query('//img[@alt="drupalimage test image"]'));
            $this->assertCount(0, $xpath->query('//a'));
        }
    }
    
    /**
     * Tests that alt text is required for images.
     *
     * @see https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/editing-engine.html#conversion
     *
     * @dataProvider providerAltTextRequired
     */
    public function testAltTextRequired(bool $unrestricted) : void {
        // Disable filter_html.
        if ($unrestricted) {
            FilterFormat::load('test_format')->setFilterConfig('filter_html', [
                'status' => FALSE,
            ])
                ->save();
        }
        // Make the test content has a block image and an inline image.
        $img_tag = preg_replace('/width="\\d+" height="\\d+"/', 'width="500"', '<img ' . $this->imageAttributesAsString() . ' />');
        $this->host->body->value .= $img_tag . "<p>{$img_tag}</p>";
        $this->host
            ->save();
        $page = $this->getSession()
            ->getPage();
        $this->drupalGet($this->host
            ->toUrl('edit-form'));
        $this->waitForEditor();
        $assert_session = $this->assertSession();
        // Confirm both of the images exist.
        $this->assertNotEmpty($image_block = $assert_session->waitForElementVisible('css', ".ck-content .ck-widget.image"));
        $this->assertNotEmpty($image_inline = $assert_session->waitForElementVisible('css', ".ck-content .ck-widget.image-inline"));
        // Confirm both of the images have an alt text required warning.
        $this->assertNotEmpty($image_block->find('css', '.image-alternative-text-missing-wrapper'));
        $this->assertNotEmpty($image_inline->find('css', '.image-alternative-text-missing-wrapper'));
        // Add alt text to the block image.
        $image_block->find('css', '.image-alternative-text-missing button')
            ->click();
        $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-balloon-panel'));
        $this->assertVisibleBalloon('.ck-text-alternative-form');
        // Ensure that the missing alt text warning is hidden when the alternative
        // text form is open.
        $assert_session->waitForElement('css', '.ck-content .ck-widget.image .image-alternative-text-missing.ck-hidden');
        $assert_session->elementExists('css', '.ck-content .ck-widget.image-inline .image-alternative-text-missing');
        $assert_session->elementNotExists('css', '.ck-content .ck-widget.image-inline .image-alternative-text-missing.ck-hidden');
        // Ensure that the missing alt text error is not added to decorative images.
        $this->assertNotEmpty($decorative_button = $this->getBalloonButton('Decorative image'));
        $assert_session->elementExists('css', '.ck-balloon-panel .ck-text-alternative-form input[type=text]');
        $decorative_button->click();
        $assert_session->elementExists('css', '.ck-content .ck-widget.image .image-alternative-text-missing.ck-hidden');
        $assert_session->elementExists('css', ".ck-content .ck-widget.image-inline .image-alternative-text-missing-wrapper");
        $assert_session->elementNotExists('css', '.ck-content .ck-widget.image-inline .image-alternative-text-missing.ck-hidden');
        // Ensure that the missing alt text error is removed after saving the
        // changes.
        $this->assertNotEmpty($save_button = $this->getBalloonButton('Save'));
        $save_button->click();
        $this->assertTrue($assert_session->waitForElementRemoved('css', ".ck-content .ck-widget.image .image-alternative-text-missing-wrapper"));
        $assert_session->elementExists('css', '.ck-content .ck-widget.image-inline .image-alternative-text-missing-wrapper');
        // Ensure that the decorative image downcasts into empty alt attribute.
        $editor_dom = $this->getEditorDataAsDom();
        $decorative_img = $editor_dom->getElementsByTagName('img')
            ->item(0);
        $this->assertTrue($decorative_img->hasAttribute('alt'));
        $this->assertEmpty($decorative_img->getAttribute('alt'));
        // Ensure that missing alt text error is not added to images with alt text.
        $this->assertNotEmpty($alt_text_button = $this->getBalloonButton('Change image alternative text'));
        $alt_text_button->click();
        $decorative_button->click();
        $this->assertNotEmpty($save_button = $this->getBalloonButton('Save'));
        $this->assertTrue($save_button->hasClass('ck-disabled'));
        $this->assertNotEmpty($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->assertTrue($assert_session->waitForElementRemoved('css', '.ck-balloon-panel .ck-text-alternative-form .ck-disabled'));
        $this->assertFalse($save_button->hasClass('ck-disabled'));
        $save_button->click();
        // Save the node and confirm that the alt text is retained.
        $page->pressButton('Save');
        $this->assertNotEmpty($assert_session->waitForElement('css', 'img[alt="There is now alt text"]'));
        // Ensure that alt form is opened after image upload.
        $this->drupalGet($this->host
            ->toUrl('edit-form'));
        $this->waitForEditor();
        $this->addImage();
        $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-text-alternative-form'));
        $this->assertVisibleBalloon('.ck-text-alternative-form');
    }
    public static function providerAltTextRequired() : array {
        return [
            'Restricted' => [
                FALSE,
            ],
            'Unrestricted' => [
                TRUE,
            ],
        ];
    }
    protected function providerLinkability() : array {
        return [
            'BLOCK image, restricted' => [
                'block',
                FALSE,
            ],
            'BLOCK image, unrestricted' => [
                'block',
                TRUE,
            ],
            'INLINE image, restricted' => [
                'inline',
                FALSE,
            ],
            'INLINE image, unrestricted' => [
                'inline',
                TRUE,
            ],
        ];
    }
    
    /**
     * Tests alignment integration.
     *
     * @dataProvider providerAlignment
     */
    public function testAlignment(string $image_type) : void {
        $assert_session = $this->assertSession();
        $page = $this->getSession()
            ->getPage();
        // Make the test content have either a block image or an inline image.
        $img_tag = '<img alt="drupalimage test image" ' . $this->imageAttributesAsString() . ' />';
        $this->host->body->value .= $image_type === 'block' ? $img_tag : "<p>{$img_tag}</p>";
        $this->host
            ->save();
        $image_selector = $image_type === 'block' ? '.ck-widget.image' : '.ck-widget.image-inline';
        $default_alignment = $image_type === 'block' ? 'Break text' : 'In line';
        $this->drupalGet($this->host
            ->toUrl('edit-form'));
        $this->waitForEditor();
        $this->assertNotEmpty($assert_session->waitForElementVisible('css', $image_selector));
        // Ensure that the default alignment option matches expectation.
        $this->click($image_selector);
        $this->assertVisibleBalloon('[aria-label="Image toolbar"]');
        $this->assertTrue($this->getBalloonButton($default_alignment)
            ->hasClass('ck-on'));
        $editor_dom = $this->getEditorDataAsDom();
        $drupal_media_element = $editor_dom->getElementsByTagName('img')
            ->item(0);
        $this->assertFalse($drupal_media_element->hasAttribute('data-align'));
        $this->getBalloonButton('Align center and break text')
            ->click();
        // Assert the alignment class exists after editing downcast.
        $this->assertNotEmpty($assert_session->waitForElement('css', '.ck-widget.image.image-style-align-center'));
        $editor_dom = $this->getEditorDataAsDom();
        $drupal_media_element = $editor_dom->getElementsByTagName('img')
            ->item(0);
        $this->assertEquals('center', $drupal_media_element->getAttribute('data-align'));
        $page->pressButton('Save');
        // Check that the 'content has been updated' message status appears to confirm we left the editor.
        $this->assertNotEmpty($assert_session->waitForElementVisible('css', '[data-drupal-messages]'));
        // Check that the class is correct in the front end.
        $assert_session->elementExists('css', 'img.align-center');
        // Go back to the editor to check that the alignment class still exists.
        $edit_url = $this->getSession()
            ->getCurrentURL() . '/edit';
        $this->drupalGet($edit_url);
        $this->waitForEditor();
        $assert_session->elementExists('css', '.ck-widget.image.image-style-align-center');
        // Ensure that "Centered image" alignment option is selected.
        $this->click('.ck-widget.image');
        $this->assertVisibleBalloon('[aria-label="Image toolbar"]');
        $this->assertTrue($this->getBalloonButton('Align center and break text')
            ->hasClass('ck-on'));
        $this->getBalloonButton('Break text')
            ->click();
        $this->assertTrue($assert_session->waitForElementRemoved('css', '.ck-widget.image.image-style-align-center'));
        $editor_dom = $this->getEditorDataAsDom();
        $drupal_media_element = $editor_dom->getElementsByTagName('img')
            ->item(0);
        $this->assertFalse($drupal_media_element->hasAttribute('data-align'));
    }
    public static function providerAlignment() {
        return [
            'Block image' => [
                'block',
            ],
            'Inline image' => [
                'inline',
            ],
        ];
    }
    
    /**
     * Ensures that width attribute upcasts and downcasts correctly.
     *
     * @param string $width
     *   The width input for the image.
     *
     * @dataProvider providerWidth
     */
    public function testWidth(string $width) : void {
        $page = $this->getSession()
            ->getPage();
        $assert_session = $this->assertSession();
        // Despite the absence of a `height` attribute on the `<img>`, CKEditor 5
        // should generate an appropriate `height`, matching with the aspect ratio
        // of the image.
        $expected_computed_height = $width;
        if (!str_ends_with($width, '%')) {
            $ratio = $width / (int) $this->imageAttributes()['width'];
            $expected_computed_height = (string) (int) round($ratio * (int) $this->imageAttributes()['height']);
        }
        // Add image to the host body.
        $this->host->body->value = sprintf('<img data-foo="bar" alt="drupalimage test image" ' . $this->imageAttributesAsString() . ' width="%s" />', $width);
        $this->host
            ->save();
        $this->drupalGet($this->host
            ->toUrl('edit-form'));
        $this->waitForEditor();
        // Ensure that the image is upcast as expected. In the editing view, the
        // width attribute should downcast to an inline style on the container
        // element.
        $assert_session->waitForElementVisible('css', ".ck-widget.image");
        $this->assertNotEmpty($assert_session->waitForElementVisible('css', ".ck-widget.image[style] img"));
        // Ensure that the width attribute is retained on downcast.
        $editor_data = $this->getEditorDataAsDom();
        $img_in_editor = $editor_data->getElementsByTagName('img')
            ->item(0);
        $this->assertSame($width, $img_in_editor->getAttribute('width'));
        $this->assertSame($expected_computed_height, $img_in_editor->getAttribute('height'));
        // Save the node and ensure that the width attribute is retained, and ensure
        // that a natural image ratio-respecting height attribute has been added.
        $page->pressButton('Save');
        $this->assertNotEmpty($assert_session->waitForElement('css', "img[width='{$width}'][height='{$expected_computed_height}']"));
    }
    
    /**
     * Ensures that images can have caption set.
     */
    public function testImageCaption() : void {
        $page = $this->getSession()
            ->getPage();
        $assert_session = $this->assertSession();
        // The foo attribute is added to be removed later by CKEditor 5 to make sure
        // CKEditor 5 was able to downcast data.
        $img_tag = '<img ' . $this->imageAttributesAsString() . ' alt="drupalimage test image" data-caption="Alpacas &lt;em&gt;are&lt;/em&gt; cute&lt;br&gt;really!" foo="bar">';
        $this->host->body->value = $img_tag;
        $this->host
            ->save();
        $this->drupalGet($this->host
            ->toUrl('edit-form'));
        $this->waitForEditor();
        $this->assertNotEmpty($assert_session->waitForElement('css', '.ck-editor'));
        $this->assertNotEmpty($figcaption = $assert_session->waitForElement('css', '.image figcaption'));
        $this->assertSame('Alpacas <em>are</em> cute<br>really!', $figcaption->getHtml());
        $page->pressButton('Source');
        $editor_dom = $this->getEditorDataAsDom();
        $data_caption = $editor_dom->getElementsByTagName('img')
            ->item(0)
            ->getAttribute('data-caption');
        $this->assertSame('Alpacas <em>are</em> cute<br>really!', $data_caption);
        $page->pressButton('Save');
        $src = $this->imageAttributes()['src'];
        $expected = '<img ' . $this->imageAttributesAsString(TRUE) . ' alt="drupalimage test image" data-caption="Alpacas &lt;em&gt;are&lt;/em&gt; cute&lt;br&gt;really!">';
        $expected_dom = Html::load($expected);
        $this->assertEquals($expected_dom->getElementsByTagName('body')
            ->item(0)
            ->C14N(), $editor_dom->getElementsByTagName('body')
            ->item(0)
            ->C14N());
        $assert_session->elementExists('xpath', '//figure/img[@src="' . $src . '" and not(@data-caption)]');
        $assert_session->responseContains('<figcaption>Alpacas <em>are</em> cute<br>really!</figcaption>');
    }
    
    /**
     * Data provider for ::testWidth().
     *
     * @return string[][]
     */
    public static function providerWidth() : array {
        return [
            'Image resize with percent unit (only allowed in HTML 4)' => [
                'width' => '33%',
            ],
            'Image resize with (implied) px unit' => [
                'width' => '100',
            ],
        ];
    }
    
    /**
     * Tests the image resize plugin.
     *
     * Confirms that enabling the resize plugin introduces the resize class to
     * images within CKEditor 5.
     *
     * @param bool $is_resize_enabled
     *   Boolean flag to test enabled or disabled.
     *
     * @dataProvider providerResize
     */
    public function testResize(bool $is_resize_enabled) : void {
        // Disable resize plugin because it is enabled by default.
        if (!$is_resize_enabled) {
            Editor::load('test_format')->setSettings([
                'toolbar' => [
                    'items' => [
                        'drupalInsertImage',
                    ],
                ],
                'plugins' => [
                    'ckeditor5_imageResize' => [
                        'allow_resize' => FALSE,
                    ],
                ],
            ])
                ->save();
        }
        $page = $this->getSession()
            ->getPage();
        $assert_session = $this->assertSession();
        $this->drupalGet('node/add');
        $page->fillField('title[0][value]', 'My test content');
        $this->addImage();
        $image_figure = $assert_session->waitForElementVisible('css', 'figure');
        $this->assertSame($is_resize_enabled, $image_figure->hasClass('ck-widget_with-resizer'));
    }
    
    /**
     * Data provider for ::testResize().
     *
     * @return array
     *   The test cases.
     */
    public static function providerResize() : array {
        return [
            'Image resize is enabled' => [
                'is_resize_enabled' => TRUE,
            ],
            'Image resize is disabled' => [
                'is_resize_enabled' => FALSE,
            ],
        ];
    }

}

Members

Title Sort descending Deprecated Modifiers Object type Summary Member alias Overriden Title Overrides
BlockCreationTrait::placeBlock protected function Creates a block instance based on default settings. Aliased as: drupalPlaceBlock
BrowserHtmlDebugTrait::$htmlOutputBaseUrl protected property The Base URI to use for links to the output files.
BrowserHtmlDebugTrait::$htmlOutputClassName protected property Class name for HTML output logging.
BrowserHtmlDebugTrait::$htmlOutputCounter protected property Counter for HTML output logging.
BrowserHtmlDebugTrait::$htmlOutputCounterStorage protected property Counter storage for HTML output logging.
BrowserHtmlDebugTrait::$htmlOutputDirectory protected property Directory name for HTML output logging.
BrowserHtmlDebugTrait::$htmlOutputEnabled protected property HTML output enabled.
BrowserHtmlDebugTrait::$htmlOutputFile protected property The file name to write the list of URLs to.
BrowserHtmlDebugTrait::$htmlOutputTestId protected property HTML output test ID.
BrowserHtmlDebugTrait::formatHtmlOutputHeaders protected function Formats HTTP headers as string for HTML output logging.
BrowserHtmlDebugTrait::getResponseLogHandler protected function Provides a Guzzle middleware handler to log every response received.
BrowserHtmlDebugTrait::htmlOutput protected function Logs a HTML output message in a text file.
BrowserHtmlDebugTrait::initBrowserOutputFile protected function Creates the directory to store browser output.
BrowserTestBase::$baseUrl protected property The base URL.
BrowserTestBase::$configImporter protected property The config importer that can be used in a test.
BrowserTestBase::$customTranslations protected property An array of custom translations suitable for SettingsEditor::rewrite().
BrowserTestBase::$mink protected property Mink session manager.
BrowserTestBase::$minkDefaultDriverArgs protected property Mink default driver params.
BrowserTestBase::$originalContainer protected property The original container.
BrowserTestBase::$originalShutdownCallbacks protected property The original array of shutdown function callbacks.
BrowserTestBase::$preserveGlobalState protected property
BrowserTestBase::$profile protected property The profile to install as a basis for testing. 40
BrowserTestBase::$runTestInSeparateProcess protected property Browser tests are run in separate processes to prevent collisions between
code that may be loaded by tests.
BrowserTestBase::$timeLimit protected property Time limit in seconds for the test.
BrowserTestBase::$translationFilesDirectory protected property The translation file directory for the test environment.
BrowserTestBase::cleanupEnvironment protected function Clean up the test environment.
BrowserTestBase::config protected function Configuration accessor for tests. Returns non-overridden configuration.
BrowserTestBase::filePreDeleteCallback public static function Ensures test files are deletable.
BrowserTestBase::getDefaultDriverInstance protected function Gets an instance of the default Mink driver.
BrowserTestBase::getHttpClient protected function Obtain the HTTP client for the system under test.
BrowserTestBase::getOptions protected function Helper function to get the options of select field.
BrowserTestBase::getSession public function Returns Mink session.
BrowserTestBase::getSessionCookies protected function Get session cookies from current session.
BrowserTestBase::getTestMethodCaller protected function Retrieves the current calling line in the class under test. Overrides BrowserHtmlDebugTrait::getTestMethodCaller
BrowserTestBase::installDrupal public function Installs Drupal into the test site. 2
BrowserTestBase::registerSessions protected function Registers additional Mink sessions.
BrowserTestBase::setUpAppRoot protected function Sets up the root application path.
BrowserTestBase::setUpBeforeClass public static function 1
BrowserTestBase::translatePostValues protected function Transforms a nested array into a flat array suitable for submitForm().
BrowserTestBase::xpath protected function Performs an xpath search on the contents of the internal browser.
BrowserTestBase::__get public function
BrowserTestBase::__sleep public function Prevents serializing any properties.
CKEditor5TestBase::addNewTextFormat protected function Add and save a new text format using CKEditor 5.
CKEditor5TestBase::assertHtmlEsqueFieldValueEquals protected function Decorates ::fieldValueEquals() to force DrupalCI to provide useful errors.
CKEditor5TestBase::assertNoRealtimeValidationErrors protected function Checks that no real-time validation errors are present.
CKEditor5TestBase::createNewTextFormat public function Create a new text format using CKEditor 5.
CKEditor5TestBase::saveNewTextFormat public function Save the new text format.
CKEditor5TestBase::setUp protected function Overrides BrowserTestBase::setUp 6
CKEditor5TestBase::triggerKeyUp protected function Trigger a keyup event on the selected element.
CKEditor5TestTrait::assertEditorButtonDisabled protected function Asserts a CKEditor button is disabled.
CKEditor5TestTrait::assertEditorButtonEnabled protected function Asserts a CKEditor button is enabled.
CKEditor5TestTrait::assertVisibleBalloon protected function Asserts a particular balloon is visible.
CKEditor5TestTrait::getBalloonButton protected function Gets a button from the currently visible balloon.
CKEditor5TestTrait::getEditorButton protected function Waits for a CKEditor button and returns it when available and visible.
CKEditor5TestTrait::getEditorDataAsDom protected function Gets CKEditor 5 instance data as a PHP DOMDocument.
CKEditor5TestTrait::getEditorDataAsHtmlString protected function Gets CKEditor 5 instance data as a HTML string.
CKEditor5TestTrait::pressEditorButton protected function Clicks a CKEditor button.
CKEditor5TestTrait::selectTextInsideElement protected function Selects text inside an element.
CKEditor5TestTrait::waitForEditor protected function Waits for CKEditor to initialize.
ConfigTestTrait::configImporter protected function Returns a ConfigImporter object to import test configuration.
ConfigTestTrait::copyConfig protected function Copies configuration objects from source storage to target storage.
ContentTypeCreationTrait::createContentType protected function Creates a custom content type based on default settings. Aliased as: drupalCreateContentType 1
ExtensionListTestTrait::getModulePath protected function Gets the path for the specified module.
ExtensionListTestTrait::getThemePath protected function Gets the path for the specified theme.
FunctionalTestSetupTrait::$apcuEnsureUniquePrefix protected property The flag to set &#039;apcu_ensure_unique_prefix&#039; setting. 1
FunctionalTestSetupTrait::$classLoader protected property The class loader to use for installation and initialization of setup.
FunctionalTestSetupTrait::$rootUser protected property The &quot;#1&quot; admin user.
FunctionalTestSetupTrait::$usesSuperUserAccessPolicy protected property Set to TRUE to make user 1 a super user. 10
FunctionalTestSetupTrait::doInstall protected function Execute the non-interactive installer. 2
FunctionalTestSetupTrait::getDatabaseTypes protected function Returns all supported database driver installer objects.
FunctionalTestSetupTrait::initConfig protected function Initialize various configurations post-installation. 1
FunctionalTestSetupTrait::initKernel protected function Initializes the kernel after installation.
FunctionalTestSetupTrait::initSettings protected function Initialize settings created during install.
FunctionalTestSetupTrait::initUserSession protected function Initializes user 1 for the site to be installed.
FunctionalTestSetupTrait::installDefaultThemeFromClassProperty protected function Installs the default theme defined by `static::$defaultTheme` when needed. 1
FunctionalTestSetupTrait::installParameters protected function Returns the parameters that will be used when the test installs Drupal. 8
FunctionalTestSetupTrait::prepareEnvironment protected function Prepares the current environment for running the test. 28
FunctionalTestSetupTrait::prepareRequestForGenerator protected function Creates a mock request and sets it on the generator.
FunctionalTestSetupTrait::prepareSettings protected function Prepares site settings and services before installation. 4
FunctionalTestSetupTrait::rebuildAll protected function Resets and rebuilds the environment after setup.
FunctionalTestSetupTrait::rebuildContainer protected function Rebuilds \Drupal::getContainer().
FunctionalTestSetupTrait::resetAll protected function Resets all data structures after having enabled new modules.
FunctionalTestSetupTrait::setContainerParameter protected function Changes parameters in the services.yml file.
FunctionalTestSetupTrait::setupBaseUrl protected function Sets up the base URL based upon the environment variable.
FunctionalTestSetupTrait::writeSettings protected function Rewrites the settings.php file of the test site. 1
ImageTestBase::$adminUser protected property The user to use during testing.
ImageTestBase::$defaultTheme protected property The theme to install as the default for testing. Overrides CKEditor5TestBase::$defaultTheme
ImageTestBase::$host protected property A host entity with a body field to embed images in.
ImageTestBase::$modules protected static property Modules to install. Overrides CKEditor5TestBase::$modules
ImageTestBase::addImage protected function Add an image to the CKEditor 5 editable zone. 1
ImageTestBase::imageAttributes protected function Provides the relevant image attributes. 1
ImageTestBase::imageAttributesAsString protected function Helper to format attributes.
ImageTestBase::providerAlignment public static function
ImageTestBase::providerAltTextRequired public static function
ImageTestBase::providerLinkability protected function
ImageTestBase::providerResize public static function Data provider for ::testResize().
ImageTestBase::providerWidth public static function Data provider for ::testWidth().
ImageTestBase::testAlignment public function Tests alignment integration.
ImageTestBase::testAltTextRequired public function Tests that alt text is required for images.
ImageTestBase::testAttributeRetentionDuringUpcasting public function Ensures that attributes are retained on conversion.
ImageTestBase::testImageArbitraryHtml public function Tests that arbitrary attributes are allowed via GHS.
ImageTestBase::testImageCaption public function Ensures that images can have caption set.
ImageTestBase::testLinkability public function Tests linkability of the image CKEditor widget.
ImageTestBase::testResize public function Tests the image resize plugin.
ImageTestBase::testWidth public function Ensures that width attribute upcasts and downcasts correctly.
NodeCreationTrait::createNode protected function Creates a node based on default settings. Aliased as: drupalCreateNode
NodeCreationTrait::getNodeByTitle public function Get a node from the database based on its title. Aliased as: drupalGetNodeByTitle
PhpUnitWarnings::$deprecationWarnings private static property Deprecation warnings from PHPUnit to raise with @trigger_error().
PhpUnitWarnings::addWarning public function Converts PHPUnit deprecation warnings to E_USER_DEPRECATED.
RandomGeneratorTrait::getRandomGenerator protected function Gets the random generator for the utility methods.
RandomGeneratorTrait::randomMachineName protected function Generates a unique random string containing letters and numbers.
RandomGeneratorTrait::randomObject public function Generates a random PHP object.
RandomGeneratorTrait::randomString public function Generates a pseudo-random string of ASCII characters of codes 32 to 126.
RandomGeneratorTrait::randomStringValidate Deprecated public function Callback for random string validation.
RefreshVariablesTrait::refreshVariables protected function Refreshes in-memory configuration and state information. 2
SessionTestTrait::$sessionName protected property The name of the session cookie.
SessionTestTrait::generateSessionName protected function Generates a session cookie name.
SessionTestTrait::getSessionName protected function Returns the session name in use on the child site.
StorageCopyTrait::replaceStorageContents protected static function Copy the configuration from one storage to another and remove stale items.
TestFileCreationTrait::$generatedTestFiles protected property Whether the files were copied to the test files directory.
TestFileCreationTrait::compareFiles protected function Compares two files based on size and file name.
TestFileCreationTrait::generateFile public static function Generates a test file.
TestFileCreationTrait::getTestFiles protected function Gets a list of files that can be used in tests.
TestRequirementsTrait::checkModuleRequirements Deprecated private function Checks missing module requirements.
TestRequirementsTrait::checkRequirements Deprecated protected function Check module requirements for the Drupal use case.
TestRequirementsTrait::getDrupalRoot protected static function Returns the Drupal root directory.
TestSetupTrait::$configSchemaCheckerExclusions protected static property An array of config object names that are excluded from schema checking. 2
TestSetupTrait::$container protected property The dependency injection container used in the test.
TestSetupTrait::$databasePrefix protected property The database prefix of this test run.
TestSetupTrait::$kernel protected property The DrupalKernel instance used in the test.
TestSetupTrait::$originalSite protected property The site directory of the original parent site.
TestSetupTrait::$privateFilesDirectory protected property The private file directory for the test environment.
TestSetupTrait::$publicFilesDirectory protected property The public file directory for the test environment.
TestSetupTrait::$root protected property The app root.
TestSetupTrait::$siteDirectory protected property The site directory of this test run.
TestSetupTrait::$strictConfigSchema protected property Set to TRUE to strict check all configuration saved. 4
TestSetupTrait::$tempFilesDirectory protected property The temporary file directory for the test environment.
TestSetupTrait::$testId protected property The test run ID.
TestSetupTrait::changeDatabasePrefix protected function Changes the database connection to the prefixed one.
TestSetupTrait::getConfigSchemaExclusions protected function Gets the config schema exclusions for this test.
TestSetupTrait::getDatabaseConnection Deprecated public static function Returns the database connection to the site under test.
TestSetupTrait::prepareDatabasePrefix protected function Generates a database prefix for running tests. 1
UiHelperTrait::$loggedInUser protected property The current user logged in using the Mink controlled browser.
UiHelperTrait::$maximumMetaRefreshCount protected property The number of meta refresh redirects to follow, or NULL if unlimited.
UiHelperTrait::$metaRefreshCount protected property The number of meta refresh redirects followed during ::drupalGet().
UiHelperTrait::$useOneTimeLoginLinks protected property Use one-time login links instead of submitting the login form. 3
UiHelperTrait::buildUrl protected function Builds an absolute URL from a system path or a URL object.
UiHelperTrait::checkForMetaRefresh protected function Checks for meta refresh tag and if found call drupalGet() recursively.
UiHelperTrait::click protected function Clicks the element with the given CSS selector.
UiHelperTrait::clickLink protected function Follows a link by complete name.
UiHelperTrait::cssSelect protected function Searches elements using a CSS selector in the raw content.
UiHelperTrait::cssSelectToXpath protected function Translates a CSS expression to its XPath equivalent.
UiHelperTrait::drupalGet protected function Retrieves a Drupal path or an absolute path. 3
UiHelperTrait::drupalLogin protected function Logs in a user using the Mink controlled browser.
UiHelperTrait::drupalLogout protected function Logs a user out of the Mink controlled browser and confirms.
UiHelperTrait::drupalResetSession protected function Resets the current active session back to Anonymous session.
UiHelperTrait::drupalUserIsLoggedIn protected function Returns whether a given user account is logged in.
UiHelperTrait::getAbsoluteUrl protected function Takes a path and returns an absolute path.
UiHelperTrait::getTextContent protected function Retrieves the plain-text content from the current page.
UiHelperTrait::getUrl protected function Get the current URL from the browser.
UiHelperTrait::isTestUsingGuzzleClient protected function Determines if test is using DrupalTestBrowser.
UiHelperTrait::prepareRequest protected function Prepare for a request to testing site. 1
UiHelperTrait::submitForm protected function Fills and submits a form.
UserCreationTrait::checkPermissions protected function Checks whether a given list of permission names is valid.
UserCreationTrait::createAdminRole protected function Creates an administrative role.
UserCreationTrait::createRole protected function Creates a role with specified permissions. Aliased as: drupalCreateRole
UserCreationTrait::createUser protected function Create a user with a given set of permissions. Aliased as: drupalCreateUser
UserCreationTrait::grantPermissions protected function Grant permissions to a user role.
UserCreationTrait::setCurrentUser protected function Switch the current logged in user.
UserCreationTrait::setUpCurrentUser protected function Creates a random user account and sets it as current user.
WebDriverTestBase::$disableCssAnimations protected property Disables CSS animations in tests for more reliable testing.
WebDriverTestBase::$failOnJavascriptConsoleErrors protected property Determines if a test should fail on JavaScript console errors. 2
WebDriverTestBase::$minkDefaultDriverClass protected property Mink class for the default driver to use. Overrides BrowserTestBase::$minkDefaultDriverClass
WebDriverTestBase::assertJsCondition protected function Waits for the given time or until the given JS condition becomes TRUE.
WebDriverTestBase::assertSession public function Returns WebAssert object. Overrides UiHelperTrait::assertSession
WebDriverTestBase::createScreenshot protected function Creates a screenshot.
WebDriverTestBase::failOnJavaScriptErrors protected function Triggers a test failure if a JavaScript error was encountered.
WebDriverTestBase::getDrupalSettings protected function Gets the current Drupal javascript settings and parses into an array. Overrides BrowserTestBase::getDrupalSettings
WebDriverTestBase::getHtmlOutputHeaders protected function Returns headers in HTML output format. Overrides BrowserHtmlDebugTrait::getHtmlOutputHeaders
WebDriverTestBase::getMinkDriverArgs protected function Gets the Mink driver args from an environment variable. Overrides BrowserTestBase::getMinkDriverArgs 1
WebDriverTestBase::initFrontPage protected function Visits the front page when initializing Mink. Overrides BrowserTestBase::initFrontPage
WebDriverTestBase::initMink protected function Initializes Mink sessions. Overrides BrowserTestBase::initMink
WebDriverTestBase::installModulesFromClassProperty protected function Install modules defined by `static::$modules`. Overrides FunctionalTestSetupTrait::installModulesFromClassProperty 1
WebDriverTestBase::tearDown protected function Overrides BrowserTestBase::tearDown 1
XdebugRequestTrait::extractCookiesFromRequest protected function Adds xdebug cookies, from request setup.

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.