paragraphs-8.x-1.11/tests/src/FunctionalJavascript/ParagraphsClientsideButtonsTest.php

<?php

namespace Drupal\Tests\paragraphs\FunctionalJavascript;

use Drupal\field\Entity\FieldStorageConfig;
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
use Drupal\Tests\field_ui\Traits\FieldUiTestTrait;
use Drupal\Tests\paragraphs\Traits\ParagraphsCoreVersionUiTestTrait;
use Drupal\Tests\paragraphs\Traits\ParagraphsLastEntityQueryTrait;

/**
 * Test paragraphs user interface.
 *
 * @group paragraphs
 */
class ParagraphsClientsideButtonsTest extends WebDriverTestBase {

  use LoginAdminTrait;
  use FieldUiTestTrait;
  use ParagraphsTestBaseTrait;
  use ParagraphsCoreVersionUiTestTrait;
  use ParagraphsLastEntityQueryTrait;

  /**
   * {@inheritdoc}
   */
  protected static $modules = [
    'node',
    'paragraphs_test',
    'paragraphs',
    'field',
    'field_ui',
    'block',
    'link',
  ];

  /**
   * {@inheritdoc}
   */
  protected $defaultTheme = 'stark';

  /**
   * {@inheritdoc}
   */
  protected function setUp(): void {
    parent::setUp();
    $this->placeDefaultBlocks();
  }

