QuickEditImageTest.php 7.34 KB
Newer Older
1
2
3
4
5
6
<?php

namespace Drupal\Tests\image\FunctionalJavascript;

use Drupal\file\Entity\File;
use Drupal\Tests\image\Kernel\ImageFieldCreationTrait;
7
use Drupal\Tests\quickedit\FunctionalJavascript\QuickEditJavascriptTestBase;
8
9
10
use Drupal\Tests\TestFileCreationTrait;

/**
11
 * @coversDefaultClass \Drupal\image\Plugin\InPlaceEditor\Image
12
13
 * @group image
 */
14
class QuickEditImageTest extends QuickEditJavascriptTestBase {
15
16
17

  use ImageFieldCreationTrait;
  use TestFileCreationTrait;
18
  use QuickEditImageEditorTestTrait;
19
20
21
22

  /**
   * {@inheritdoc}
   */
23
  protected static $modules = ['node', 'image', 'field_ui'];
24

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

30
31
32
33
34
35
36
37
38
39
  /**
   * A user with permissions to edit Articles and use Quick Edit.
   *
   * @var \Drupal\user\UserInterface
   */
  protected $contentAuthorUser;

  /**
   * {@inheritdoc}
   */
40
  protected function setUp(): void {
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
    parent::setUp();

    // Create the Article node type.
    $this->drupalCreateContentType(['type' => 'article', 'name' => 'Article']);

    // 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',
      'delete any article content',
    ]);
    $this->drupalLogin($this->contentAuthorUser);
  }

  /**
60
61
62
63
   * Test that quick editor works correctly with images.
   *
   * @covers ::isCompatible
   * @covers ::getAttachments
64
   */
65
  public function testImageInPlaceEditor() {
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
    // Create a field with a basic filetype restriction.
    $field_name = strtolower($this->randomMachineName());
    $field_settings = [
      'file_extensions' => 'png',
    ];
    $formatter_settings = [
      'image_style' => 'large',
      'image_link' => '',
    ];
    $this->createImageField($field_name, 'article', [], $field_settings, [], $formatter_settings);

    // Find images that match our field settings.
    $valid_images = [];
    foreach ($this->getTestFiles('image') as $image) {
      // This regex is taken from file_validate_extensions().
      $regex = '/\.(' . preg_replace('/ +/', '|', preg_quote($field_settings['file_extensions'])) . ')$/i';
      if (preg_match($regex, $image->filename)) {
        $valid_images[] = $image;
      }
    }

    // Ensure we have at least two valid images.
    $this->assertGreaterThanOrEqual(2, count($valid_images));

    // Create a File entity for the initial image.
    $file = File::create([
      'uri' => $valid_images[0]->uri,
      'uid' => $this->contentAuthorUser->id(),
      'status' => FILE_STATUS_PERMANENT,
    ]);
    $file->save();

    // Use the first valid image to create a new Node.
    $image_factory = $this->container->get('image.factory');
    $image = $image_factory->get($valid_images[0]->uri);
    $node = $this->drupalCreateNode([
      'type' => 'article',
      'title' => t('Test Node'),
      $field_name => [
        'target_id' => $file->id(),
        'alt' => 'Hello world',
        'title' => '',
        'width' => $image->getWidth(),
        'height' => $image->getHeight(),
      ],
    ]);

    // Visit the new Node.
    $this->drupalGet('node/' . $node->id());

    // Assemble common CSS selectors.
    $entity_selector = '[data-quickedit-entity-id="node/' . $node->id() . '"]';
    $field_selector = '[data-quickedit-field-id="node/' . $node->id() . '/' . $field_name . '/' . $node->language()->getId() . '/full"]';
    $original_image_selector = 'img[src*="' . $valid_images[0]->filename . '"][alt="Hello world"]';
    $new_image_selector = 'img[src*="' . $valid_images[1]->filename . '"][alt="New text"]';

    // Assert that the initial image is present.
    $this->assertSession()->elementExists('css', $entity_selector . ' ' . $field_selector . ' ' . $original_image_selector);

125
126
127
128
129
130
131
132
133
134
135
136
    // 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',
    ]);
137

138
139
140
141
142
143
144
145
146
147
148
149
150
    // 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',
    ]);
151

152
153
154
    // Click the image field.
    $this->click($field_selector);
    $this->awaitImageEditor();
155
    $this->assertSession()->elementExists('css', $field_selector . ' .quickedit-image-dropzone');
156
157
158
159
160
161
162
    $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',
    ]);
163

164
165
166
167
168
169
170
171
172
    // 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',
    ]);
173

174
175
    // Drag and drop an image.
    $this->dropImageOnImageEditor($valid_images[1]->uri);
176
177
178
179

    // To prevent 403s on save, we re-set our request (cookie) state.
    $this->prepareRequest();

180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
    // 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',
    ]);
201
202
203
204
205
206
207
208
209
210

    // Re-visit the page to make sure the edit worked.
    $this->drupalGet('node/' . $node->id());

    // Check that the new image appears as expected.
    $this->assertSession()->elementNotExists('css', $entity_selector . ' ' . $field_selector . ' ' . $original_image_selector);
    $this->assertSession()->elementExists('css', $entity_selector . ' ' . $field_selector . ' ' . $new_image_selector);
  }

}