function CKEditor5ToolbarTest::test

Ensures that CKEditor 5 toolbar renders below Drupal Toolbar.

File

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

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);
}