editor_advanced_image-8.x-2.x-dev/tests/src/FunctionalJavascript/CKEditor5EditorAdvancedImageEditorFormatTest.php

<?php

namespace Drupal\Tests\editor_advanced_image\FunctionalJavascript;

use Drupal\editor\Entity\Editor;
use Drupal\editor_advanced_image\Plugin\CKEditor5Plugin\EditorAdvancedImage;
use Drupal\filter\Entity\FilterFormat;
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
use Drupal\Tests\ckeditor5\Traits\CKEditor5TestTrait;
use Drupal\Tests\editor_advanced_image\Traits\CKEditor5InteractionTestTrait;

/**
 * Ensure the CKE5 editor_advanced_image editor formats forms.
 *
 * @group editor_advanced_image
 * @group editor_advanced_image_functional
 * @group editor_advanced_image_ckeditor5
 *
 * @requires module ckeditor5
 */
class CKEditor5EditorAdvancedImageEditorFormatTest extends WebDriverTestBase {
  use CKEditor5TestTrait;
  use CKEditor5InteractionTestTrait;

  /**
   * {@inheritdoc}
   */
  protected static $modules = [
    'ckeditor5',
    'editor_advanced_image',
  ];

  /**
   * {@inheritdoc}
   */
  protected $allowedElements = '<br> <p> <strong> <em> <a href>';

  /**
   * The user to use during testing.
   *
   * @var \Drupal\user\UserInterface
   */
  protected $adminUser;

  /**
   * {@inheritdoc}
   */
  protected $defaultTheme = 'starterkit_theme';

  /**
   * {@inheritdoc}
   */
  protected function setUp(): void {
    parent::setUp();

    // Create an CK5 editor without the image upload enabled.
    FilterFormat::create([
      'format' => 'editor_without_image_upload',
      'name' => 'Test format without image upload',
      'filters' => [
        'filter_html' => [
          'status' => TRUE,
          'settings' => [
            'allowed_html' => '<p> <br> <strong> <em> <a href>',
          ],
        ],
      ],
    ])->save();
    Editor::create([
      'editor' => 'ckeditor5',
      'format' => 'editor_without_image_upload',
      'settings' => [
        'toolbar' => [
          'items' => [
            'link',
            'bold',
            'italic',
            'sourceEditing',
          ],
        ],
        'plugins' => [
          'ckeditor5_sourceEditing' => [
            'allowed_tags' => [],
          ],
        ],
      ],
      'image_upload' => [
        'status' => FALSE,
      ],
    ])->save();

    // Create an CK5 editor with the image upload enabled.
    FilterFormat::create([
      'format' => 'editor_with_image_upload',
      'name' => 'Test format with image upload',
      'filters' => [
        'filter_html' => [
          'status' => TRUE,
          'settings' => [
            'allowed_html' => '<p> <br> <strong> <em> <a href>',
          ],
        ],
      ],
    ])->save();

    Editor::create([
      'editor' => 'ckeditor5',
      'format' => 'editor_with_image_upload',
      'settings' => [
        'toolbar' => [
          'items' => [
            'link',
            'bold',
            'italic',
            'drupalInsertImage',
          ],
        ],
        'plugins' => [
          'editor_advanced_image_image' => EditorAdvancedImage::DEFAULT_CONFIGURATION,
        ],
      ],
      'image_upload' => [
        'status' => TRUE,
        'scheme' => 'public',
        'directory' => 'inline-images',
        'max_size' => '',
        'max_dimensions' => [
          'width' => 0,
          'height' => 0,
        ],
      ],
    ])->save();

    $this->adminUser = $this->drupalCreateUser([
      'administer filters',
    ]);
    $this->drupalLogin($this->adminUser);
  }

