public function StyleTest::testStyleSettingsForm in Drupal 10

@covers \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Style::buildConfigurationForm

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/StyleTest.php, line 25

Class

StyleTest

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

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript

Code

public function testStyleSettingsForm() {
  $this
    ->drupalLogin($this
    ->drupalCreateUser([
    'administer filters',
  ]));
  $page = $this
    ->getSession()
    ->getPage();
  $assert_session = $this
    ->assertSession();
  $this
    ->createNewTextFormat($page, $assert_session);
  $assert_session
    ->assertWaitOnAjaxRequest();

  // The Style plugin settings form should not be present.
  $assert_session
    ->elementNotExists('css', '[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style"]');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElement('css', '.ckeditor5-toolbar-item-style'));
  $this
    ->triggerKeyUp('.ckeditor5-toolbar-item-style', 'ArrowDown');
  $assert_session
    ->assertWaitOnAjaxRequest();

  // No validation error upon enabling the Style plugin.
  $this
    ->assertNoRealtimeValidationErrors();
  $assert_session
    ->pageTextContains('No styles configured');

  // Still no validation error when configuring other functionality first.
  $this
    ->triggerKeyUp('.ckeditor5-toolbar-item-undo', 'ArrowDown');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertNoRealtimeValidationErrors();

  // The Style plugin settings form should now be present and should have no
  // styles configured.
  $page
    ->clickLink('Style');
  $this
    ->assertNotNull($assert_session
    ->waitForElementVisible('css', '[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style-styles"]'));
  $javascript = <<<JS
      const allowedTags = document.querySelector('[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style-styles"]');
      allowedTags.value = 'p.foo.bar  | Foobar paragraph';
      allowedTags.dispatchEvent(new Event('input'));
JS;
  $this
    ->getSession()
    ->executeScript($javascript);

  // Immediately save the configuration. Intentionally do nothing that would
  // trigger an AJAX rebuild.
  $page
    ->pressButton('Save configuration');
  $assert_session
    ->pageTextContains('Added text format');

  // Verify that the configuration was saved.
  $this
    ->drupalGet('admin/config/content/formats/manage/ckeditor5');
  $page
    ->clickLink('Style');
  $this
    ->assertNotNull($styles_textarea = $assert_session
    ->waitForElementVisible('css', '[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style-styles"]'));
  $this
    ->assertSame("p.foo.bar|Foobar paragraph\n", $styles_textarea
    ->getValue());
  $assert_session
    ->pageTextContains('One style configured');
  $allowed_html_field = $assert_session
    ->fieldExists('filters[filter_html][settings][allowed_html]');
  $this
    ->assertStringContainsString('<p class="foo bar">', $allowed_html_field
    ->getValue());

  // Attempt to use an unsupported HTML5 tag.
  $javascript = <<<JS
      const allowedTags = document.querySelector('[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style-styles"]');
      allowedTags.value = 's.redacted|Redacted';
      allowedTags.dispatchEvent(new Event('change'));
JS;
  $this
    ->getSession()
    ->executeScript($javascript);

  // The CKEditor 5 module should refuse to specify styles on tags that cannot
  // (yet) be created.
  // @see \Drupal\ckeditor5\Plugin\Validation\Constraint\FundamentalCompatibilityConstraintValidator::checkAllHtmlTagsAreCreatable()
  $assert_session
    ->waitForElement('css', '[role=alert][data-drupal-message-type="error"]:contains("The Style plugin needs another plugin to create <s>, for it to be able to create the following attributes: <s class="redacted">. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.")');

  // The entire vertical tab for "Style" settings should be marked up as the
  // cause of the error, which means the "Styles" text area in there is marked
  // too.
  $assert_session
    ->elementExists('css', '.vertical-tabs__pane[data-ckeditor5-plugin-id="ckeditor5_style"][aria-invalid="true"]');
  $assert_session
    ->elementExists('css', '.vertical-tabs__pane[data-ckeditor5-plugin-id="ckeditor5_style"] textarea[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style-styles"][aria-invalid="true"]');

  // Attempt to save anyway: the warning should become an error.
  $page
    ->pressButton('Save configuration');
  $assert_session
    ->pageTextNotContains('Added text format');
  $assert_session
    ->elementExists('css', '[aria-label="Error message"]:contains("The Style plugin needs another plugin to create <s>, for it to be able to create the following attributes: <s class="redacted">. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.")');

  // Now, attempt to use a supported non-HTML5 tag.
  // @see \Drupal\ckeditor5\Plugin\Validation\Constraint\StyleSensibleElementConstraintValidator
  $javascript = <<<JS
      const allowedTags = document.querySelector('[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style-styles"]');
      allowedTags.value = 'drupal-media.sensational|Sensational media';
      allowedTags.dispatchEvent(new Event('change'));
JS;
  $this
    ->getSession()
    ->executeScript($javascript);

  // The CKEditor 5 module should refuse to allow styles on non-HTML5 tags.
  $assert_session
    ->waitForElement('css', '[role=alert][data-drupal-message-type="error"]:contains("A style can only be specified for an HTML 5 tag. <drupal-media> is not an HTML5 tag.")');

  // The vertical tab for "Style" settings should not be marked up as the cause
  // of the error, but only the "Styles" text area in the vertical tab.
  $assert_session
    ->elementNotExists('css', '.vertical-tabs__pane[data-ckeditor5-plugin-id="ckeditor5_style"][aria-invalid="true"]');
  $assert_session
    ->elementExists('css', '.vertical-tabs__pane[data-ckeditor5-plugin-id="ckeditor5_style"] textarea[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style-styles"][aria-invalid="true"]');

  // Test configuration overlaps across plugins.
  $this
    ->drupalGet('admin/config/content/formats/manage/ckeditor5');
  $this
    ->assertNotEmpty($assert_session
    ->elementExists('css', '.ckeditor5-toolbar-item-sourceEditing'));
  $this
    ->triggerKeyUp('.ckeditor5-toolbar-item-sourceEditing', 'ArrowDown');
  $assert_session
    ->assertWaitOnAjaxRequest();

  // The Source Editing plugin settings form should now be present and should
  // have no allowed tags configured.
  $page
    ->clickLink('Source editing');
  $this
    ->assertNotNull($assert_session
    ->waitForElementVisible('css', '[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-sourceediting-allowed-tags"]'));

  // Make `<aside class>` creatable.
  $javascript = <<<JS
      const allowedTags = document.querySelector('[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-sourceediting-allowed-tags"]');
      allowedTags.value = '<aside class>';
      allowedTags.dispatchEvent(new Event('change'));
JS;
  $this
    ->getSession()
    ->executeScript($javascript);
  $assert_session
    ->assertWaitOnAjaxRequest();

  // Create a style with `aside` and a class name.
  $javascript = <<<JS
      const allowedTags = document.querySelector('[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-style-styles"]');
      allowedTags.value = 'aside.error|Aside';
      allowedTags.dispatchEvent(new Event('change'));
JS;
  $this
    ->getSession()
    ->executeScript($javascript);
  $assert_session
    ->assertWaitOnAjaxRequest();

  // The CKEditor 5 module should refuse to create configuration overlaps
  // across plugins.
  // @see \Drupal\ckeditor5\Plugin\Validation\Constraint\StyleSensibleElementConstraintValidator::findStyleConflictingPluginLabel()
  $assert_session
    ->waitForElement('css', '[role=alert][data-drupal-message-type="error"]:contains("A style must only specify classes not supported by other plugins.")');
}