function ImageTestBase::testAlignment

Tests alignment integration.

@dataProvider providerAlignment

File

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

Class

ImageTestBase

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

Namespace

Code

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