Skip to content

GitLab

Unverified Commit 522ab171 authored by alexpott's avatar alexpott
Browse files

Issue #2828528 by Wim Leers, droplet, ZeiP, vaplas, tacituseu,... 

Issue #2828528 by Wim Leers, droplet, ZeiP, vaplas, tacituseu, samuel.mortenson, michielnugter: Add Quick Edit Functional JS test coverage
parent 00c2069f
Hide whitespace changes
Inline Side-by-side
core/modules/image/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php 0 → 100644
View file @ 522ab171
<?php
namespace Drupal\Tests\image\FunctionalJavascript;
/**
* @see \Drupal\image\Plugin\InPlaceEditor\Image
* @see \Drupal\Tests\quickedit\FunctionalJavascript\QuickEditJavascriptTestBase
*/
trait QuickEditImageEditorTestTrait {
/**
* Awaits the 'image' in-place editor.
*/
protected function awaitImageEditor() {
$this->assertJsCondition('document.querySelector(".quickedit-image-field-info") !== null', 10000);
$quickedit_entity_toolbar = $this->getSession()->getPage()->findById('quickedit-entity-toolbar');
$this->assertNotNull($quickedit_entity_toolbar->find('css', 'form.quickedit-image-field-info input[name="alt"]'));
}
/**
* Simulates typing in the 'image' in-place editor 'alt' attribute text input.
*
* @param string $text
* The text to type.
*/
protected function typeInImageEditorAltTextInput($text) {
$quickedit_entity_toolbar = $this->getSession()->getPage()->findById('quickedit-entity-toolbar');
$input = $quickedit_entity_toolbar->find('css', 'form.quickedit-image-field-info input[name="alt"]');
$input->setValue($text);
}
/**
* Simulates dragging and dropping an image on the 'image' in-place editor.
*
* @param string $file_uri
* The URI of the image file to drag and drop.
*/
protected function dropImageOnImageEditor($file_uri) {
// Our headless browser can't drag+drop files, but we can mock the event.
// Append a hidden upload element to the DOM.
$script = 'jQuery("<input id=\"quickedit-image-test-input\" type=\"file\" />").appendTo("body")';
$this->getSession()->executeScript($script);
// Find the element, and set its value to our new image.
$input = $this->assertSession()->elementExists('css', '#quickedit-image-test-input');
$filepath = $this->container->get('file_system')->realpath($file_uri);
$input->attachFile($filepath);
// Trigger the upload logic with a mock "drop" event.
$script = 'var e = jQuery.Event("drop");'
. 'e.originalEvent = {dataTransfer: {files: jQuery("#quickedit-image-test-input").get(0).files}};'
. 'e.preventDefault = e.stopPropagation = function () {};'
. 'jQuery(".quickedit-image-dropzone").trigger(e);';
$this->getSession()->executeScript($script);
// Wait for the dropzone element to be removed (i.e. loading is done).
$js_condition = <<<JS
function () {
var activeFieldID = Drupal.quickedit.collections.entities
.findWhere({state:'opened'})
.get('fields')
.filter(function (fieldModel) {
var state = fieldModel.get('state');
return state === 'active' || state === 'changed';
})[0]
.get('fieldID')
return document.querySelector('[data-quickedit-field-id="' + activeFieldID + '"] .quickedit-image-dropzone') === null;
}();
JS;
$this->assertJsCondition($js_condition, 20000);
}
}
core/modules/image/tests/src/FunctionalJavascript/QuickEditImageTest.php
View file @ 522ab171
......@@ -3,24 +3,24 @@
namespace Drupal\Tests\image\FunctionalJavascript;
use Drupal\file\Entity\File;
use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
use Drupal\Tests\image\Kernel\ImageFieldCreationTrait;
use Drupal\Tests\quickedit\FunctionalJavascript\QuickEditJavascriptTestBase;
use Drupal\Tests\TestFileCreationTrait;
/**
* Tests the JavaScript functionality of the "image" in-place editor.
*
* @coversDefaultClass \Drupal\image\Plugin\InPlaceEditor\Image
* @group image
*/
class QuickEditImageTest extends JavascriptTestBase {
class QuickEditImageTest extends QuickEditJavascriptTestBase {
use ImageFieldCreationTrait;
use TestFileCreationTrait;
use QuickEditImageEditorTestTrait;
/**
* {@inheritdoc}
*/
public static $modules = ['node', 'image', 'field_ui', 'contextual', 'quickedit', 'toolbar'];
public static $modules = ['node', 'image', 'field_ui'];
/**
* A user with permissions to edit Articles and use Quick Edit.
......@@ -52,9 +52,12 @@ protected function setUp() {
}
/**
* Tests if an image can be uploaded inline with Quick Edit.
* Test that quick editor works correctly with images.
*
* @covers ::isCompatible
* @covers ::getAttachments
*/
public function testUpload() {
public function testImageInPlaceEditor() {
// Create a field with a basic filetype restriction.
$field_name = strtolower($this->randomMachineName());
$field_settings = [
......@@ -114,52 +117,82 @@ public function testUpload() {
// Assert that the initial image is present.
$this->assertSession()->elementExists('css', $entity_selector . ' ' . $field_selector . ' ' . $original_image_selector);
// Wait until Quick Edit loads.
$condition = "jQuery('" . $entity_selector . " .quickedit').length > 0";
$this->assertJsCondition($condition, 10000);
// Initiate Quick Editing.
$this->click('.contextual-toolbar-tab button');
$this->click($entity_selector . ' [data-contextual-id] > button');
$this->click($entity_selector . ' [data-contextual-id] .quickedit > a');
$this->click($field_selector);
// Initial state.
$this->awaitQuickEditForEntity('node', 1);
$this->assertEntityInstanceStates([
'node/1[0]' => 'closed',
]);
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/title/en/full' => 'inactive',
'node/1/uid/en/full' => 'inactive',
'node/1/created/en/full' => 'inactive',
'node/1/body/en/full' => 'inactive',
'node/1/' . $field_name . '/en/full' => 'inactive',
]);
// Wait for the field info to load and set new alt text.
$condition = "jQuery('.quickedit-image-field-info').length > 0";
$this->assertJsCondition($condition, 10000);
$input = $this->assertSession()->elementExists('css', '.quickedit-image-field-info input[name="alt"]');
$input->setValue('New text');
// Start in-place editing of the article node.
$this->startQuickEditViaToolbar('node', 1, 0);
$this->assertEntityInstanceStates([
'node/1[0]' => 'opened',
]);
$this->assertQuickEditEntityToolbar((string) $node->label(), NULL);
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/title/en/full' => 'candidate',
'node/1/uid/en/full' => 'candidate',
'node/1/created/en/full' => 'candidate',
'node/1/body/en/full' => 'candidate',
'node/1/' . $field_name . '/en/full' => 'candidate',
]);
// Check that our Dropzone element exists.
// Click the image field.
$this->click($field_selector);
$this->awaitImageEditor();
$this->assertSession()->elementExists('css', $field_selector . ' .quickedit-image-dropzone');
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/title/en/full' => 'candidate',
'node/1/uid/en/full' => 'candidate',
'node/1/created/en/full' => 'candidate',
'node/1/body/en/full' => 'candidate',
'node/1/' . $field_name . '/en/full' => 'active',
]);
// Our headless browser can't drag+drop files, but we can mock the event.
// Append a hidden upload element to the DOM.
$script = 'jQuery("<input id=\"quickedit-image-test-input\" type=\"file\" />").appendTo("body")';
$this->getSession()->executeScript($script);
// Find the element, and set its value to our new image.
$input = $this->assertSession()->elementExists('css', '#quickedit-image-test-input');
$filepath = $this->container->get('file_system')->realpath($valid_images[1]->uri);
$input->attachFile($filepath);
// Trigger the upload logic with a mock "drop" event.
$script = 'var e = jQuery.Event("drop");'
. 'e.originalEvent = {dataTransfer: {files: jQuery("#quickedit-image-test-input").get(0).files}};'
. 'e.preventDefault = e.stopPropagation = function () {};'
. 'jQuery(".quickedit-image-dropzone").trigger(e);';
$this->getSession()->executeScript($script);
// Type new 'alt' text.
$this->typeInImageEditorAltTextInput('New text');
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/title/en/full' => 'candidate',
'node/1/uid/en/full' => 'candidate',
'node/1/created/en/full' => 'candidate',
'node/1/body/en/full' => 'candidate',
'node/1/' . $field_name . '/en/full' => 'changed',
]);
// Wait for the dropzone element to be removed (i.e. loading is done).
$condition = "jQuery('" . $field_selector . " .quickedit-image-dropzone').length == 0";
$this->assertJsCondition($condition, 20000);
// Drag and drop an image.
$this->dropImageOnImageEditor($valid_images[1]->uri);
// To prevent 403s on save, we re-set our request (cookie) state.
$this->prepareRequest();
// Save the change.
$this->click('.quickedit-button.action-save');
$this->assertSession()->assertWaitOnAjaxRequest();
// Click 'Save'.
$this->saveQuickEdit();
$this->assertEntityInstanceStates([
'node/1[0]' => 'committing',
]);
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/title/en/full' => 'candidate',
'node/1/uid/en/full' => 'candidate',
'node/1/created/en/full' => 'candidate',
'node/1/body/en/full' => 'candidate',
'node/1/' . $field_name . '/en/full' => 'saving',
]);
$this->assertEntityInstanceFieldMarkup('node', 1, 0, [
'node/1/' . $field_name . '/en/full' => '.quickedit-changed',
]);
// Wait for the saving of the image field to complete.
$this->assertJsCondition("Drupal.quickedit.collections.entities.get('node/1[0]').get('state') === 'closed'");
$this->assertEntityInstanceStates([
'node/1[0]' => 'closed',
]);
// Re-visit the page to make sure the edit worked.
$this->drupalGet('node/' . $node->id());
......
core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditIntegrationTest.php 0 → 100644
View file @ 522ab171
<?php
namespace Drupal\Tests\quickedit\FunctionalJavascript;
use Drupal\block_content\Entity\BlockContent;
use Drupal\block_content\Entity\BlockContentType;
use Drupal\Core\Field\FieldStorageDefinitionInterface;
use Drupal\editor\Entity\Editor;
use Drupal\field\Tests\EntityReference\EntityReferenceTestTrait;
use Drupal\filter\Entity\FilterFormat;
use Drupal\taxonomy\Entity\Term;
use Drupal\taxonomy\Entity\Vocabulary;
/**
* @group quickedit
*/
class QuickEditIntegrationTest extends QuickEditJavascriptTestBase {
use EntityReferenceTestTrait;
/**
* {@inheritdoc}
*/
public static $modules = [
'node',
'editor',
'ckeditor',
'taxonomy',
'block',
'block_content',
'hold_test',
];
/**
* A user with permissions to edit Articles and use Quick Edit.
*
* @var \Drupal\user\UserInterface
*/
protected $contentAuthorUser;
/**
* {@inheritdoc}
*/
protected function setUp() {
parent::setUp();
// Create text format, associate CKEditor.
FilterFormat::create([
'format' => 'some_format',
'name' => 'Some format',
'weight' => 0,
'filters' => [
'filter_html' => [
'status' => 1,
'settings' => [
'allowed_html' => '<h2 id> <h3> <h4> <h5> <h6> <p> <br> <strong> <a href hreflang>',
],
],
],
])->save();
Editor::create([
'format' => 'some_format',
'editor' => 'ckeditor',
])->save();
// Create the Article node type.
$this->drupalCreateContentType(['type' => 'article', 'name' => 'Article']);
// Add "tags" vocabulary + field to the Article node type.
$vocabulary = Vocabulary::create([
'name' => 'Tags',
'vid' => 'tags',
]);
$vocabulary->save();
$field_name = 'field_' . $vocabulary->id();
$handler_settings = [
'target_bundles' => [
$vocabulary->id() => $vocabulary->id(),
],
'auto_create' => TRUE,
];
$this->createEntityReferenceField('node', 'article', $field_name, 'Tags', 'taxonomy_term', 'default', $handler_settings, FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED);
// Add formatter & widget for "tags" field.
\Drupal::entityTypeManager()
->getStorage('entity_form_display')
->load('node.article.default')
->setComponent($field_name, ['type' => 'entity_reference_autocomplete_tags'])
->save();
\Drupal::entityTypeManager()
->getStorage('entity_view_display')
->load('node.article.default')
->setComponent($field_name, ['type' => 'entity_reference_label'])
->save();
$this->drupalPlaceBlock('page_title_block');
$this->drupalPlaceBlock('system_main_block');
// Log in as a content author who can use Quick Edit and edit Articles.
$this->contentAuthorUser = $this->drupalCreateUser([
'access contextual links',
'access toolbar',
'access in-place editing',
'access content',
'create article content',
'edit any article content',
'use text format some_format',
'edit terms in tags',
'administer blocks',
]);
$this->drupalLogin($this->contentAuthorUser);
}
/**
* Tests if an article node can be in-place edited with Quick Edit.
*/
public function testArticleNode() {
$term = Term::create([
'name' => 'foo',
'vid' => 'tags',
]);
$term->save();
$node = $this->drupalCreateNode([
'type' => 'article',
'title' => t('My Test Node'),
'body' => [
'value' => '<p>Hello world!</p><p>I do not know what to say…</p><p>I wish I were eloquent.</p>',
'format' => 'some_format',
],
'field_tags' => [
['target_id' => $term->id()],
],
]);
$this->drupalGet('node/' . $node->id());
// Initial state.
$this->awaitQuickEditForEntity('node', 1);
$this->assertEntityInstanceStates([
'node/1[0]' => 'closed',
]);
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/title/en/full' => 'inactive',
'node/1/uid/en/full' => 'inactive',
'node/1/created/en/full' => 'inactive',
'node/1/body/en/full' => 'inactive',
'node/1/field_tags/en/full' => 'inactive',
]);
// Start in-place editing of the article node.
$this->startQuickEditViaToolbar('node', 1, 0);
$this->assertEntityInstanceStates([
'node/1[0]' => 'opened',
]);
$this->assertQuickEditEntityToolbar((string) $node->label(), NULL);
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/title/en/full' => 'candidate',
'node/1/uid/en/full' => 'candidate',
'node/1/created/en/full' => 'candidate',
'node/1/body/en/full' => 'candidate',
'node/1/field_tags/en/full' => 'candidate',
]);
$assert_session = $this->assertSession();
// Click the title field.
$this->click('[data-quickedit-field-id="node/1/title/en/full"].quickedit-candidate');
$assert_session->waitForElement('css', '.quickedit-toolbar-field div[id*="title"]');
$this->assertQuickEditEntityToolbar((string) $node->label(), 'Title');
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/title/en/full' => 'active',
'node/1/uid/en/full' => 'candidate',
'node/1/created/en/full' => 'candidate',
'node/1/body/en/full' => 'candidate',
'node/1/field_tags/en/full' => 'candidate',
]);
$this->assertEntityInstanceFieldMarkup('node', 1, 0, [
'node/1/title/en/full' => '[contenteditable="true"]',
]);
// Append something to the title.
$this->typeInPlainTextEditor('[data-quickedit-field-id="node/1/title/en/full"].quickedit-candidate', ' Llamas are awesome!');
$this->awaitEntityInstanceFieldState('node', 1, 0, 'title', 'en', 'changed');
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/title/en/full' => 'changed',
'node/1/uid/en/full' => 'candidate',
'node/1/created/en/full' => 'candidate',
'node/1/body/en/full' => 'candidate',
'node/1/field_tags/en/full' => 'candidate',
]);
// Click the body field.
hold_test_response(TRUE);
$this->click('[data-quickedit-entity-id="node/1"] .field--name-body');
$assert_session->waitForElement('css', '.quickedit-toolbar-field div[id*="body"]');
$this->assertQuickEditEntityToolbar((string) $node->label(), 'Body');
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/title/en/full' => 'saving',
'node/1/uid/en/full' => 'candidate',
'node/1/created/en/full' => 'candidate',
'node/1/body/en/full' => 'active',
'node/1/field_tags/en/full' => 'candidate',
]);
hold_test_response(FALSE);
// Wait for CKEditor to load, then verify it has.
$this->assertJsCondition('CKEDITOR.status === "loaded"');
$this->assertEntityInstanceFieldMarkup('node', 1, 0, [
'node/1/body/en/full' => '.cke_editable_inline',
'node/1/field_tags/en/full' => ':not(.quickedit-editor-is-popup)',
]);
$this->assertSession()->elementExists('css', '#quickedit-entity-toolbar .quickedit-toolgroup.wysiwyg-main > .cke_chrome .cke_top[role="presentation"] .cke_toolbar[role="toolbar"] .cke_toolgroup[role="presentation"] > .cke_button[title~="Bold"][role="button"]');
// Wait for the validating & saving of the title to complete.
$this->awaitEntityInstanceFieldState('node', 1, 0, 'title', 'en', 'candidate');
// Click the tags field.
hold_test_response(TRUE);
$this->click('[data-quickedit-field-id="node/1/field_tags/en/full"]');
$assert_session->waitForElement('css', '.quickedit-toolbar-field div[id*="tags"]');
$this->assertQuickEditEntityToolbar((string) $node->label(), 'Tags');
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/uid/en/full' => 'candidate',
'node/1/created/en/full' => 'candidate',
'node/1/body/en/full' => 'candidate',
'node/1/field_tags/en/full' => 'activating',
'node/1/title/en/full' => 'candidate',
]);
$this->assertEntityInstanceFieldMarkup('node', 1, 0, [
'node/1/title/en/full' => '.quickedit-changed',
'node/1/field_tags/en/full' => '.quickedit-editor-is-popup',
]);
// Assert the "Loading…" popup appears.
$this->assertSession()->elementExists('css', '.quickedit-form-container > .quickedit-form[role="dialog"] > .placeholder');
hold_test_response(FALSE);
// Wait for the form to load.
$this->assertJsCondition('document.querySelector(\'.quickedit-form-container > .quickedit-form[role="dialog"] > .placeholder\') === null');
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/uid/en/full' => 'candidate',
'node/1/created/en/full' => 'candidate',
'node/1/body/en/full' => 'candidate',
'node/1/field_tags/en/full' => 'active',
'node/1/title/en/full' => 'candidate',
]);
// Enter an additional tag.
$this->typeInFormEditorTextInputField('field_tags[target_id]', 'foo, bar');
$this->awaitEntityInstanceFieldState('node', 1, 0, 'field_tags', 'en', 'changed');
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/uid/en/full' => 'candidate',
'node/1/created/en/full' => 'candidate',
'node/1/body/en/full' => 'candidate',
'node/1/field_tags/en/full' => 'changed',
'node/1/title/en/full' => 'candidate',
]);
// Click 'Save'.
hold_test_response(TRUE);
$this->saveQuickEdit();
$this->assertEntityInstanceStates([
'node/1[0]' => 'committing',
]);
$this->assertEntityInstanceFieldStates('node', 1, 0, [
'node/1/uid/en/full' => 'candidate',
'node/1/created/en/full' => 'candidate',
'node/1/body/en/full' => 'candidate',
'node/1/field_tags/en/full' => 'saving',
'node/1/title/en/full' => 'candidate',
]);
hold_test_response(FALSE);
$this->assertEntityInstanceFieldMarkup('node', 1, 0, [
'node/1/title/en/full' => '.quickedit-changed',
'node/1/field_tags/en/full' => '.quickedit-changed',
]);
// Wait for the saving of the tags field to complete.
$this->assertJsCondition("Drupal.quickedit.collections.entities.get('node/1[0]').get('state') === 'closed'");
$this->assertEntityInstanceStates([
'node/1[0]' => 'closed',
]);
}
/**
* Tests if a custom can be in-place edited with Quick Edit.
*/
public function testCustomBlock() {
$block_content_type = BlockContentType::create([
'id' => 'basic',
'label' => 'basic',
'revision' => FALSE,
]);
$block_content_type->save();
block_content_add_body_field($block_content_type->id());
$block_content = BlockContent::create([
'info' => 'Llama',
'type' => 'basic',
'body' => [
'value' => 'The name "llama" was adopted by European settlers from native Peruvians.',
'format' => 'some_format',
],
]);
$block_content->save();
$this->drupalPlaceBlock('block_content:' . $block_content->uuid(), [
'label' => 'My custom block!',
]);
$this->drupalGet('');
// Initial state.
$this->awaitQuickEditForEntity('block_content', 1);
$this->assertEntityInstanceStates([
'block_content/1[0]' => 'closed',
]);
// Start in-place editing of the article node.
$this->startQuickEditViaToolbar('block_content', 1, 0);
$this->assertEntityInstanceStates([
'block_content/1[0]' => 'opened',
]);
$this->assertQuickEditEntityToolbar((string) $block_content->label(), 'Body');
$this->assertEntityInstanceFieldStates('block_content', 1, 0, [
'block_content/1/body/en/full' => 'highlighted',
]);
// Click the body field.
$this->click('[data-quickedit-entity-id="block_content/1"] .field--name-body');
$assert_session = $this->assertSession();
$assert_session->waitForElement('css', '.quickedit-toolbar-field div[id*="body"]');
$this->assertQuickEditEntityToolbar((string) $block_content->label(), 'Body');
$this->assertEntityInstanceFieldStates('block_content', 1, 0, [
'block_content/1/body/en/full' => 'active',
]);
// Wait for CKEditor to load, then verify it has.
$this->assertJsCondition('CKEDITOR.status === "loaded"');
$this->assertEntityInstanceFieldMarkup('block_content', 1, 0, [
'block_content/1/body/en/full' => '.cke_editable_inline',
]);