You are here

public function MediaTest::testViewMode in Drupal 10

Same name in this branch
  1. 10 core/modules/ckeditor/tests/src/FunctionalJavascript/MediaTest.php \Drupal\Tests\ckeditor\FunctionalJavascript\MediaTest::testViewMode()
  2. 10 core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php \Drupal\Tests\ckeditor5\FunctionalJavascript\MediaTest::testViewMode()

Tests the EditorMediaDialog can set the data-view-mode attribute.

File

core/modules/ckeditor/tests/src/FunctionalJavascript/MediaTest.php, line 1170

Class

MediaTest
@coversDefaultClass \Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalMedia @group ckeditor

Namespace

Drupal\Tests\ckeditor\FunctionalJavascript

Code

public function testViewMode() {
  EntityViewMode::create([
    'id' => 'media.view_mode_1',
    'targetEntityType' => 'media',
    'status' => TRUE,
    'enabled' => TRUE,
    'label' => 'View Mode 1',
  ])
    ->save();
  EntityViewMode::create([
    'id' => 'media.22222',
    'targetEntityType' => 'media',
    'status' => TRUE,
    'enabled' => TRUE,
    'label' => 'View Mode 2 has Numeric ID',
  ])
    ->save();
  EntityViewMode::create([
    'id' => 'media.view_mode_3',
    'targetEntityType' => 'media',
    'status' => TRUE,
    'enabled' => TRUE,
    'label' => 'View Mode 3',
  ])
    ->save();

  // Only enable view mode 1 & 2 for Image.
  EntityViewDisplay::create([
    'id' => 'media.image.view_mode_1',
    'targetEntityType' => 'media',
    'status' => TRUE,
    'bundle' => 'image',
    'mode' => 'view_mode_1',
  ])
    ->save();
  EntityViewDisplay::create([
    'id' => 'media.image.22222',
    'targetEntityType' => 'media',
    'status' => TRUE,
    'bundle' => 'image',
    'mode' => '22222',
  ])
    ->save();
  $filter_format = FilterFormat::load('test_format');
  $filter_format
    ->setFilterConfig('media_embed', [
    'status' => TRUE,
    'settings' => [
      'default_view_mode' => 'view_mode_1',
      'allowed_media_types' => [],
      'allowed_view_modes' => [
        'view_mode_1' => 'view_mode_1',
        '22222' => '22222',
        'view_mode_3' => 'view_mode_3',
      ],
    ],
  ])
    ->save();

  // Test that view mode dependencies are returned from the MediaEmbed
  // filter's ::getDependencies() method.
  $expected_config_dependencies = [
    'core.entity_view_mode.media.view_mode_1',
    'core.entity_view_mode.media.22222',
    'core.entity_view_mode.media.view_mode_3',
  ];
  $dependencies = $filter_format
    ->getDependencies();
  $this
    ->assertArrayHasKey('config', $dependencies);
  $this
    ->assertEqualsCanonicalizing($expected_config_dependencies, $dependencies['config']);

  // Test MediaEmbed's allowed_view_modes option setting enables a view mode
  // selection field.
  $page = $this
    ->getSession()
    ->getPage();
  $assert_session = $this
    ->assertSession();
  $this
    ->drupalGet($this->host
    ->toUrl('edit-form'));
  $this
    ->waitForEditor();
  $this
    ->assignNameToCkeditorIframe();
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', 'drupal-media'));
  $assert_session
    ->elementExists('css', '.cke_widget_drupalmedia[aria-label="Screaming hairy armadillo"]');
  $page
    ->pressButton('Edit media');
  $this
    ->waitForMetadataDialog();
  $assert_session
    ->optionExists('attributes[data-view-mode]', 'view_mode_1');
  $assert_session
    ->optionExists('attributes[data-view-mode]', '22222');
  $assert_session
    ->optionNotExists('attributes[data-view-mode]', 'view_mode_3');
  $assert_session
    ->selectExists('attributes[data-view-mode]')
    ->selectOption('22222');
  $this
    ->submitDialog();
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', 'article.media--view-mode-_2222'));

  // Test that the downcast drupal-media element contains the
  // `data-view-mode` attribute set in the dialog.
  $this
    ->pressEditorButton('source');
  $this
    ->assertNotEmpty($drupal_media = $this
    ->getDrupalMediaFromSource());
  $this
    ->assertSame('22222', $drupal_media
    ->getAttribute('data-view-mode'));

  // Press the source button again to leave source mode.
  $this
    ->pressEditorButton('source');

  // Having entered source mode means we need to reassign an ID to the
  // CKEditor iframe.
  $this
    ->assignNameToCkeditorIframe();
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');

  // Test that setting the allowed_view_modes option to only one option hides
  // the field (it requires more than one option).
  $filter_format
    ->setFilterConfig('media_embed', [
    'status' => TRUE,
    'settings' => [
      'default_view_mode' => 'view_mode_1',
      'allowed_media_types' => [],
      'allowed_view_modes' => [
        'view_mode_1' => 'view_mode_1',
      ],
    ],
  ])
    ->save();

  // Test that the dependencies change when the allowed_view_modes change.
  $dependencies = $filter_format
    ->getDependencies();
  $this
    ->assertArrayHasKey('config', $dependencies);
  $this
    ->assertSame([
    'core.entity_view_mode.media.view_mode_1',
  ], $dependencies['config']);
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', 'drupal-media'));
  $page
    ->pressButton('Edit media');
  $this
    ->waitForMetadataDialog();
  $assert_session
    ->fieldNotExists('attributes[data-view-mode]');
  $page
    ->pressButton('Close');
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');

  // Test that setting allowed_view_modes back to two items restores the
  // field.
  $filter_format
    ->setFilterConfig('media_embed', [
    'status' => TRUE,
    'settings' => [
      'default_view_mode' => 'view_mode_1',
      'allowed_media_types' => [],
      'allowed_view_modes' => [
        'view_mode_1' => 'view_mode_1',
        '22222' => '22222',
      ],
    ],
  ])
    ->save();

  // Test that the dependencies change when the allowed_view_modes change.
  $expected_config_dependencies = [
    'core.entity_view_mode.media.view_mode_1',
    'core.entity_view_mode.media.22222',
  ];
  $dependencies = $filter_format
    ->getDependencies();
  $this
    ->assertArrayHasKey('config', $dependencies);
  $this
    ->assertEqualsCanonicalizing($expected_config_dependencies, $dependencies['config']);

  // Test that setting the view mode back to the default removes the
  // `data-view-mode` attribute.
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', 'drupal-media'));
  $page
    ->pressButton('Edit media');
  $this
    ->waitForMetadataDialog();
  $assert_session
    ->optionExists('attributes[data-view-mode]', 'view_mode_1');
  $assert_session
    ->optionExists('attributes[data-view-mode]', '22222');
  $assert_session
    ->selectExists('attributes[data-view-mode]')
    ->selectOption('view_mode_1');
  $this
    ->submitDialog();
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', 'article.media--view-mode-view-mode-1'));
  $this
    ->pressEditorButton('source');
  $this
    ->assertNotEmpty($drupal_media = $this
    ->getDrupalMediaFromSource());
  $this
    ->assertFalse($drupal_media
    ->hasAttribute('data-view-mode'));

  // Test that changing the view mode with an empty editable caption
  // preserves the empty editable caption when the preview reloads.
  $original_value = $this->host->body->value;
  $this->host->body->value = str_replace('data-caption="baz"', '', $original_value);
  $this->host
    ->save();
  $this
    ->drupalGet($this->host
    ->toUrl('edit-form'));
  $this
    ->waitForEditor();
  $this
    ->assignNameToCkeditorIframe();
  $this
    ->getSession()
    ->switchToIFrame('ckeditor');

  // Wait for preview to load with default view mode.
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', 'article.media--view-mode-view-mode-1'));
}