function CKEditor5MarkupTest::testStylesAndScripts

Same name and namespace in other branches
  1. 11.x core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5MarkupTest.php \Drupal\Tests\ckeditor5\FunctionalJavascript\CKEditor5MarkupTest::testStylesAndScripts()

Ensures that HTML scripts and styles are properly preserved in CKEditor 5.

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5MarkupTest.php, line 201

Class

CKEditor5MarkupTest
Tests for CKEditor 5.

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript

Code

public function testStylesAndScripts() : void {
  $test_cases = [
    // Test cases taken from the HTML documentation.
    // @see https://html.spec.whatwg.org/multipage/scripting.html#restrictions-for-contents-of-script-elements
'script' => [
      '<script>(function() { let x = 10, y = 5; if( y <--x ) { console.log("run me!"); }})()</script>',
      '<script>(function() { let x = 10, y = 5; if( y <--x ) { console.log("run me!"); }})()</script>',
    ],
    'script like tag' => [
      '<script>(function() { let player = 5, script = 10; if (player<script) { console.log("run me!"); }})()</script>',
      '<script>(function() { let player = 5, script = 10; if (player<script) { console.log("run me!"); }})()</script>',
    ],
    'script to escape' => [
      "<script>const example = 'Consider this string: <!-- <script>';</script>",
      "<script>const example = 'Consider this string: <!-- <script>';</script>",
    ],
    'unescaped script tag' => [
      <<<HTML
      <script>
        const example = 'Consider this string: <!-- <script>';
        console.log(example);
      </script>
      <!-- despite appearances, this is actually part of the script still! -->
      <script>
        let a = 1 + 2; // this is the same script block still...
      </script>
      HTML,
      <<<HTML
      <script>
        const example = 'Consider this string: <!-- <script>';
        console.log(example);
      </script>
      <!-- despite appearances, this is actually part of the script still! -->
      <script>
        let a = 1 + 2; // this is the same script block still...
      </script>
      HTML,
    ],
    'style' => [
      <<<HTML
      <style>
      a > span {
        /* Important comment. */
        color: red !important;
      }
      </style>
      HTML,
      <<<HTML
      <style>
      a > span {
        /* Important comment. */
        color: red !important;
      }
      </style>
      HTML,
    ],
    'script and style' => [
      <<<HTML
      <script type="text/javascript">
      let x = 10;
      let y = 5;
      if(y < x){
      console.log('is smaller')
      }
      </script>
      <style type="text/css">
      :root {
        --main-bg-color: brown;
      }
      .sections > .section {
        background: var(--main-bg-color);
      }
      </style>
      HTML,
      <<<HTML
      <script type="text/javascript">
      let x = 10;
      let y = 5;
      if(y < x){
      console.log('is smaller')
      }
      </script><style type="text/css">
      :root {
        --main-bg-color: brown;
      }
      .sections > .section {
        background: var(--main-bg-color);
      }
      </style>
      HTML,
    ],
  ];
  $page = $this->getSession()
    ->getPage();
  $assert_session = $this->assertSession();
  // Create filter.
  FilterFormat::create([
    'format' => 'ckeditor5',
    'name' => 'CKEditor 5 HTML',
    'roles' => [
      RoleInterface::AUTHENTICATED_ID,
    ],
  ])->save();
  Editor::create([
    'format' => 'ckeditor5',
    'editor' => 'ckeditor5',
    'image_upload' => [
      'status' => FALSE,
    ],
    'settings' => [
      'toolbar' => [
        'items' => [
          'sourceEditing',
        ],
      ],
      'plugins' => [
        'ckeditor5_sourceEditing' => [
          'allowed_tags' => [],
        ],
      ],
    ],
  ])->save();
  $this->assertSame([], array_map(function (ConstraintViolation $v) {
    return (string) $v->getMessage();
  }, iterator_to_array(CKEditor5::validatePair(Editor::load('ckeditor5'), FilterFormat::load('ckeditor5')))));
  // Add a node with text rendered via the CKEditor 5 HTML format.
  foreach ($test_cases as $test_case_name => $test_case) {
    [$markup, $expected_content] = $test_case;
    $this->drupalGet('node/add');
    $page->fillField('title[0][value]', "Style and script test - {$test_case_name}");
    $this->waitForEditor();
    $this->pressEditorButton('Source');
    $editor = $page->find('css', '.ck-source-editing-area textarea');
    $editor->setValue($markup);
    $page->pressButton('Save');
    $assert_session->responseContains($expected_content);
  }
}

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.