class CKEditor5OffCanvasTest in Drupal 10

Tests for CKEditor5 to ensure correct styling in off-canvas.

@group ckeditor5 @internal

Hierarchy

• class \Drupal\Tests\ckeditor5\FunctionalJavascript\CKEditor5OffCanvasTest extends \Drupal\Tests\ckeditor5\FunctionalJavascript\CKEditor5TestBase

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5OffCanvasTest.php, line 11

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript

class CKEditor5OffCanvasTest extends CKEditor5TestBase {

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

  /**
   * Tests if CKEditor is properly styled inside an off-canvas dialog.
   */
  public function testOffCanvasStyles() {
    $assert_session = $this
      ->assertSession();
    $page = $this
      ->getSession()
      ->getPage();
    $this
      ->addNewTextFormat($page, $assert_session);
    $this
      ->drupalGet('/ckeditor5_test/off_canvas');

    // The "Add Node" link triggers an off-canvas dialog with an add node form
    // that includes CKEditor.
    $page
      ->clickLink('Add Node');
    $assert_session
      ->waitForElementVisible('css', '#drupal-off-canvas');
    $assert_session
      ->assertWaitOnAjaxRequest();
    $styles = $assert_session
      ->elementExists('css', 'style#ckeditor5-off-canvas-reset');
    $this
      ->stringContains('#drupal-off-canvas [data-drupal-ck-style-fence]', $styles
      ->getText());
    $assert_session
      ->elementExists('css', '.ck');
    $ckeditor_toolbar_bg_color = $this
      ->getSession()
      ->evaluateScript('window.getComputedStyle(document.querySelector(\'.ck.ck-toolbar\')).backgroundColor');
    $this
      ->assertEquals('rgb(250, 250, 250)', $ckeditor_toolbar_bg_color, 'Toolbar background-color should be unaffected by off-canvas');

    // Editable area should be visible.
    $assert_session
      ->elementExists('css', '.ck .ck-content');
    $ckeditor_editable_bg_color = $this
      ->getSession()
      ->evaluateScript('window.getComputedStyle(document.querySelector(\'.ck.ck-content\')).backgroundColor');
    $this
      ->assertEquals('rgb(255, 255, 255)', $ckeditor_editable_bg_color, 'Content background-color should be unaffected by off-canvas');
  }

}