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