AjaxCssTest.php in Drupal 8

Namespace

Drupal\Tests\ckeditor\FunctionalJavascript

File

core/modules/ckeditor/tests/src/FunctionalJavascript/AjaxCssTest.php

<?php

namespace Drupal\Tests\ckeditor\FunctionalJavascript;

use Drupal\editor\Entity\Editor;
use Drupal\filter\Entity\FilterFormat;
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;

/**
 * Tests delivery of CSS to CKEditor via AJAX.
 *
 * @group ckeditor
 */
class AjaxCssTest extends WebDriverTestBase {

  /**
   * {@inheritdoc}
   */
  public static $modules = [
    'ckeditor',
    'ckeditor_test',
  ];

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

  /**
   * {@inheritdoc}
   */
  protected function setUp() {
    parent::setUp();
    FilterFormat::create([
      'format' => 'test_format',
      'name' => $this
        ->randomMachineName(),
    ])
      ->save();
    Editor::create([
      'editor' => 'ckeditor',
      'format' => 'test_format',
    ])
      ->save();
    user_role_grant_permissions('anonymous', [
      'use text format test_format',
    ]);
  }

  /**
   * Tests adding style sheets dynamically to CKEditor.
   */
  public function testCkeditorAjaxAddCss() {
    $this
      ->drupalGet('/ckeditor_test/ajax_css');
    $session = $this
      ->getSession();
    $page = $session
      ->getPage();
    $this
      ->waitOnCkeditorInstance('edit-iframe-value');
    $this
      ->waitOnCkeditorInstance('edit-inline');
    $style_color = 'rgb(255, 0, 0)';

    // Add the inline CSS and assert that the style is applied to the main body,
    // but not the iframe.
    $page
      ->pressButton('Add CSS to inline CKEditor instance');
    $result = $page
      ->waitFor(10, function () use ($style_color) {
      return $this
        ->getEditorStyle('edit-inline', 'color') == $style_color && $this
        ->getEditorStyle('edit-iframe-value', 'color') != $style_color;
    });
    $this
      ->assertTrue($result);
    $session
      ->reload();
    $this
      ->waitOnCkeditorInstance('edit-iframe-value');
    $this
      ->waitOnCkeditorInstance('edit-inline');

    // Add the iframe CSS and assert that the style is applied to the iframe,
    // but not the main body.
    $page
      ->pressButton('Add CSS to iframe CKEditor instance');
    $result = $page
      ->waitFor(10, function () use ($style_color) {
      return $this
        ->getEditorStyle('edit-inline', 'color') != $style_color && $this
        ->getEditorStyle('edit-iframe-value', 'color') == $style_color;
    });
    $this
      ->assertTrue($result);
  }

  /**
   * Gets a computed style value for a CKEditor instance.
   *
   * @param string $instance_id
   *   The CKEditor instance ID.
   * @param string $attribute
   *   The style attribute.
   *
   * @return string
   *   The computed style value.
   */
  protected function getEditorStyle($instance_id, $attribute) {
    $js = sprintf('CKEDITOR.instances["%s"].document.getBody().getComputedStyle("%s")', $instance_id, $attribute);
    return $this
      ->getSession()
      ->evaluateScript($js);
  }

  /**
   * Wait for a CKEditor instance to finish loading and initializing.
   *
   * @param string $instance_id
   *   The CKEditor instance ID.
   * @param int $timeout
   *   (optional) Timeout in milliseconds, defaults to 10000.
   */
  protected function waitOnCkeditorInstance($instance_id, $timeout = 10000) {
    $condition = <<<JS
      (function() {
        return (
          typeof CKEDITOR !== 'undefined'
          && typeof CKEDITOR.instances["{<span class="php-variable">$instance_id</span>}"] !== 'undefined'
          && CKEDITOR.instances["{<span class="php-variable">$instance_id</span>}"].instanceReady
        );
      }());
JS;
    $this
      ->getSession()
      ->wait($timeout, $condition);
  }

}

Classes

Name	Description
AjaxCssTest	Tests delivery of CSS to CKEditor via AJAX.