.../QuickEditImageEditorTestTrait.php | 76 +++++++++++++
.../FunctionalJavascript/QuickEditImageTest.php | 118 +++++++++++++--------
.../QuickEditJavaScriptTestBase.php | 3 -
3 files changed, 151 insertions(+), 46 deletions(-)
diff --git a/core/modules/image/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php b/core/modules/image/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php
index e69de29..8122319 100644
--- a/core/modules/image/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php
+++ b/core/modules/image/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php
@@ -0,0 +1,76 @@
+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("").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 = <<assertJsCondition($js_condition, 20000);
+
+ }
+
+}
\ No newline at end of file
diff --git a/core/modules/image/tests/src/FunctionalJavascript/QuickEditImageTest.php b/core/modules/image/tests/src/FunctionalJavascript/QuickEditImageTest.php
index 12e43e7..2c43b12 100644
--- a/core/modules/image/tests/src/FunctionalJavascript/QuickEditImageTest.php
+++ b/core/modules/image/tests/src/FunctionalJavascript/QuickEditImageTest.php
@@ -5,22 +5,23 @@
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 +53,10 @@ protected function setUp() {
}
/**
- * Tests if an image can be uploaded inline with Quick Edit.
+ * @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 +116,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("").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());
diff --git a/core/modules/quickedit/tests/src/FunctionalJavaScript/QuickEditJavaScriptTestBase.php b/core/modules/quickedit/tests/src/FunctionalJavaScript/QuickEditJavaScriptTestBase.php
index 3e0544c..0504c0d 100644
--- a/core/modules/quickedit/tests/src/FunctionalJavaScript/QuickEditJavaScriptTestBase.php
+++ b/core/modules/quickedit/tests/src/FunctionalJavaScript/QuickEditJavaScriptTestBase.php
@@ -10,9 +10,6 @@
use Drupal\taxonomy\Entity\Term;
use Drupal\taxonomy\Entity\Vocabulary;
-/**
- * @group quickedit
- */
class QuickEditJavaScriptTestBase extends JavascriptTestBase {
/**