CKEditorIntegrationTest.php 8.27 KB
Newer Older
1
2
3
4
5
6
7
8
9
<?php

namespace Drupal\Tests\ckeditor\FunctionalJavascript;

use Drupal\Core\Entity\Entity\EntityFormDisplay;
use Drupal\editor\Entity\Editor;
use Drupal\field\Entity\FieldConfig;
use Drupal\field\Entity\FieldStorageConfig;
use Drupal\filter\Entity\FilterFormat;
10
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
11
use Drupal\node\Entity\NodeType;
catch's avatar
catch committed
12
use Drupal\Tests\ckeditor\Traits\CKEditorTestTrait;
13
14
15
16
17
18

/**
 * Tests the integration of CKEditor.
 *
 * @group ckeditor
 */
19
class CKEditorIntegrationTest extends WebDriverTestBase {
20

catch's avatar
catch committed
21
22
  use CKEditorTestTrait;

23
24
25
26
27
  /**
   * {@inheritdoc}
   */
  protected $defaultTheme = 'stark';

28
29
30
31
32
33
34
  /**
   * The account.
   *
   * @var \Drupal\user\UserInterface
   */
  protected $account;

35
36
37
38
39
40
41
  /**
   * The FilterFormat config entity used for testing.
   *
   * @var \Drupal\filter\FilterFormatInterface
   */
  protected $filterFormat;

42
43
44
  /**
   * {@inheritdoc}
   */
45
  protected static $modules = ['node', 'ckeditor', 'filter', 'ckeditor_test'];
46
47
48
49

  /**
   * {@inheritdoc}
   */
50
  protected function setUp(): void {
51
52
53
    parent::setUp();

    // Create a text format and associate CKEditor.
54
    $this->filterFormat = FilterFormat::create([
55
56
57
58
      'format' => 'filtered_html',
      'name' => 'Filtered HTML',
      'weight' => 0,
    ]);
59
    $this->filterFormat->save();
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

    Editor::create([
      'format' => 'filtered_html',
      'editor' => 'ckeditor',
    ])->save();

    // Create a node type for testing.
    NodeType::create(['type' => 'page', 'name' => 'page'])->save();

    $field_storage = FieldStorageConfig::loadByName('node', 'body');

    // Create a body field instance for the 'page' node type.
    FieldConfig::create([
      'field_storage' => $field_storage,
      'bundle' => 'page',
      'label' => 'Body',
      'settings' => ['display_summary' => TRUE],
      'required' => TRUE,
    ])->save();

    // Assign widget settings for the 'default' form mode.
    EntityFormDisplay::create([
      'targetEntityType' => 'node',
      'bundle' => 'page',
      'mode' => 'default',
      'status' => TRUE,
    ])->setComponent('body', ['type' => 'text_textarea_with_summary'])
      ->save();

    $this->account = $this->drupalCreateUser([
      'administer nodes',
      'create page content',
      'use text format filtered_html',
    ]);
    $this->drupalLogin($this->account);
  }

