public function ImageTest::testAltTextRequired in Drupal 10

Tests that alt text is required for images.

@dataProvider providerAltTextRequired

See also

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture...

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTest.php, line 406

Class

ImageTest

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

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript

Code

public function testAltTextRequired(bool $unrestricted) {

  // 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 = '<img data-entity-type="file" data-entity-uuid="' . $this->file
    ->uuid() . '" src="' . $this->file
    ->createFileUrl() . '" width="500" />';
  $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
    ->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));
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '.ck-widget.image'));
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '.ck-balloon-panel'));
  $this
    ->assertVisibleBalloon('.ck-text-alternative-form');
}