function MediaLibraryTest::testAlt

Ensures that alt text can be changed on Media Library inserted Media.

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaLibraryTest.php, line 281

Class

MediaLibraryTest

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

Namespace

Code

public function testAlt() : void {
    $page = $this->getSession()
        ->getPage();
    $assert_session = $this->assertSession();
    $this->drupalGet('/node/add/blog');
    $this->waitForEditor();
    $this->pressEditorButton('Insert Media');
    $this->assertNotEmpty($assert_session->waitForElementVisible('css', '#drupal-modal #media-library-content'));
    $assert_session->elementExists('css', '.js-media-library-item')
        ->click();
    $assert_session->elementExists('css', '.ui-dialog-buttonpane')
        ->pressButton('Insert selected');
    $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-widget.drupal-media img'));
    // Test that clicking the media widget triggers a CKEditor balloon panel
    // with a single button to override the alt text.
    $this->click('.ck-widget.drupal-media');
    $this->assertVisibleBalloon('[aria-label="Drupal Media toolbar"]');
    // Click the "Override media image text alternative" button.
    $this->getBalloonButton('Override media image alternative text')
        ->click();
    $this->assertVisibleBalloon('.ck-media-alternative-text-form');
    // Assert that the value is currently empty.
    $alt_override_input = $page->find('css', '.ck-balloon-panel .ck-media-alternative-text-form input[type=text]');
    $this->assertSame('', $alt_override_input->getValue());
    $test_alt = 'Alt text override';
    $alt_override_input->setValue($test_alt);
    $this->getBalloonButton('Save')
        ->click();
    $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-widget.drupal-media img[alt*="' . $test_alt . '"]'));
    $xpath = new \DOMXPath($this->getEditorDataAsDom());
    $drupal_media = $xpath->query('//drupal-media')[0];
    $this->assertEquals($test_alt, $drupal_media->getAttribute('alt'));
    // Test that the media item can be designated 'decorative'.
    // Click the "Override media image text alternative" button.
    $this->getBalloonButton('Override media image alternative text')
        ->click();
    $page->pressButton('Decorative image');
    $this->getBalloonButton('Save')
        ->click();
    $xpath = new \DOMXPath($this->getEditorDataAsDom());
    $drupal_media = $xpath->query('//drupal-media')[0];
    // The alt text in CKEditor displays alt="""", indicating
    // decorative image (https://www.w3.org/WAI/tutorials/images/decorative/).
    $this->assertEquals('""', $drupal_media->getAttribute('alt'));
}