Chris@17
|
1 <?php
|
Chris@17
|
2
|
Chris@17
|
3 namespace Drupal\Tests\quickedit\FunctionalJavascript;
|
Chris@17
|
4
|
Chris@17
|
5 use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
|
Chris@17
|
6 use WebDriver\Key;
|
Chris@17
|
7
|
Chris@17
|
8 /**
|
Chris@17
|
9 * Base class for testing the QuickEdit.
|
Chris@17
|
10 */
|
Chris@17
|
11 class QuickEditJavascriptTestBase extends WebDriverTestBase {
|
Chris@17
|
12
|
Chris@17
|
13 /**
|
Chris@17
|
14 * {@inheritdoc}
|
Chris@17
|
15 */
|
Chris@17
|
16 public static $modules = ['contextual', 'quickedit', 'toolbar'];
|
Chris@17
|
17
|
Chris@17
|
18 /**
|
Chris@17
|
19 * A user with permissions to edit Articles and use Quick Edit.
|
Chris@17
|
20 *
|
Chris@17
|
21 * @var \Drupal\user\UserInterface
|
Chris@17
|
22 */
|
Chris@17
|
23 protected $contentAuthorUser;
|
Chris@17
|
24
|
Chris@17
|
25 protected static $expectedFieldStateAttributes = [
|
Chris@17
|
26 'inactive' => '.quickedit-field:not(.quickedit-editable):not(.quickedit-candidate):not(.quickedit-highlighted):not(.quickedit-editing):not(.quickedit-changed)',
|
Chris@17
|
27 // A field in 'candidate' state may still have the .quickedit-changed class
|
Chris@17
|
28 // because when its changes were saved to tempstore, it'll still be changed.
|
Chris@17
|
29 // It's just not currently being edited, so that's why it is not in the
|
Chris@17
|
30 // 'changed' state.
|
Chris@17
|
31 'candidate' => '.quickedit-field.quickedit-editable.quickedit-candidate:not(.quickedit-highlighted):not(.quickedit-editing)',
|
Chris@17
|
32 'highlighted' => '.quickedit-field.quickedit-editable.quickedit-candidate.quickedit-highlighted:not(.quickedit-editing)',
|
Chris@17
|
33 'activating' => '.quickedit-field.quickedit-editable.quickedit-candidate.quickedit-highlighted.quickedit-editing:not(.quickedit-changed)',
|
Chris@17
|
34 'active' => '.quickedit-field.quickedit-editable.quickedit-candidate.quickedit-highlighted.quickedit-editing:not(.quickedit-changed)',
|
Chris@17
|
35 'changed' => '.quickedit-field.quickedit-editable.quickedit-candidate.quickedit-highlighted.quickedit-editing.quickedit-changed',
|
Chris@17
|
36 'saving' => '.quickedit-field.quickedit-editable.quickedit-candidate.quickedit-highlighted.quickedit-editing.quickedit-changed',
|
Chris@17
|
37 ];
|
Chris@17
|
38
|
Chris@17
|
39 /**
|
Chris@17
|
40 * Starts in-place editing of the given entity instance.
|
Chris@17
|
41 *
|
Chris@17
|
42 * @param string $entity_type_id
|
Chris@17
|
43 * The entity type ID.
|
Chris@17
|
44 * @param int $entity_id
|
Chris@17
|
45 * The entity ID.
|
Chris@17
|
46 * @param int $entity_instance_id
|
Chris@17
|
47 * The entity instance ID. (Instance on the page.)
|
Chris@17
|
48 */
|
Chris@17
|
49 protected function startQuickEditViaToolbar($entity_type_id, $entity_id, $entity_instance_id) {
|
Chris@17
|
50 $page = $this->getSession()->getPage();
|
Chris@17
|
51
|
Chris@17
|
52 $toolbar_edit_button_selector = '#toolbar-bar .contextual-toolbar-tab button';
|
Chris@17
|
53 $entity_instance_selector = '[data-quickedit-entity-id="' . $entity_type_id . '/' . $entity_id . '"][data-quickedit-entity-instance-id="' . $entity_instance_id . '"]';
|
Chris@17
|
54 $contextual_links_trigger_selector = '[data-contextual-id] > .trigger';
|
Chris@17
|
55
|
Chris@17
|
56 // Assert the original page state does not have the toolbar's "Edit" button
|
Chris@17
|
57 // pressed/activated, and hence none of the contextual link triggers should
|
Chris@17
|
58 // be visible.
|
Chris@17
|
59 $toolbar_edit_button = $page->find('css', $toolbar_edit_button_selector);
|
Chris@17
|
60 $this->assertSame('false', $toolbar_edit_button->getAttribute('aria-pressed'), 'The "Edit" button in the toolbar is not yet pressed.');
|
Chris@17
|
61 $this->assertFalse($toolbar_edit_button->hasClass('is-active'), 'The "Edit" button in the toolbar is not yet marked as active.');
|
Chris@17
|
62 foreach ($page->findAll('css', $contextual_links_trigger_selector) as $dom_node) {
|
Chris@17
|
63 /** @var \Behat\Mink\Element\NodeElement $dom_node */
|
Chris@17
|
64 $this->assertTrue($dom_node->hasClass('visually-hidden'), 'The contextual links trigger "' . $dom_node->getParent()->getAttribute('data-contextual-id') . '" is hidden.');
|
Chris@17
|
65 }
|
Chris@17
|
66 $this->assertTrue(TRUE, 'All contextual links triggers are hidden.');
|
Chris@17
|
67
|
Chris@17
|
68 // Click the "Edit" button in the toolbar.
|
Chris@17
|
69 $this->click($toolbar_edit_button_selector);
|
Chris@17
|
70
|
Chris@17
|
71 // Assert the toolbar's "Edit" button is now pressed/activated, and hence
|
Chris@17
|
72 // all of the contextual link triggers should be visible.
|
Chris@17
|
73 $this->assertSame('true', $toolbar_edit_button->getAttribute('aria-pressed'), 'The "Edit" button in the toolbar is pressed.');
|
Chris@17
|
74 $this->assertTrue($toolbar_edit_button->hasClass('is-active'), 'The "Edit" button in the toolbar is marked as active.');
|
Chris@17
|
75 foreach ($page->findAll('css', $contextual_links_trigger_selector) as $dom_node) {
|
Chris@17
|
76 /** @var \Behat\Mink\Element\NodeElement $dom_node */
|
Chris@17
|
77 $this->assertFalse($dom_node->hasClass('visually-hidden'), 'The contextual links trigger "' . $dom_node->getParent()->getAttribute('data-contextual-id') . '" is visible.');
|
Chris@17
|
78 }
|
Chris@17
|
79 $this->assertTrue(TRUE, 'All contextual links triggers are visible.');
|
Chris@17
|
80
|
Chris@17
|
81 // @todo Press tab key to verify that tabbing is now contrained to only
|
Chris@17
|
82 // contextual links triggers: https://www.drupal.org/node/2834776
|
Chris@17
|
83
|
Chris@17
|
84 // Assert that the contextual links associated with the entity's contextual
|
Chris@17
|
85 // links trigger are not visible.
|
Chris@17
|
86 /** @var \Behat\Mink\Element\NodeElement $entity_contextual_links_container */
|
Chris@17
|
87 $entity_contextual_links_container = $page->find('css', $entity_instance_selector)
|
Chris@17
|
88 ->find('css', $contextual_links_trigger_selector)
|
Chris@17
|
89 ->getParent();
|
Chris@17
|
90 $this->assertFalse($entity_contextual_links_container->hasClass('open'));
|
Chris@17
|
91 $this->assertTrue($entity_contextual_links_container->find('css', 'ul.contextual-links')->hasAttribute('hidden'));
|
Chris@17
|
92
|
Chris@17
|
93 // Click the contextual link trigger for the entity we want to Quick Edit.
|
Chris@17
|
94 $this->click($entity_instance_selector . ' ' . $contextual_links_trigger_selector);
|
Chris@17
|
95
|
Chris@17
|
96 $this->assertTrue($entity_contextual_links_container->hasClass('open'));
|
Chris@17
|
97 $this->assertFalse($entity_contextual_links_container->find('css', 'ul.contextual-links')->hasAttribute('hidden'));
|
Chris@17
|
98
|
Chris@17
|
99 // Click the "Quick edit" contextual link.
|
Chris@17
|
100 $this->click($entity_instance_selector . ' [data-contextual-id] ul.contextual-links li.quickedit a');
|
Chris@17
|
101
|
Chris@17
|
102 // Assert the Quick Edit internal state is correct.
|
Chris@17
|
103 $js_condition = <<<JS
|
Chris@17
|
104 Drupal.quickedit.collections.entities.where({isActive: true}).length === 1 && Drupal.quickedit.collections.entities.where({isActive: true})[0].get('entityID') === '$entity_type_id/$entity_id';
|
Chris@17
|
105 JS;
|
Chris@17
|
106 $this->assertJsCondition($js_condition);
|
Chris@17
|
107 }
|
Chris@17
|
108
|
Chris@17
|
109 /**
|
Chris@17
|
110 * Clicks the 'Save' button in the Quick Edit entity toolbar.
|
Chris@17
|
111 */
|
Chris@17
|
112 protected function saveQuickEdit() {
|
Chris@17
|
113 $quickedit_entity_toolbar = $this->getSession()->getPage()->findById('quickedit-entity-toolbar');
|
Chris@17
|
114 $save_button = $quickedit_entity_toolbar->find('css', 'button.action-save');
|
Chris@17
|
115 $save_button->press();
|
Chris@17
|
116 $this->assertSame('Saving', $save_button->getText());
|
Chris@17
|
117 }
|
Chris@17
|
118
|
Chris@17
|
119 /**
|
Chris@17
|
120 * Awaits Quick Edit to be initiated for all instances of the given entity.
|
Chris@17
|
121 *
|
Chris@17
|
122 * @param string $entity_type_id
|
Chris@17
|
123 * The entity type ID.
|
Chris@17
|
124 * @param int $entity_id
|
Chris@17
|
125 * The entity ID.
|
Chris@17
|
126 */
|
Chris@17
|
127 protected function awaitQuickEditForEntity($entity_type_id, $entity_id) {
|
Chris@17
|
128 $entity_selector = '[data-quickedit-entity-id="' . $entity_type_id . '/' . $entity_id . '"]';
|
Chris@17
|
129 $condition = "document.querySelectorAll('" . $entity_selector . "').length === document.querySelectorAll('" . $entity_selector . " .quickedit').length";
|
Chris@17
|
130 $this->assertJsCondition($condition, 10000);
|
Chris@17
|
131 }
|
Chris@17
|
132
|
Chris@17
|
133 /**
|
Chris@17
|
134 * Awaits a particular field instance to reach a particular state.
|
Chris@17
|
135 *
|
Chris@17
|
136 * @param string $entity_type_id
|
Chris@17
|
137 * The entity type ID.
|
Chris@17
|
138 * @param int $entity_id
|
Chris@17
|
139 * The entity ID.
|
Chris@17
|
140 * @param int $entity_instance_id
|
Chris@17
|
141 * The entity instance ID. (Instance on the page.)
|
Chris@17
|
142 * @param string $field_name
|
Chris@17
|
143 * The field name.
|
Chris@17
|
144 * @param string $langcode
|
Chris@17
|
145 * The language code.
|
Chris@17
|
146 * @param string $awaited_state
|
Chris@17
|
147 * One of the possible field states.
|
Chris@17
|
148 */
|
Chris@17
|
149 protected function awaitEntityInstanceFieldState($entity_type_id, $entity_id, $entity_instance_id, $field_name, $langcode, $awaited_state) {
|
Chris@17
|
150 $entity_page_id = $entity_type_id . '/' . $entity_id . '[' . $entity_instance_id . ']';
|
Chris@17
|
151 $logical_field_id = $entity_type_id . '/' . $entity_id . '/' . $field_name . '/' . $langcode;
|
Chris@17
|
152 $this->assertJsCondition("Drupal.quickedit.collections.entities.get('$entity_page_id').get('fields').findWhere({logicalFieldID: '$logical_field_id'}).get('state') === '$awaited_state';");
|
Chris@17
|
153 }
|
Chris@17
|
154
|
Chris@17
|
155 /**
|
Chris@17
|
156 * Asserts the state of the Quick Edit entity toolbar.
|
Chris@17
|
157 *
|
Chris@17
|
158 * @param string $expected_entity_label
|
Chris@17
|
159 * The expected label in the Quick Edit Entity Toolbar.
|
Chris@17
|
160 */
|
Chris@17
|
161 protected function assertQuickEditEntityToolbar($expected_entity_label, $expected_field_label) {
|
Chris@17
|
162 $quickedit_entity_toolbar = $this->getSession()->getPage()->findById('quickedit-entity-toolbar');
|
Chris@17
|
163 // We cannot use ->getText() because it also returns the text of all child
|
Chris@17
|
164 // nodes. We also cannot use XPath to select text node in Selenium. So we
|
Chris@17
|
165 // use JS expression to select only the text node.
|
Chris@17
|
166 $this->assertSame($expected_entity_label, $this->getSession()->evaluateScript("return window.jQuery('#quickedit-entity-toolbar .quickedit-toolbar-label').clone().children().remove().end().text();"));
|
Chris@17
|
167 if ($expected_field_label !== NULL) {
|
Chris@17
|
168 $field_label = $quickedit_entity_toolbar->find('css', '.quickedit-toolbar-label > .field');
|
Chris@17
|
169 // Only try to find the text content of the element if it was actually
|
Chris@17
|
170 // found; otherwise use the returned value for assertion. This helps
|
Chris@17
|
171 // us find a more useful stack/error message from testbot instead of the
|
Chris@17
|
172 // trimmed partial exception stack.
|
Chris@17
|
173 if ($field_label) {
|
Chris@17
|
174 $field_label = $field_label->getText();
|
Chris@17
|
175 }
|
Chris@17
|
176 $this->assertSame($expected_field_label, $field_label);
|
Chris@17
|
177 }
|
Chris@17
|
178 else {
|
Chris@17
|
179 $this->assertFalse($quickedit_entity_toolbar->find('css', '.quickedit-toolbar-label > .field'));
|
Chris@17
|
180 }
|
Chris@17
|
181 }
|
Chris@17
|
182
|
Chris@17
|
183 /**
|
Chris@17
|
184 * Asserts all EntityModels (entity instances) on the page.
|
Chris@17
|
185 *
|
Chris@17
|
186 * @param array $expected_entity_states
|
Chris@17
|
187 * Must describe the expected state of all in-place editable entity
|
Chris@17
|
188 * instances on the page.
|
Chris@17
|
189 *
|
Chris@17
|
190 * @see Drupal.quickedit.EntityModel
|
Chris@17
|
191 */
|
Chris@17
|
192 protected function assertEntityInstanceStates(array $expected_entity_states) {
|
Chris@17
|
193 $js_get_all_field_states_for_entity = <<<JS
|
Chris@17
|
194 function () {
|
Chris@17
|
195 Drupal.quickedit.collections.entities.reduce(function (result, fieldModel) { result[fieldModel.get('id')] = fieldModel.get('state'); return result; }, {})
|
Chris@17
|
196 var entityCollection = Drupal.quickedit.collections.entities;
|
Chris@17
|
197 return entityCollection.reduce(function (result, entityModel) {
|
Chris@17
|
198 result[entityModel.id] = entityModel.get('state');
|
Chris@17
|
199 return result;
|
Chris@17
|
200 }, {});
|
Chris@17
|
201 }()
|
Chris@17
|
202 JS;
|
Chris@17
|
203 $this->assertSame($expected_entity_states, $this->getSession()->evaluateScript($js_get_all_field_states_for_entity));
|
Chris@17
|
204 }
|
Chris@17
|
205
|
Chris@17
|
206 /**
|
Chris@17
|
207 * Asserts all FieldModels for the given entity instance.
|
Chris@17
|
208 *
|
Chris@17
|
209 * @param string $entity_type_id
|
Chris@17
|
210 * The entity type ID.
|
Chris@17
|
211 * @param int $entity_id
|
Chris@17
|
212 * The entity ID.
|
Chris@17
|
213 * @param int $entity_instance_id
|
Chris@17
|
214 * The entity instance ID. (Instance on the page.)
|
Chris@17
|
215 * @param array $expected_field_states
|
Chris@17
|
216 * Must describe the expected state of all in-place editable fields of the
|
Chris@17
|
217 * given entity instance.
|
Chris@17
|
218 */
|
Chris@17
|
219 protected function assertEntityInstanceFieldStates($entity_type_id, $entity_id, $entity_instance_id, array $expected_field_states) {
|
Chris@17
|
220 // Get all FieldModel states for the entity instance being asserted. This
|
Chris@17
|
221 // ensures that $expected_field_states must describe the state of all fields
|
Chris@17
|
222 // of the entity instance.
|
Chris@17
|
223 $entity_page_id = $entity_type_id . '/' . $entity_id . '[' . $entity_instance_id . ']';
|
Chris@17
|
224 $js_get_all_field_states_for_entity = <<<JS
|
Chris@17
|
225 function () {
|
Chris@17
|
226 var entityCollection = Drupal.quickedit.collections.entities;
|
Chris@17
|
227 var entityModel = entityCollection.get('$entity_page_id');
|
Chris@17
|
228 return entityModel.get('fields').reduce(function (result, fieldModel) {
|
Chris@17
|
229 result[fieldModel.get('fieldID')] = fieldModel.get('state');
|
Chris@17
|
230 return result;
|
Chris@17
|
231 }, {});
|
Chris@17
|
232 }()
|
Chris@17
|
233 JS;
|
Chris@17
|
234 $this->assertEquals($expected_field_states, $this->getSession()->evaluateScript($js_get_all_field_states_for_entity));
|
Chris@17
|
235
|
Chris@17
|
236 // Assert that those fields also have the appropriate DOM decorations.
|
Chris@17
|
237 $expected_field_attributes = [];
|
Chris@17
|
238 foreach ($expected_field_states as $quickedit_field_id => $expected_field_state) {
|
Chris@17
|
239 $expected_field_attributes[$quickedit_field_id] = static::$expectedFieldStateAttributes[$expected_field_state];
|
Chris@17
|
240 }
|
Chris@17
|
241 $this->assertEntityInstanceFieldMarkup($entity_type_id, $entity_id, $entity_instance_id, $expected_field_attributes);
|
Chris@17
|
242 }
|
Chris@17
|
243
|
Chris@17
|
244 /**
|
Chris@17
|
245 * Asserts all in-place editable fields with markup expectations.
|
Chris@17
|
246 *
|
Chris@17
|
247 * @param string $entity_type_id
|
Chris@17
|
248 * The entity type ID.
|
Chris@17
|
249 * @param int $entity_id
|
Chris@17
|
250 * The entity ID.
|
Chris@17
|
251 * @param int $entity_instance_id
|
Chris@17
|
252 * The entity instance ID. (Instance on the page.)
|
Chris@17
|
253 * @param array $expected_field_attributes
|
Chris@17
|
254 * Must describe the expected markup attributes for all given in-place
|
Chris@17
|
255 * editable fields.
|
Chris@17
|
256 */
|
Chris@17
|
257 protected function assertEntityInstanceFieldMarkup($entity_type_id, $entity_id, $entity_instance_id, array $expected_field_attributes) {
|
Chris@17
|
258 $entity_page_id = $entity_type_id . '/' . $entity_id . '[' . $entity_instance_id . ']';
|
Chris@17
|
259 $expected_field_attributes_json = json_encode($expected_field_attributes);
|
Chris@17
|
260 $js_match_field_element_attributes = <<<JS
|
Chris@17
|
261 function () {
|
Chris@17
|
262 var expectations = $expected_field_attributes_json;
|
Chris@17
|
263 var entityCollection = Drupal.quickedit.collections.entities;
|
Chris@17
|
264 var entityModel = entityCollection.get('$entity_page_id');
|
Chris@17
|
265 return entityModel.get('fields').reduce(function (result, fieldModel) {
|
Chris@17
|
266 var fieldID = fieldModel.get('fieldID');
|
Chris@17
|
267 var element = fieldModel.get('el');
|
Chris@17
|
268 var matches = element.webkitMatchesSelector(expectations[fieldID]);
|
Chris@17
|
269 result[fieldID] = matches ? matches : element.outerHTML;
|
Chris@17
|
270 return result;
|
Chris@17
|
271 }, {});
|
Chris@17
|
272 }()
|
Chris@17
|
273 JS;
|
Chris@17
|
274 $result = $this->getSession()->evaluateScript($js_match_field_element_attributes);
|
Chris@17
|
275 foreach ($expected_field_attributes as $quickedit_field_id => $expectation) {
|
Chris@17
|
276 $this->assertSame(TRUE, $result[$quickedit_field_id], 'Field ' . $quickedit_field_id . ' did not match its expectation selector (' . $expectation . '), actual HTML: ' . $result[$quickedit_field_id]);
|
Chris@17
|
277 }
|
Chris@17
|
278 }
|
Chris@17
|
279
|
Chris@17
|
280 /**
|
Chris@17
|
281 * Simulates typing in a 'plain_text' in-place editor.
|
Chris@17
|
282 *
|
Chris@17
|
283 * @param string $css_selector
|
Chris@17
|
284 * The CSS selector to find the DOM element (with the 'contenteditable=true'
|
Chris@17
|
285 * attribute set), to type in.
|
Chris@17
|
286 * @param string $text
|
Chris@17
|
287 * The text to type.
|
Chris@17
|
288 *
|
Chris@17
|
289 * @see \Drupal\quickedit\Plugin\InPlaceEditor\PlainTextEditor
|
Chris@17
|
290 */
|
Chris@17
|
291 protected function typeInPlainTextEditor($css_selector, $text) {
|
Chris@17
|
292 $field = $this->getSession()->getPage()->find('css', $css_selector);
|
Chris@17
|
293 $field->setValue(Key::END . $text);
|
Chris@17
|
294 }
|
Chris@17
|
295
|
Chris@17
|
296 /**
|
Chris@17
|
297 * Simulates typing in an input[type=text] inside a 'form' in-place editor.
|
Chris@17
|
298 *
|
Chris@17
|
299 * @param string $input_name
|
Chris@17
|
300 * The "name" attribute of the input[type=text] to type in.
|
Chris@17
|
301 * @param string $text
|
Chris@17
|
302 * The text to type.
|
Chris@17
|
303 *
|
Chris@17
|
304 * @see \Drupal\quickedit\Plugin\InPlaceEditor\FormEditor
|
Chris@17
|
305 */
|
Chris@17
|
306 protected function typeInFormEditorTextInputField($input_name, $text) {
|
Chris@17
|
307 $input = $this->cssSelect('.quickedit-form-container > .quickedit-form[role="dialog"] form.quickedit-field-form input[type=text][name="' . $input_name . '"]')[0];
|
Chris@17
|
308 $input->setValue($text);
|
Chris@17
|
309 $js_simulate_user_typing = <<<JS
|
Chris@17
|
310 function () {
|
Chris@17
|
311 var el = document.querySelector('.quickedit-form-container > .quickedit-form[role="dialog"] form.quickedit-field-form input[name="$input_name"]');
|
Chris@17
|
312 window.jQuery(el).trigger('formUpdated');
|
Chris@17
|
313 }()
|
Chris@17
|
314 JS;
|
Chris@17
|
315 $this->getSession()->evaluateScript($js_simulate_user_typing);
|
Chris@17
|
316 }
|
Chris@17
|
317
|
Chris@17
|
318 }
|