  /**
   * Tests that when the plugin CKE5 forms is visible on filter admin UI.
   */
  public function testImageEditorSettingsForm(): void {
    $assert_session = $this->assertSession();

    $this->drupalGet('admin/config/content/formats/manage/editor_with_image_upload');

    // The editor advanced image plugin settings forms should be present.
    $assert_session->elementExists('css', '[data-drupal-selector="edit-editor-settings-plugins-editor-advanced-image-image"]');

    // Removing the drupalImageInsert button from the toolbar must remove the
    // plugin settings forms too.
    $this->triggerKeyUp('.ckeditor5-toolbar-item-drupalInsertImage', 'ArrowUp');
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->elementNotExists('css', '[data-drupal-selector="edit-editor-settings-plugins-editor-advanced-image-image"]');

    // Re-adding the drupalImageInsert button to the toolbar must re-add the
    // plugin settings forms too.
    $this->triggerKeyUp('.ckeditor5-toolbar-item-drupalInsertImage', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->elementExists('css', '[data-drupal-selector="edit-editor-settings-plugins-editor-advanced-image-image"]');
  }

  /**
   * Ensure when image uploads is enabled, default config of EAI is applied.
   *
   * Tests that when image uploads is enabled, then the class attribute of
   * Editor Advanced Image is enabled by default.
   */
  public function testImageEditorSettingsAllowedTags(): void {
    $assert_session = $this->assertSession();

    $this->drupalGet('admin/config/content/formats/manage/editor_without_image_upload');
    $page = $this->getSession()->getPage();

    $allowed_html_field = $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');
    $this->assertSame('<p> <br> <strong> <em> <a href>', $allowed_html_field->getValue());

    // Enable the image toolbar item.
    // Enabling image uploads adds <img> with several attributes allowed.
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-drupalInsertImage'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-drupalInsertImage', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();

    // The image upload settings form should now be present.
    $assert_session->elementExists('css', '[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-image"]');

    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-active .ckeditor5-toolbar-item-drupalInsertImage'));

    // The image insert plugin is enabled and inserting <img> is allowed.
    $this->assertEquals($this->allowedElements . ' <img src alt height width class>', $allowed_html_field->getValue());

    $page->clickLink('Image');
    $assert_session->waitForText('Enable image uploads');

    $this->assertTrue($page->hasUncheckedField('editor[settings][plugins][ckeditor5_image][status]'));
    $page->checkField('editor[settings][plugins][ckeditor5_image][status]');
    $assert_session->assertWaitOnAjaxRequest();
    $allowed_html_field = $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');

    // Assert that image uploads are enabled initially.
    $this->assertTrue($page->hasCheckedField('Enable image uploads'));

    // Assert that Editor Advanced Image attribute "class" is enabled by
    // default.
    $this->assertTrue($page->hasCheckedField('CSS classes (class)'));
    $this->assertFalse($page->hasCheckedField('Title (title)'));
    $this->assertFalse($page->hasCheckedField('ID (id)'));

    // The image insert plugin is enabled and inserting <img> is allowed.
    $this->assertSame('<br> <p> <strong> <em> <a href> <img src alt height width data-entity-uuid data-entity-type class>', $allowed_html_field->getValue());
  }

  /**
   * Ensure the plugin CKE5 forms is properly stored in database.
   */
  public function testImageEditorSettingsSave(): void {
    $assert_session = $this->assertSession();

    $this->drupalGet('admin/config/content/formats/manage/editor_with_image_upload');
    $page = $this->getSession()->getPage();

    // Assert that image uploads are enabled initially.
    $this->assertTrue($page->hasCheckedField('Enable image uploads'));

    // Assert that Editor Advanced Image attribute "class" is enabled by
    // default.
    $this->assertFalse($page->hasCheckedField('Disable Balloon'));
    $this->assertTrue($page->hasCheckedField('CSS classes (class)'));
    $this->assertFalse($page->hasCheckedField('Title (title)'));
    $this->assertFalse($page->hasCheckedField('ID (id)'));

    // Click Editor Advanced Image vertical tab to make it interactable.
    $page->clickLink('Editor Advanced Image');

    // Enable the title attribute of Editor Advanced Image.
    $page->checkField('editor[settings][plugins][editor_advanced_image_image][enabled_attributes][title]');
    $assert_session->assertWaitOnAjaxRequest();
    $this->assertTrue($page->hasCheckedField('Title (title)'));

    // Set a default class.
    $page->fillField('editor[settings][plugins][editor_advanced_image_image][default_class]', 'img-responsive');

    // Save the form.
    $page->pressButton('Save configuration');
    $assert_session->pageTextContains('The text format Test format with image upload has been updated');

    // Flush caches so the updated config can be checked.
    drupal_flush_all_caches();

    // Confirm that the tags required by the newly-added plugins were correctly
    // saved.
    $this->drupalGet('admin/config/content/formats/manage/editor_with_image_upload');
    $assert_session = $this->assertSession();
    $page = $this->getSession()->getPage();

    // And for good measure, confirm the correct tags are in the form field when
    // returning to the form.
    $this->assertFalse($page->hasCheckedField('Disable Balloon'));
    $this->assertTrue($page->hasCheckedField('CSS classes (class)'));
    $this->assertTrue($page->hasCheckedField('Title (title)'));
    $allowed_html_field = $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');
    $this->assertSame('<br> <p> <strong> <em> <a href> <img src alt height width data-entity-uuid data-entity-type title class>', $allowed_html_field->getValue());
    $default_class = $assert_session->fieldExists('editor[settings][plugins][editor_advanced_image_image][default_class]');
    $this->assertSame('img-responsive', $default_class->getValue());
  }

}