CodeExplorer
You are a developer and looking for Shopware projects?
Apply Now!
waitForEditor example
/**
* Tests the Drupal image URL widget.
*/
public function testImageUrlWidget(): void {
$assert_session = $this->assertSession();
$page = $this->getSession()->getPage();
$image_selector = '.ck-widget.image-inline';
$src = $this->imageAttributes()['src'];
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$this->pressEditorButton('Insert image');
$panel = $page->find('css', '.ck-dropdown__panel.ck-image-insert__panel');
$src_input = $panel->find('css', 'input[type=text]');
$src_input->setValue($src);
$panel->find('xpath', "//button[span[text()='Insert']]")->click();
$this->assertNotEmpty($assert_session->waitForElementVisible('css', $image_selector));
$this->click($image_selector);
$this->assertVisibleBalloon('[aria-label="Image toolbar"]');
public function testImageUrlWidget(): void {
$assert_session = $this->assertSession();
$page = $this->getSession()->getPage();
$image_selector = '.ck-widget.image-inline';
$src = $this->imageAttributes()['src'];
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$this->pressEditorButton('Insert image');
$panel = $page->find('css', '.ck-dropdown__panel.ck-image-insert__panel');
$src_input = $panel->find('css', 'input[type=text]');
$src_input->setValue($src);
$panel->find('xpath', "//button[span[text()='Insert']]")->click();
$this->assertNotEmpty($assert_session->waitForElementVisible('css', $image_selector));
$this->click($image_selector);
$this->assertVisibleBalloon('[aria-label="Image toolbar"]');
$string = array_reverse($string);
}
return implode(' ', $string);
}
/** * Add an image to the CKEditor 5 editable zone. */
protected function addImage() {
$page = $this->getSession()->getPage();
$src = $this->imageAttributes()['src'];
$this->waitForEditor();
$this->pressEditorButton('Insert image');
$panel = $page->find('css', '.ck-dropdown__panel.ck-image-insert__panel');
$src_input = $panel->find('css', 'input[type=text]');
$src_input->setValue($src);
$panel->find('xpath', "//button[span[text()='Insert']]")->click();
// Wait for the image to be uploaded and rendered by CKEditor 5. $this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', '.ck-widget.image > img[src="' . $src . '"]'));
}
/** * Ensures that attributes are retained on conversion. */
}
return implode(' ', $string);
}
/** * Add an image to the CKEditor 5 editable zone. */
protected function addImage() {
$page = $this->getSession()->getPage();
$src = $this->imageAttributes()['src'];
$this->waitForEditor();
$this->pressEditorButton('Insert image');
$panel = $page->find('css', '.ck-dropdown__panel.ck-image-insert__panel');
$src_input = $panel->find('css', 'input[type=text]');
$src_input->setValue($src);
$panel->find('xpath', "//button[span[text()='Insert']]")->click();
// Wait for the image to be uploaded and rendered by CKEditor 5. $this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', '.ck-widget.image > img[src="' . $src . '"]'));
}
/** * Ensures that attributes are retained on conversion. */
$this->drupalLogin($this->adminUser);
}
/** * Ensures that CKEditor italic model is converted to em. */
public function testEmphasis() {
$page = $this->getSession()->getPage();
$assert_session = $this->assertSession();
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$emphasis_element = $assert_session->waitForElementVisible('css', '.ck-content p em');
$this->assertEquals('test!', $emphasis_element->getText());
$xpath = new \DOMXPath($this->getEditorDataAsDom());
$emphasis_source = $xpath->query('//p/em');
$this->assertNotEmpty($emphasis_source);
$this->assertEquals('test!', $emphasis_source[0]->textContent);
$page->pressButton('Save');
$assert_session->responseContains('<p>This is a <em>test!</em></p>');
}
}
/** * Ensures that CKEditor italic model is converted to em. */
public function testEmphasis() {
$page = $this->getSession()->getPage();
$assert_session = $this->assertSession();
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$emphasis_element = $assert_session->waitForElementVisible('css', '.ck-content p em');
$this->assertEquals('test!', $emphasis_element->getText());
$xpath = new \DOMXPath($this->getEditorDataAsDom());
$emphasis_source = $xpath->query('//p/em');
$this->assertNotEmpty($emphasis_source);
$this->assertEquals('test!', $emphasis_source[0]->textContent);
$page->pressButton('Save');
$assert_session->responseContains('<p>This is a <em>test!</em></p>');
}
/** * Tests using drupalMedia button to embed media into CKEditor 5. */
public function testButton() {
// Skipped due to frequent random test failures. // @todo Fix this and stop skipping it at https://www.drupal.org/i/3351597. $this->markTestSkipped();
$media_preview_selector = '.ck-content .ck-widget.drupal-media .media';
$this->drupalGet('/node/add/blog');
$this->waitForEditor();
$this->pressEditorButton('Insert Media');
$assert_session = $this->assertSession();
$page = $this->getSession()->getPage();
$this->assertNotEmpty($assert_session->waitForElementVisible('css', '#drupal-modal #media-library-content'));
// Ensure that the tab order is correct. $tabs = $page->findAll('css', '.media-library-menu__link');
$expected_tab_order = [
'Show Image media (selected)',
'Show Arrakis media',
];
$this->drupalLogin($this->drupalCreateUser([
'use text format test_format',
'bypass node access',
]));
// Set a taller window size to ensure all possible style choices are in view // because otherwise Mink's getText() will return the empty string for those // out of view, despite the HTML showing that text. $this->getSession()->resizeWindow(1024, 1000);
$this->drupalGet($node->toUrl('edit-form'));
$this->waitForEditor();
// Select the <h2>, assert that no style is active currently. $this->selectTextInsideElement('h2');
$assert_session = $this->assertSession();
$style_dropdown = $assert_session->elementExists('css', '.ck-style-dropdown');
$this->assertSame('Styles', $style_dropdown->getText());
// Click the dropdown, check the available styles. $style_dropdown->click();
$buttons = $style_dropdown->findAll('css', '.ck-dropdown__panel button');
$this->assertCount(9, $buttons);
'use text format test_format',
'bypass node access',
]));
// Set a taller window size to ensure all possible style choices are in view // because otherwise Mink's getText() will return the empty string for those // out of view, despite the HTML showing that text. $this->getSession()->resizeWindow(1024, 1000);
$this->drupalGet($node->toUrl('edit-form'));
$this->waitForEditor();
// Select the <h2>, assert that no style is active currently. $this->selectTextInsideElement('h2');
$assert_session = $this->assertSession();
$style_dropdown = $assert_session->elementExists('css', '.ck-style-dropdown');
$this->assertSame('Styles', $style_dropdown->getText());
// Click the dropdown, check the available styles. $style_dropdown->click();
$buttons = $style_dropdown->findAll('css', '.ck-dropdown__panel button');
$this->assertCount(9, $buttons);
$this->assertTableStructureInRenderedPage();
}
/** * Tests creating a table with caption in the UI. */
public function testTableCaptionUi() {
$assert_session = $this->assertSession();
$page = $this->getSession()->getPage();
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
// Add a table via the editor buttons. $table_button = $page->find('css', '.ck-dropdown button');
$table_button->click();
// Add a single table cell. $grid_button = $assert_session->waitForElementVisible('css', '.ck-insert-table-dropdown-grid-box[data-row="1"][data-column="1"]');
$grid_button->click();
// Confirm the table has been added and no caption is present. $this->assertNotNull($table_figure = $assert_session->waitForElementVisible('css', 'figure.table'));
}
/** * Tests creating a table with caption in the UI. */
public function testTableCaptionUi() {
$assert_session = $this->assertSession();
$page = $this->getSession()->getPage();
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
// Add a table via the editor buttons. $table_button = $page->find('css', '.ck-dropdown button');
$table_button->click();
// Add a single table cell. $grid_button = $assert_session->waitForElementVisible('css', '.ck-insert-table-dropdown-grid-box[data-row="1"][data-column="1"]');
$grid_button->click();
// Confirm the table has been added and no caption is present. $this->assertNotNull($table_figure = $assert_session->waitForElementVisible('css', 'figure.table'));
$this->assertSame([], array_map(
function DConstraintViolation $v) {
return (string) $v->getMessage();
},
iterator_to_array(CKEditor5::validatePair(
Editor::load('ckeditor5'),
FilterFormat::load('ckeditor5')
))
));
$this->drupalGet('node/add');
$this->waitForEditor();
$page->fillField('title[0][value]', 'My test content');
// Ensure that CKEditor 5 is focused. $this->click('.ck-content');
$this->assertNotEmpty($image_upload_field = $page->find('css', '.ck-file-dialog-button input[type="file"]'));
$image = $this->getTestFiles('image')[0];
$image_upload_field->attachFile($this->container->get('file_system')->realpath($image->uri));
$assert_session->waitForElementVisible('css', '.ck-widget.image');
$this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-balloon-panel .ck-text-alternative-form'));
function DConstraintViolation $v) {
return (string) $v->getMessage();
},
iterator_to_array(CKEditor5::validatePair(
Editor::load('ckeditor5'),
FilterFormat::load('ckeditor5')
))
));
$this->drupalGet('node/add');
$this->waitForEditor();
$page->fillField('title[0][value]', 'My test content');
// Ensure that CKEditor 5 is focused. $this->click('.ck-content');
$this->assertNotEmpty($image_upload_field = $page->find('css', '.ck-file-dialog-button input[type="file"]'));
$image = $this->getTestFiles('image')[0];
$image_upload_field->attachFile($this->container->get('file_system')->realpath($image->uri));
$assert_session->waitForElementVisible('css', '.ck-widget.image');
$this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-balloon-panel .ck-text-alternative-form'));
/**
* Tests that `<drupal-media>` is converted into a block element.
*/
public function testConversion() {
// Wrap the `<drupal-media>` markup in a `<p>`. $original_value = $this->host->body->value;
$this->host->body->value = '<p>foo' . $original_value . '</p>';
$this->host->save();
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$assert_session = $this->assertSession();
$assert_session->waitForElementVisible('css', 'img[src*="image-test.png"]', 1000);
$editor_html = $this->getEditorDataAsHtmlString();
// Observe that `<drupal-media>` was moved into its own block element. $this->assertEquals('<p>foo</p>' . $original_value, str_replace(' ', '', $editor_html));
}
/** * Tests that only <drupal-media> tags are processed. * * @see \Drupal\Tests\media\Kernel\MediaEmbedFilterTest::testOnlyDrupalMediaTagProcessed() */
public function testConversion() {
// Wrap the `<drupal-media>` markup in a `<p>`. $original_value = $this->host->body->value;
$this->host->body->value = '<p>foo' . $original_value . '</p>';
$this->host->save();
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$assert_session = $this->assertSession();
$assert_session->waitForElementVisible('css', 'img[src*="image-test.png"]', 1000);
$editor_html = $this->getEditorDataAsHtmlString();
// Observe that `<drupal-media>` was moved into its own block element. $this->assertEquals('<p>foo</p>' . $original_value, str_replace(' ', '', $editor_html));
}
/** * Tests that only <drupal-media> tags are processed. * * @see \Drupal\Tests\media\Kernel\MediaEmbedFilterTest::testOnlyDrupalMediaTagProcessed() */
$text_editor,
$text_format
))
));
// If valid, save both. $text_format->save();
$text_editor->save();
}
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$this->assertSame($expected_markup, $this->getEditorDataAsHtmlString());
}
/** * Data provider for ::testAllowingExtraAttributes(). * * @return array * The test cases. */
public function providerAllowingExtraAttributes(): array {
$general_test_case_markup = '<div class="llama" data-llama="🦙"><p data-llama="🦙">The <a href="https://example.com/pirate" class="button" data-grammar="subject">pirate</a> is <a href="https://example.com/irate" class="use-ajax" data-grammar="adjective">irate</a>.</p></div>';
$text_format
))
));
// If valid, save both. $text_format->save();
$text_editor->save();
}
$this->drupalGet($this->host->toUrl('edit-form'));
$this->waitForEditor();
$this->assertSame($expected_markup, $this->getEditorDataAsHtmlString());
}
/** * Data provider for ::testAllowingExtraAttributes(). * * @return array * The test cases. */
public function providerAllowingExtraAttributes(): array {
$general_test_case_markup = '<div class="llama" data-llama="🦙"><p data-llama="🦙">The <a href="https://example.com/pirate" class="button" data-grammar="subject">pirate</a> is <a href="https://example.com/irate" class="use-ajax" data-grammar="adjective">irate</a>.</p></div>';