www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditJavascriptTestBase.php

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