function ImageTestBase::testAltTextRequired

Tests that alt text is required for images.

@dataProvider providerAltTextRequired

See also

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architectur…

File

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

Class

ImageTestBase

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

Namespace

Code

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');
}