function CKEditorIntegrationTest::testAlignment

Tests alignment integration.

Tests that alignment is reflected onto the CKEditor Widget wrapper, that the EditorMediaDialog allows altering the alignment and that the changes are reflected on the widget and downcast drupal-media tag.

File

core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php, line 1093

Class

CKEditorIntegrationTest

@coversDefaultClass \Drupal\media\Plugin\CKEditorPlugin\DrupalMedia @group media

Namespace

Code

public function testAlignment() {
    $assert_session = $this->assertSession();
    $this->drupalGet($this->host
        ->toUrl('edit-form'));
    $this->waitForEditor();
    $this->assignNameToCkeditorIframe();
    $this->getSession()
        ->switchToIFrame('ckeditor');
    // Wait for preview to load.
    $this->assertNotEmpty($img = $assert_session->waitForElement('css', 'drupal-media img'));
    // Assert the drupal-media element starts without a data-align attribute.
    $drupal_media = $assert_session->elementExists('css', 'drupal-media');
    $this->assertFalse($drupal_media->hasAttribute('data-align'));
    // Assert that setting the data-align property in the dialog adds the
    // `align-right', `align-left` or `align-center' class on the widget,
    // caption figure and drupal-media element.
    $alignments = [
        'right',
        'left',
        'center',
    ];
    foreach ($alignments as $alignment) {
        $this->fillFieldInMetadataDialogAndSubmit('attributes[data-align]', $alignment);
        // Wait for preview to load.
        $this->assertNotEmpty($img = $assert_session->waitForElement('css', 'drupal-media img'));
        // Now verify the result. Assert the first element within the
        // <drupal-media> element has the alignment class.
        $selector = sprintf('drupal-media[data-align="%s"] .caption-drupal-media.align-%s', $alignment, $alignment);
        $this->assertNotEmpty($assert_session->waitForElementVisible('css', $selector, 2000));
        // Assert that the resultant downcast drupal-media element has the proper
        // `data-align` attribute.
        $this->pressEditorButton('source');
        $this->assertSourceAttributeSame('data-align', $alignment);
        $this->leaveSourceMode();
    }
    // Test that setting the "Align" field to "none" in the dialog will
    // remove the attribute from the drupal-media element in the CKEditor.
    $this->fillFieldInMetadataDialogAndSubmit('attributes[data-align]', 'none');
    // Assert the drupal-media element no longer has data-align attribute.
    $this->assertNotEmpty($assert_session->waitForElementVisible('css', 'drupal-media .caption-drupal-media:not(.align-center)', 2000));
    $drupal_media = $assert_session->elementExists('css', 'drupal-media');
    $this->assertFalse($drupal_media->hasAttribute('data-align'));
    // Assert that the resultant downcast <drupal-media> tag has no data-align
    // attribute.
    $this->pressEditorButton('source');
    $this->assertNotEmpty($drupal_media = $this->getDrupalMediaFromSource());
    $this->assertFalse($drupal_media->hasAttribute('data-align'));
}