function StyleTest::testStyleSettingsForm

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

File

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

Class

StyleTest

@coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Style[[api-linebreak]] @group ckeditor5 @internal

Namespace

Code

public function testStyleSettingsForm() : void {
  $this->drupalLogin($this->drupalCreateUser([
    'administer filters',
  ]));
  $page = $this->getSession()
    ->getPage();
  $assert_session = $this->assertSession();
  $this->createNewTextFormat($page, $assert_session);
  // 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.")');
}