  /**
   * Tests the "Add above" button.
   */
  public function testAddParagraphAboveButton() {
    $session = $this->getSession();
    $page = $session->getPage();
    $assert_session = $this->assertSession();

    $this->addParagraphedContentType('paragraphed_test');
    $this->loginAsAdmin([
      'administer content types',
      'administer node form display',
      'edit any paragraphed_test content',
      'create paragraphed_test content',
    ]);
    // Set the add mode on the content type to modal form widget.
    $form_display = \Drupal::service('entity_display.repository')->getFormDisplay('node', 'paragraphed_test');
    $form_display->setComponent('field_paragraphs', [
      'type' => 'paragraphs',
      'settings' => [
        'title' => 'Paragraph',
        'title_plural' => 'Paragraphs',
        'edit_mode' => 'closed',
        'closed_mode' => 'summary',
        'autocollapse' => 'none',
        'add_mode' => 'modal',
        'form_display_mode' => 'default',
        'default_paragraph_type' => '_none',
        'features' => [
          'duplicate' => 'duplicate',
          'duplicate' => 'duplicate',
          'collapse_edit_all' => 'collapse_edit_all',
          'add_above' => 'add_above',
        ],
        'third_party_settings' => [],
        'region' => 'content',
      ],
    ])
      ->save();
    // Add a Paragraph type.
    $this->addParagraphsType('text');
    // Add a text field to the text_paragraph type.
    $this->drupalGet('admin/structure/paragraphs_type/text/fields/add-field');
    $page->selectFieldOption('new_storage_type', 'plain_text');
    $this->assertSession()->waitForElementVisible('css', '#string');
    if ($this->coreVersion('10.3')) {
      $page->pressButton('Continue');
    }
    $page->selectFieldOption('group_field_options_wrapper', 'string');
    $page->fillField('label', 'Text');
    $this->assertSession()->waitForElementVisible('css', '#edit-name-machine-name-suffix .link');
    $page->pressButton('Edit');
    $page->fillField('field_name', 'text');
    $page->pressButton('Continue');
    $page->pressButton('Save settings');
    // Add a paragraphed test.
    $this->drupalGet('node/add/paragraphed_test');
    // Add 3 paragraphs.
    $page->pressButton('Add Paragraph');
    $dialog = $page->find('xpath', '//div[contains(@class, "ui-dialog")]');
    $dialog->pressButton('text');
    $assert_session->assertWaitOnAjaxRequest();
    $page->pressButton('Add Paragraph');
    $dialog = $page->find('xpath', '//div[contains(@class, "ui-dialog")]');
    $dialog->pressButton('text');
    $assert_session->assertWaitOnAjaxRequest();
    $page->pressButton('Add Paragraph');
    $dialog = $page->find('xpath', '//div[contains(@class, "ui-dialog")]');
    $dialog->pressButton('text');
    $assert_session->assertWaitOnAjaxRequest();
    //$session->wait(2000);
    // Check that the add above button has the button--small class.
    $page->find('xpath', '//input[@class="paragraphs-dropdown-action paragraphs-dropdown-action--add-above button button--small js-form-submit form-submit"]');
    // At this point we should have 3 injected "Add above" buttons.
    $all_add_above_buttons = $page->findAll('css', '#edit-field-paragraphs-wrapper input.paragraphs-dropdown-action--add-above');
    $this->assertEquals(3, count($all_add_above_buttons));
    // Save the node with some text in each paragraph so we can refer to them
    // easily later.
    $edit = [
      'title[0][value]' => 'Example title',
      'field_paragraphs[0][subform][field_text][0][value]' => 'First text',
      'field_paragraphs[1][subform][field_text][0][value]' => 'Second text',
      'field_paragraphs[2][subform][field_text][0][value]' => 'Third text',
    ];
    $this->submitForm($edit, 'Save');
    $node_id = $this->getLastEntityOfType('node');

    // Make sure we honor the widget settings when injecting the button.
    $component = $form_display->getComponent('field_paragraphs');
    unset($component['settings']['features']['add_above']);
    $form_display->setComponent('field_paragraphs', $component)->save();
    $this->drupalGet("/node/{$node_id}/edit");
    $all_add_above_buttons = $page->findAll('css', '#edit-field-paragraphs-wrapper input.paragraphs-dropdown-action--add-above');
    $this->assertEquals(0, count($all_add_above_buttons));

    // Enable it back and test its behavior.
    $component = $form_display->getComponent('field_paragraphs');
    $component['settings']['features']['add_above'] = 'add_above';
    $form_display->setComponent('field_paragraphs', $component)->save();
    $this->drupalGet("/node/{$node_id}/edit");
    $edit_all_button = $assert_session->buttonExists('field_paragraphs_edit_all');
    $edit_all_button->press();
    $session->wait(2000);
    $assert_session->assertWaitOnAjaxRequest();

    // Before inserting the deltas are the ones we expect.
    $first_original_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(1)');
    $delta_paragraph1 = $assert_session->elementExists('css', 'td.delta-order select', $first_original_row)->getValue();
    $this->assertEquals(0, $delta_paragraph1);
    $second_original_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(2)');
    $delta_paragraph2 = $assert_session->elementExists('css', 'td.delta-order select', $second_original_row)->getValue();
    $this->assertEquals(1, $delta_paragraph2);
    $third_original_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(3)');
    $delta_paragraph3 = $assert_session->elementExists('css', 'td.delta-order select', $third_original_row)->getValue();
    $this->assertEquals(2, $delta_paragraph3);

    // Insert a new paragraph above paragraph 2.
    $dropdown = $assert_session->elementExists('css', '.paragraphs-dropdown', $second_original_row);
    $dropdown->click();
    $add_above_button = $assert_session->elementExists('css', 'input.paragraphs-dropdown-action--add-above', $second_original_row);
    $add_above_button->click();
    $dialog = $page->find('xpath', '//div[contains(@class, "ui-dialog")]');
    $dialog->pressButton('text');
    $assert_session->assertWaitOnAjaxRequest();
    $page->fillField('field_paragraphs[3][subform][field_text][0][value]', 'Paragraph added above');

    // Add a new paragraph in order to test that the new paragraph is added at the bottom.
    $page->pressButton('Add Paragraph');
    $dialog = $page->find('xpath', '//div[contains(@class, "ui-dialog")]');
    $dialog->pressButton('text');
    $assert_session->assertWaitOnAjaxRequest();
    $page->fillField('field_paragraphs[4][subform][field_text][0][value]', 'New paragraph');

    // First row after insertion.
    $first_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(1)');
    $text_input_first_row = $assert_session->elementExists('css', 'input.form-text', $first_row);
    $this->assertEquals('First text', $text_input_first_row->getValue());
    $delta_paragraph1 = $assert_session->elementExists('css', 'td.delta-order select', $first_row)->getValue();
    $this->assertEquals(0, $delta_paragraph1);
    // Second row after insertion.
    $second_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(2)');
    $text_input_second_row = $assert_session->elementExists('css', 'input.form-text', $second_row);
    $this->assertEquals('Paragraph added above', $text_input_second_row->getValue());
    $delta_paragraph2 = $assert_session->elementExists('css', 'td.delta-order select', $second_row)->getValue();
    $this->assertEquals(1, $delta_paragraph2);
    // Third row after insertion.
    $third_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(3)');
    $text_input_third_row = $assert_session->elementExists('css', 'input.form-text', $third_row);
    $this->assertEquals('Second text', $text_input_third_row->getValue());
    $delta_paragraph3 = $assert_session->elementExists('css', 'td.delta-order select', $third_row)->getValue();
    $this->assertEquals(2, $delta_paragraph3);
    // Fourth row after insertion.
    $fourth_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(4)');
    $text_input_fourth_row = $assert_session->elementExists('css', 'input.form-text', $fourth_row);
    $this->assertEquals('Third text', $text_input_fourth_row->getValue());
    $delta_paragraph4 = $assert_session->elementExists('css', 'td.delta-order select', $fourth_row)->getValue();
    $this->assertEquals(3, $delta_paragraph4);
    $fifth_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(5)');
    $text_input_fifth_row = $assert_session->elementExists('css', 'input.form-text', $fifth_row);
    $this->assertEquals('New paragraph', $text_input_fifth_row->getValue());
    $delta_paragraph5 = $assert_session->elementExists('css', 'td.delta-order select', $fifth_row)->getValue();
    $this->assertEquals(4, $delta_paragraph5);

    // Let's have more fun with some nested paragraphs.
    $this->addParagraphsType('rich_paragraph');
    $this->addFieldtoParagraphType('rich_paragraph', 'field_intermediate_text', 'text');
    $this->addFieldtoParagraphType('rich_paragraph', 'field_nested_paragraphs', 'entity_reference_revisions', ['target_type' => 'paragraph']);
    $form_display = \Drupal::service('entity_display.repository')->getFormDisplay('paragraph', 'rich_paragraph');
    $form_display->setComponent('field_nested_paragraphs', [
        'type' => 'paragraphs',
        'settings' => [
          'title' => 'Paragraph',
          'title_plural' => 'Paragraphs',
          'edit_mode' => 'closed',
          'closed_mode' => 'summary',
          'autocollapse' => 'none',
          'add_mode' => 'modal',
          'form_display_mode' => 'default',
          'default_paragraph_type' => '_none',
          'features' => [
            'duplicate' => 'duplicate',
            'collapse_edit_all' => 'collapse_edit_all',
            'add_above' => 'add_above',
          ],
          'third_party_settings' => [],
          'region' => 'content',
        ],
      ])
      ->save();

    $this->drupalGet("/node/{$node_id}/edit");
    $edit_all_button = $assert_session->buttonExists('field_paragraphs_edit_all');
    $edit_all_button->press();
    $session->wait(2000);
    $assert_session->assertWaitOnAjaxRequest();

    // Initially only 3 paragraphs and 3 buttons.
    $all_add_above_buttons = $page->findAll('css', '#edit-field-paragraphs-wrapper input.paragraphs-dropdown-action--add-above');
    $this->assertEquals(3, count($all_add_above_buttons));

    $first_original_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(1)');
    $second_original_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(2)');
    $third_original_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(3)');

    // Insert a rich (host) paragraph above row 2.
    $dropdown = $assert_session->elementExists('css', '.paragraphs-dropdown', $second_original_row);
    $dropdown->click();
    $add_above_button = $assert_session->elementExists('css', 'input.paragraphs-dropdown-action--add-above', $second_original_row);
    $add_above_button->click();
    $dialog = $page->find('xpath', '//div[contains(@class, "ui-dialog")]');
    $dialog->pressButton('rich_paragraph');
    $assert_session->assertWaitOnAjaxRequest();
    $rich_paragraph_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(2)');
    $add_paragraph_rich_row = $assert_session->elementExists('css', 'input[name="button_add_modal"]', $rich_paragraph_row);

    // Add a text nested paragraph.
    $add_paragraph_rich_row->click();
    $dialog = $page->find('xpath', '//div[contains(@class, "ui-dialog")]');
    $dialog->pressButton('text');
    $assert_session->assertWaitOnAjaxRequest();

    // 5 paragraphs, we expect 4 injected buttons as the cardinality of the
    // nested paragraph is one and we cannot Add Above.
    $all_add_above_buttons = $page->findAll('css', '#edit-field-paragraphs-wrapper input.paragraphs-dropdown-action--add-above');
    $this->assertEquals(4, count($all_add_above_buttons));

    // Remove the new added Paragraph.
    $rich_paragraph_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr:nth-of-type(2) .field--name-field-nested-paragraphs tr.draggable');
    $dropdown = $assert_session->elementExists('css', '.paragraphs-dropdown', $rich_paragraph_row);
    $dropdown->click();
    $remove_button = $assert_session->buttonExists('field_paragraphs_3_subform_field_nested_paragraphs_0_remove');
    $remove_button->click();
    $assert_session->assertWaitOnAjaxRequest();
    // Set the config to allow more than one Paragraph.
    $field_storage = FieldStorageConfig::loadByName('paragraph', 'field_nested_paragraphs');
    $field_storage->setCardinality(-1);
    $field_storage->save();
    // Add the Paragraph back.
    $add_paragraph_rich_row->click();
    $dialog = $page->find('xpath', '//div[contains(@class, "ui-dialog")]');
    $dialog->pressButton('text');
    $assert_session->assertWaitOnAjaxRequest();

    // 5 paragraphs, we expect 5 injected buttons as the cardinality of the
    // nested paragraph is unlimited.
    $all_add_above_buttons = $page->findAll('css', '#edit-field-paragraphs-wrapper input.paragraphs-dropdown-action--add-above');
    $this->assertEquals(5, count($all_add_above_buttons));

    // Set some text to the normally-added paragraphs so we don't have a false
    // positive while checking for empty texts.
    $text_input_first_nested_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(2) > td:nth-of-type(2)  > div > div > div > div:nth-of-type(2) > div input.form-text');
    $text_input_first_nested_row->setValue('Nested 1 - text 1');
    $text_input_second_nested_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(2) > td:nth-of-type(2)  > div > div > div > div:nth-of-type(2) > div:nth-of-type(2) > div > div input.form-text');
    $text_input_second_nested_row->setValue('Nested 2 - text 1');

    // Insert a text paragraph above the first nested paragraph.
    $first_nested_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(2)');
    $dropdown = $assert_session->elementExists('css', '.paragraphs-dropdown', $first_nested_row);
    $dropdown->click();
    $add_above_button = $assert_session->elementExists('css', 'input.paragraphs-dropdown-action--add-above', $first_nested_row);
    $add_above_button->click();
    $dialog = $page->find('xpath', '//div[contains(@class, "ui-dialog")]');
    $dialog->pressButton('text');
    $assert_session->assertWaitOnAjaxRequest();
    // Check the new element is where we expect it to be.
    $new_element_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(2)');
    $text_input_new_element_row = $assert_session->elementExists('css', 'input.form-text', $new_element_row);
    $this->assertEquals('', $text_input_new_element_row->getValue());
    // We have one more injected add_more button.
    $all_add_above_buttons = $page->findAll('css', '#edit-field-paragraphs-wrapper input.paragraphs-dropdown-action--add-above');
    $this->assertEquals(6, count($all_add_above_buttons));
    $this->submitForm([], 'Save');

    $this->drupalGet("/node/{$node_id}/edit");
    $edit_all_button = $assert_session->buttonExists('field_paragraphs_edit_all');
    $edit_all_button->press();
    $session->wait(2000);
    $assert_session->assertWaitOnAjaxRequest();
    // Insert a Paragraph above.
    $first_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(1)');
    $dropdown = $assert_session->elementExists('css', '.paragraphs-dropdown', $first_row);
    $dropdown->click();
    $add_above_button = $assert_session->elementExists('css', 'input.paragraphs-dropdown-action--add-above', $first_row);
    $add_above_button->click();
    $dialog = $page->find('xpath', '//div[contains(@class, "ui-dialog")]');
    $dialog->pressButton('text');
    $assert_session->assertWaitOnAjaxRequest();
    $all_add_above_buttons = $page->findAll('css', '#edit-field-paragraphs-wrapper input.paragraphs-dropdown-action--add-above');
    $this->assertEquals(7, count($all_add_above_buttons));
    // Remove the new added Paragraph.
    $first_row = $assert_session->elementExists('css', '#field-paragraphs-add-more-wrapper tr.draggable:nth-of-type(1)');
    $dropdown = $assert_session->elementExists('css', '.paragraphs-dropdown', $first_row);
    $dropdown->click();
    $remove_button = $assert_session->buttonExists('field_paragraphs_5_remove');
    $remove_button->click();
    $assert_session->assertWaitOnAjaxRequest();
    $all_add_above_buttons = $page->findAll('css', '#edit-field-paragraphs-wrapper input.paragraphs-dropdown-action--add-above');
    $this->assertEquals(6, count($all_add_above_buttons));
    // Add a Paragraph above again.
    $dropdown = $assert_session->elementExists('css', '.paragraphs-dropdown', $first_row);
    $dropdown->click();
    $add_above_button = $assert_session->elementExists('css', 'input.paragraphs-dropdown-action--add-above', $first_row);
    $add_above_button->click();
    $dialog = $page->find('xpath', '//div[contains(@class, "ui-dialog")]');
    $dialog->pressButton('text');
    $assert_session->assertWaitOnAjaxRequest();
    $all_add_above_buttons = $page->findAll('css', '#edit-field-paragraphs-wrapper input.paragraphs-dropdown-action--add-above');
    $this->assertEquals(7, count($all_add_above_buttons));
  }

}