function CKEditor5ToolbarTest::test

Ensures that CKEditor 5 toolbar renders below Drupal Toolbar.

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5ToolbarTest.php, line 86

Class

CKEditor5ToolbarTest

Tests for CKEditor 5 editor UI with Toolbar module.

Namespace

Code

public function test() : void {
  $assert_session = $this->assertSession();
  // Create test content to ensure that CKEditor 5 text editor can be
  // scrolled.
  $body = '';
  for ($i = 0; $i < 10; $i++) {
    $body .= '<p>' . $this->randomMachineName(32) . '</p>';
  }
  $edit_url = $this->drupalCreateNode([
    'type' => 'article',
    'body' => [
      'value' => $body,
      'format' => 'test_format',
    ],
  ])
    ->toUrl('edit-form');
  $this->drupalGet($edit_url);
  $this->assertNotEmpty($assert_session->waitForElement('css', '#toolbar-bar'));
  $this->assertNotEmpty($assert_session->waitForElement('css', '.ck-editor'));
  // Ensure the body has enough height to enable scrolling. Scroll 110px from
  // top of body field to ensure CKEditor 5 toolbar is sticky.
  $this->getSession()
    ->evaluateScript('document.body.style.height = "10000px";');
  $this->getSession()
    ->evaluateScript('location.hash = "#edit-body-0-value";');
  $this->getSession()
    ->evaluateScript('scroll(0, document.documentElement.scrollTop + 110);');
  // Focus CKEditor 5 text editor.
  $javascript = <<<JS
      Drupal.CKEditor5Instances.get(document.getElementById("edit-body-0-value").dataset["ckeditor5Id"]).editing.view.focus();
JS;
  $this->getSession()
    ->evaluateScript($javascript);
  $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-sticky-panel__placeholder'));
  $toolbar_height = (int) $this->getSession()
    ->evaluateScript('document.getElementById("toolbar-bar").offsetHeight');
  $ckeditor5_toolbar_position = (int) $this->getSession()
    ->evaluateScript("document.querySelector('.ck-toolbar').getBoundingClientRect().top");
  $this->assertEqualsWithDelta($toolbar_height, $ckeditor5_toolbar_position, 2);
}