AjaxCssTest.php 3.26 KB
Newer Older
1 2 3 4 5 6
<?php

namespace Drupal\Tests\ckeditor\FunctionalJavascript;

use Drupal\editor\Entity\Editor;
use Drupal\filter\Entity\FilterFormat;
7
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
8 9 10 11 12 13

/**
 * Tests delivery of CSS to CKEditor via AJAX.
 *
 * @group ckeditor
 */
14
class AjaxCssTest extends WebDriverTestBase {
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

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

  /**
   * {@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();
47 48 49 50
    $page = $session->getPage();

    $this->waitOnCkeditorInstance('edit-iframe-value');
    $this->waitOnCkeditorInstance('edit-inline');
51 52 53 54 55

    $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.
56 57
    $page->pressButton('Add CSS to inline CKEditor instance');

58
    $result = $page->waitFor(10, function () use ($style_color) {
59 60 61 62
      return ($this->getEditorStyle('edit-inline', 'color') == $style_color)
        && ($this->getEditorStyle('edit-iframe-value', 'color') != $style_color);
    });
    $this->assertTrue($result);
63 64 65

    $session->reload();

66 67 68
    $this->waitOnCkeditorInstance('edit-iframe-value');
    $this->waitOnCkeditorInstance('edit-inline');

69 70
    // Add the iframe CSS and assert that the style is applied to the iframe,
    // but not the main body.
71 72
    $page->pressButton('Add CSS to iframe CKEditor instance');

73
    $result = $page->waitFor(10, function () use ($style_color) {
74 75 76 77 78
      return ($this->getEditorStyle('edit-inline', 'color') != $style_color)
        && ($this->getEditorStyle('edit-iframe-value', 'color') == $style_color);
    });

    $this->assertTrue($result);
79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
  }

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

101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
  /**
   * 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["$instance_id"] !== 'undefined'
          && CKEDITOR.instances["$instance_id"].instanceReady
        );
      }());
JS;

    $this->getSession()->wait($timeout, $condition);
  }

123
}