  /**
   * Tests if the fragment link to a textarea works with CKEditor enabled.
   */
  public function testFragmentLink() {
    $session = $this->getSession();
    $web_assert = $this->assertSession();
    $ckeditor_id = '#cke_edit-body-0-value';

    $this->drupalGet('node/add/page');

    $session->getPage();

    // Add a bottom margin to the title field to be sure the body field is not
110
111
    // visible.
    $session->executeScript("document.getElementById('edit-title-0-value').style.marginBottom = window.innerHeight*2 +'px';");
112

113
    $this->assertSession()->waitForElementVisible('css', $ckeditor_id);
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
    // Check that the CKEditor-enabled body field is currently not visible in
    // the viewport.
    $web_assert->assertNotVisibleInViewport('css', $ckeditor_id, 'topLeft', 'CKEditor-enabled body field is visible.');

    $before_url = $session->getCurrentUrl();

    // Trigger a hash change with as target the hidden textarea.
    $session->executeScript("location.hash = '#edit-body-0-value';");

    // Check that the CKEditor-enabled body field is visible in the viewport.
    $web_assert->assertVisibleInViewport('css', $ckeditor_id, 'topLeft', 'CKEditor-enabled body field is not visible.');

    // Use JavaScript to go back in the history instead of
    // \Behat\Mink\Session::back() because that function doesn't work after a
    // hash change.
    $session->executeScript("history.back();");

    $after_url = $session->getCurrentUrl();

    // Check that going back in the history worked.
    self::assertEquals($before_url, $after_url, 'History back works.');
  }

137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
  /**
   * Tests if the Image button appears and works as expected.
   */
  public function testDrupalImageDialog() {
    $session = $this->getSession();
    $web_assert = $this->assertSession();

    $this->drupalGet('node/add/page');
    $session->getPage();

    // Asserts the Image button is present in the toolbar.
    $web_assert->elementExists('css', '#cke_edit-body-0-value .cke_button__drupalimage');

    // Asserts the image dialog opens when clicking the Image button.
    $this->click('.cke_button__drupalimage');
    $this->assertNotEmpty($web_assert->waitForElement('css', '.ui-dialog'));

    $web_assert->elementContains('css', '.ui-dialog .ui-dialog-titlebar', 'Insert Image');
  }

157
158
159
160
161
162
163
164
165
166
167
168
169
170
  /**
   * Tests if the Drupal Image Caption plugin appears and works as expected.
   */
  public function testDrupalImageCaptionDialog() {
    $web_assert = $this->assertSession();

    // Disable the caption filter.
    $this->filterFormat->setFilterConfig('filter_caption', [
      'status' => FALSE,
    ]);
    $this->filterFormat->save();

    // If the caption filter is disabled, its checkbox should be absent.
    $this->drupalGet('node/add/page');
catch's avatar
catch committed
171
172
    $this->waitForEditor();
    $this->pressEditorButton('drupalimage');
173
174
175
176
177
178
179
180
181
    $this->assertNotEmpty($web_assert->waitForElement('css', '.ui-dialog'));
    $web_assert->elementNotExists('css', '.ui-dialog input[name="attributes[hasCaption]"]');

    // Enable the caption filter again.
    $this->filterFormat->setFilterConfig('filter_caption', [
      'status' => TRUE,
    ]);
    $this->filterFormat->save();

catch's avatar
catch committed
182
    // If the caption filter is enabled, its checkbox should be present.
183
    $this->drupalGet('node/add/page');
catch's avatar
catch committed
184
185
    $this->waitForEditor();
    $this->pressEditorButton('drupalimage');
186
187
188
189
    $this->assertNotEmpty($web_assert->waitForElement('css', '.ui-dialog'));
    $web_assert->elementExists('css', '.ui-dialog input[name="attributes[hasCaption]"]');
  }

190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
  /**
   * Tests if CKEditor is properly styled inside an off-canvas dialog.
   */
  public function testOffCanvasStyles() {
    $assert_session = $this->assertSession();
    $page = $this->getSession()->getPage();

    $this->drupalGet('/ckeditor_test/off_canvas');

    // The "Add Node" link triggers an off-canvas dialog with an add node form
    // that includes CKEditor.
    $page->clickLink('Add Node');
    $assert_session->waitForElementVisible('css', '#drupal-off-canvas');
    $assert_session->assertWaitOnAjaxRequest();

    // Check the background color of two CKEditor elements to confirm they are
206
    // not overridden by the off-canvas css reset.
207
208
    $assert_session->elementExists('css', '.cke_top');
    $ckeditor_top_bg_color = $this->getSession()->evaluateScript('window.getComputedStyle(document.getElementsByClassName(\'cke_top\')[0]).backgroundColor');
209
    $this->assertEquals('rgb(248, 248, 248)', $ckeditor_top_bg_color);
210
211
212

    $assert_session->elementExists('css', '.cke_button__source');
    $ckeditor_source_button_bg_color = $this->getSession()->evaluateScript('window.getComputedStyle(document.getElementsByClassName(\'cke_button__source\')[0]).backgroundColor');
213
    $this->assertEquals('rgba(0, 0, 0, 0)', $ckeditor_source_button_bg_color);
214
215
216
217
218
219
220

    // Check that only one off-canvas style is cached in local storage and that
    // it gets updated with the cache-busting query string.
    $get_cache_keys = 'Object.keys(window.localStorage).filter(function (i) {return i.indexOf(\'Drupal.off-canvas.css.\') === 0})';
    $old_keys = $this->getSession()->evaluateScript($get_cache_keys);
    // Flush the caches to ensure the new timestamp is altered into the
    // drupal.ckeditor library's javascript settings.
221
    $this->resetAll();
222
223
224
225
226
227
228
229
230
231
232
233
234
    // Normally flushing caches regenerates the cache busting query string, but
    // as it's based on the request time, it won't change within this test so
    // explicitly set it.
    \Drupal::state()->set('system.css_js_query_string', '0');
    $this->drupalGet('/ckeditor_test/off_canvas');
    $page->clickLink('Add Node');
    $assert_session->waitForElementVisible('css', '#drupal-off-canvas');
    $assert_session->assertWaitOnAjaxRequest();
    $new_keys = $this->getSession()->evaluateScript($get_cache_keys);

    $this->assertCount(1, $old_keys, 'Only one off-canvas style was cached before clearing caches.');
    $this->assertCount(1, $new_keys, 'Only one off-canvas style was cached after clearing caches.');
    $this->assertNotEquals($old_keys, $new_keys, 'Clearing caches changed the off-canvas style cache key.');
235
236
  }

237
}