function ImageTestBase::testAltTextRequired

Same name and namespace in other branches
  1. 9 core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTestBase.php \Drupal\Tests\ckeditor5\FunctionalJavascript\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[[api-linebreak]] @group ckeditor5 @internal

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript

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

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