.../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 { /**