Chris@17: '.quickedit-field:not(.quickedit-editable):not(.quickedit-candidate):not(.quickedit-highlighted):not(.quickedit-editing):not(.quickedit-changed)', Chris@17: // A field in 'candidate' state may still have the .quickedit-changed class Chris@17: // because when its changes were saved to tempstore, it'll still be changed. Chris@17: // It's just not currently being edited, so that's why it is not in the Chris@17: // 'changed' state. Chris@17: 'candidate' => '.quickedit-field.quickedit-editable.quickedit-candidate:not(.quickedit-highlighted):not(.quickedit-editing)', Chris@17: 'highlighted' => '.quickedit-field.quickedit-editable.quickedit-candidate.quickedit-highlighted:not(.quickedit-editing)', Chris@17: 'activating' => '.quickedit-field.quickedit-editable.quickedit-candidate.quickedit-highlighted.quickedit-editing:not(.quickedit-changed)', Chris@17: 'active' => '.quickedit-field.quickedit-editable.quickedit-candidate.quickedit-highlighted.quickedit-editing:not(.quickedit-changed)', Chris@17: 'changed' => '.quickedit-field.quickedit-editable.quickedit-candidate.quickedit-highlighted.quickedit-editing.quickedit-changed', Chris@17: 'saving' => '.quickedit-field.quickedit-editable.quickedit-candidate.quickedit-highlighted.quickedit-editing.quickedit-changed', Chris@17: ]; Chris@17: Chris@17: /** Chris@17: * Starts in-place editing of the given entity instance. Chris@17: * Chris@17: * @param string $entity_type_id Chris@17: * The entity type ID. Chris@17: * @param int $entity_id Chris@17: * The entity ID. Chris@17: * @param int $entity_instance_id Chris@17: * The entity instance ID. (Instance on the page.) Chris@17: */ Chris@17: protected function startQuickEditViaToolbar($entity_type_id, $entity_id, $entity_instance_id) { Chris@17: $page = $this->getSession()->getPage(); Chris@17: Chris@17: $toolbar_edit_button_selector = '#toolbar-bar .contextual-toolbar-tab button'; Chris@17: $entity_instance_selector = '[data-quickedit-entity-id="' . $entity_type_id . '/' . $entity_id . '"][data-quickedit-entity-instance-id="' . $entity_instance_id . '"]'; Chris@17: $contextual_links_trigger_selector = '[data-contextual-id] > .trigger'; Chris@17: Chris@17: // Assert the original page state does not have the toolbar's "Edit" button Chris@17: // pressed/activated, and hence none of the contextual link triggers should Chris@17: // be visible. Chris@17: $toolbar_edit_button = $page->find('css', $toolbar_edit_button_selector); Chris@17: $this->assertSame('false', $toolbar_edit_button->getAttribute('aria-pressed'), 'The "Edit" button in the toolbar is not yet pressed.'); Chris@17: $this->assertFalse($toolbar_edit_button->hasClass('is-active'), 'The "Edit" button in the toolbar is not yet marked as active.'); Chris@17: foreach ($page->findAll('css', $contextual_links_trigger_selector) as $dom_node) { Chris@17: /** @var \Behat\Mink\Element\NodeElement $dom_node */ Chris@17: $this->assertTrue($dom_node->hasClass('visually-hidden'), 'The contextual links trigger "' . $dom_node->getParent()->getAttribute('data-contextual-id') . '" is hidden.'); Chris@17: } Chris@17: $this->assertTrue(TRUE, 'All contextual links triggers are hidden.'); Chris@17: Chris@17: // Click the "Edit" button in the toolbar. Chris@17: $this->click($toolbar_edit_button_selector); Chris@17: Chris@17: // Assert the toolbar's "Edit" button is now pressed/activated, and hence Chris@17: // all of the contextual link triggers should be visible. Chris@17: $this->assertSame('true', $toolbar_edit_button->getAttribute('aria-pressed'), 'The "Edit" button in the toolbar is pressed.'); Chris@17: $this->assertTrue($toolbar_edit_button->hasClass('is-active'), 'The "Edit" button in the toolbar is marked as active.'); Chris@17: foreach ($page->findAll('css', $contextual_links_trigger_selector) as $dom_node) { Chris@17: /** @var \Behat\Mink\Element\NodeElement $dom_node */ Chris@17: $this->assertFalse($dom_node->hasClass('visually-hidden'), 'The contextual links trigger "' . $dom_node->getParent()->getAttribute('data-contextual-id') . '" is visible.'); Chris@17: } Chris@17: $this->assertTrue(TRUE, 'All contextual links triggers are visible.'); Chris@17: Chris@17: // @todo Press tab key to verify that tabbing is now contrained to only Chris@17: // contextual links triggers: https://www.drupal.org/node/2834776 Chris@17: Chris@17: // Assert that the contextual links associated with the entity's contextual Chris@17: // links trigger are not visible. Chris@17: /** @var \Behat\Mink\Element\NodeElement $entity_contextual_links_container */ Chris@17: $entity_contextual_links_container = $page->find('css', $entity_instance_selector) Chris@17: ->find('css', $contextual_links_trigger_selector) Chris@17: ->getParent(); Chris@17: $this->assertFalse($entity_contextual_links_container->hasClass('open')); Chris@17: $this->assertTrue($entity_contextual_links_container->find('css', 'ul.contextual-links')->hasAttribute('hidden')); Chris@17: Chris@17: // Click the contextual link trigger for the entity we want to Quick Edit. Chris@17: $this->click($entity_instance_selector . ' ' . $contextual_links_trigger_selector); Chris@17: Chris@17: $this->assertTrue($entity_contextual_links_container->hasClass('open')); Chris@17: $this->assertFalse($entity_contextual_links_container->find('css', 'ul.contextual-links')->hasAttribute('hidden')); Chris@17: Chris@17: // Click the "Quick edit" contextual link. Chris@17: $this->click($entity_instance_selector . ' [data-contextual-id] ul.contextual-links li.quickedit a'); Chris@17: Chris@17: // Assert the Quick Edit internal state is correct. Chris@17: $js_condition = <<assertJsCondition($js_condition); Chris@17: } Chris@17: Chris@17: /** Chris@17: * Clicks the 'Save' button in the Quick Edit entity toolbar. Chris@17: */ Chris@17: protected function saveQuickEdit() { Chris@17: $quickedit_entity_toolbar = $this->getSession()->getPage()->findById('quickedit-entity-toolbar'); Chris@17: $save_button = $quickedit_entity_toolbar->find('css', 'button.action-save'); Chris@17: $save_button->press(); Chris@17: $this->assertSame('Saving', $save_button->getText()); Chris@17: } Chris@17: Chris@17: /** Chris@17: * Awaits Quick Edit to be initiated for all instances of the given entity. Chris@17: * Chris@17: * @param string $entity_type_id Chris@17: * The entity type ID. Chris@17: * @param int $entity_id Chris@17: * The entity ID. Chris@17: */ Chris@17: protected function awaitQuickEditForEntity($entity_type_id, $entity_id) { Chris@17: $entity_selector = '[data-quickedit-entity-id="' . $entity_type_id . '/' . $entity_id . '"]'; Chris@17: $condition = "document.querySelectorAll('" . $entity_selector . "').length === document.querySelectorAll('" . $entity_selector . " .quickedit').length"; Chris@17: $this->assertJsCondition($condition, 10000); Chris@17: } Chris@17: Chris@17: /** Chris@17: * Awaits a particular field instance to reach a particular state. Chris@17: * Chris@17: * @param string $entity_type_id Chris@17: * The entity type ID. Chris@17: * @param int $entity_id Chris@17: * The entity ID. Chris@17: * @param int $entity_instance_id Chris@17: * The entity instance ID. (Instance on the page.) Chris@17: * @param string $field_name Chris@17: * The field name. Chris@17: * @param string $langcode Chris@17: * The language code. Chris@17: * @param string $awaited_state Chris@17: * One of the possible field states. Chris@17: */ Chris@17: protected function awaitEntityInstanceFieldState($entity_type_id, $entity_id, $entity_instance_id, $field_name, $langcode, $awaited_state) { Chris@17: $entity_page_id = $entity_type_id . '/' . $entity_id . '[' . $entity_instance_id . ']'; Chris@17: $logical_field_id = $entity_type_id . '/' . $entity_id . '/' . $field_name . '/' . $langcode; Chris@17: $this->assertJsCondition("Drupal.quickedit.collections.entities.get('$entity_page_id').get('fields').findWhere({logicalFieldID: '$logical_field_id'}).get('state') === '$awaited_state';"); Chris@17: } Chris@17: Chris@17: /** Chris@17: * Asserts the state of the Quick Edit entity toolbar. Chris@17: * Chris@17: * @param string $expected_entity_label Chris@17: * The expected label in the Quick Edit Entity Toolbar. Chris@17: */ Chris@17: protected function assertQuickEditEntityToolbar($expected_entity_label, $expected_field_label) { Chris@17: $quickedit_entity_toolbar = $this->getSession()->getPage()->findById('quickedit-entity-toolbar'); Chris@17: // We cannot use ->getText() because it also returns the text of all child Chris@17: // nodes. We also cannot use XPath to select text node in Selenium. So we Chris@17: // use JS expression to select only the text node. Chris@17: $this->assertSame($expected_entity_label, $this->getSession()->evaluateScript("return window.jQuery('#quickedit-entity-toolbar .quickedit-toolbar-label').clone().children().remove().end().text();")); Chris@17: if ($expected_field_label !== NULL) { Chris@17: $field_label = $quickedit_entity_toolbar->find('css', '.quickedit-toolbar-label > .field'); Chris@17: // Only try to find the text content of the element if it was actually Chris@17: // found; otherwise use the returned value for assertion. This helps Chris@17: // us find a more useful stack/error message from testbot instead of the Chris@17: // trimmed partial exception stack. Chris@17: if ($field_label) { Chris@17: $field_label = $field_label->getText(); Chris@17: } Chris@17: $this->assertSame($expected_field_label, $field_label); Chris@17: } Chris@17: else { Chris@17: $this->assertFalse($quickedit_entity_toolbar->find('css', '.quickedit-toolbar-label > .field')); Chris@17: } Chris@17: } Chris@17: Chris@17: /** Chris@17: * Asserts all EntityModels (entity instances) on the page. Chris@17: * Chris@17: * @param array $expected_entity_states Chris@17: * Must describe the expected state of all in-place editable entity Chris@17: * instances on the page. Chris@17: * Chris@17: * @see Drupal.quickedit.EntityModel Chris@17: */ Chris@17: protected function assertEntityInstanceStates(array $expected_entity_states) { Chris@17: $js_get_all_field_states_for_entity = <<assertSame($expected_entity_states, $this->getSession()->evaluateScript($js_get_all_field_states_for_entity)); Chris@17: } Chris@17: Chris@17: /** Chris@17: * Asserts all FieldModels for the given entity instance. Chris@17: * Chris@17: * @param string $entity_type_id Chris@17: * The entity type ID. Chris@17: * @param int $entity_id Chris@17: * The entity ID. Chris@17: * @param int $entity_instance_id Chris@17: * The entity instance ID. (Instance on the page.) Chris@17: * @param array $expected_field_states Chris@17: * Must describe the expected state of all in-place editable fields of the Chris@17: * given entity instance. Chris@17: */ Chris@17: protected function assertEntityInstanceFieldStates($entity_type_id, $entity_id, $entity_instance_id, array $expected_field_states) { Chris@17: // Get all FieldModel states for the entity instance being asserted. This Chris@17: // ensures that $expected_field_states must describe the state of all fields Chris@17: // of the entity instance. Chris@17: $entity_page_id = $entity_type_id . '/' . $entity_id . '[' . $entity_instance_id . ']'; Chris@17: $js_get_all_field_states_for_entity = <<assertEquals($expected_field_states, $this->getSession()->evaluateScript($js_get_all_field_states_for_entity)); Chris@17: Chris@17: // Assert that those fields also have the appropriate DOM decorations. Chris@17: $expected_field_attributes = []; Chris@17: foreach ($expected_field_states as $quickedit_field_id => $expected_field_state) { Chris@17: $expected_field_attributes[$quickedit_field_id] = static::$expectedFieldStateAttributes[$expected_field_state]; Chris@17: } Chris@17: $this->assertEntityInstanceFieldMarkup($entity_type_id, $entity_id, $entity_instance_id, $expected_field_attributes); Chris@17: } Chris@17: Chris@17: /** Chris@17: * Asserts all in-place editable fields with markup expectations. Chris@17: * Chris@17: * @param string $entity_type_id Chris@17: * The entity type ID. Chris@17: * @param int $entity_id Chris@17: * The entity ID. Chris@17: * @param int $entity_instance_id Chris@17: * The entity instance ID. (Instance on the page.) Chris@17: * @param array $expected_field_attributes Chris@17: * Must describe the expected markup attributes for all given in-place Chris@17: * editable fields. Chris@17: */ Chris@17: protected function assertEntityInstanceFieldMarkup($entity_type_id, $entity_id, $entity_instance_id, array $expected_field_attributes) { Chris@17: $entity_page_id = $entity_type_id . '/' . $entity_id . '[' . $entity_instance_id . ']'; Chris@17: $expected_field_attributes_json = json_encode($expected_field_attributes); Chris@17: $js_match_field_element_attributes = <<getSession()->evaluateScript($js_match_field_element_attributes); Chris@17: foreach ($expected_field_attributes as $quickedit_field_id => $expectation) { Chris@17: $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: } Chris@17: } Chris@17: Chris@17: /** Chris@17: * Simulates typing in a 'plain_text' in-place editor. Chris@17: * Chris@17: * @param string $css_selector Chris@17: * The CSS selector to find the DOM element (with the 'contenteditable=true' Chris@17: * attribute set), to type in. Chris@17: * @param string $text Chris@17: * The text to type. Chris@17: * Chris@17: * @see \Drupal\quickedit\Plugin\InPlaceEditor\PlainTextEditor Chris@17: */ Chris@17: protected function typeInPlainTextEditor($css_selector, $text) { Chris@17: $field = $this->getSession()->getPage()->find('css', $css_selector); Chris@17: $field->setValue(Key::END . $text); Chris@17: } Chris@17: Chris@17: /** Chris@17: * Simulates typing in an input[type=text] inside a 'form' in-place editor. Chris@17: * Chris@17: * @param string $input_name Chris@17: * The "name" attribute of the input[type=text] to type in. Chris@17: * @param string $text Chris@17: * The text to type. Chris@17: * Chris@17: * @see \Drupal\quickedit\Plugin\InPlaceEditor\FormEditor Chris@17: */ Chris@17: protected function typeInFormEditorTextInputField($input_name, $text) { Chris@17: $input = $this->cssSelect('.quickedit-form-container > .quickedit-form[role="dialog"] form.quickedit-field-form input[type=text][name="' . $input_name . '"]')[0]; Chris@17: $input->setValue($text); Chris@17: $js_simulate_user_typing = << .quickedit-form[role="dialog"] form.quickedit-field-form input[name="$input_name"]'); Chris@17: window.jQuery(el).trigger('formUpdated'); Chris@17: }() Chris@17: JS; Chris@17: $this->getSession()->evaluateScript($js_simulate_user_typing); Chris@17: } Chris@17: Chris@17: }