ParagraphsAddWidgetTest.php

<?php

namespace Drupal\Tests\paragraphs\FunctionalJavascript;

use Drupal\Core\Entity\Entity\EntityFormDisplay;
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
use Drupal\Tests\field_ui\Traits\FieldUiTestTrait;
use Drupal\Tests\paragraphs\Traits\ParagraphsCoreVersionUiTestTrait;

/**
 * Test paragraphs user interface.
 *
 * @group paragraphs
 */
class ParagraphsAddWidgetTest extends WebDriverTestBase {
  use LoginAdminTrait;
  use FieldUiTestTrait;
  use ParagraphsTestBaseTrait;
  use ParagraphsCoreVersionUiTestTrait;

  /**
   * Modules to enable.
   *
   * @var array
   */
  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 widget button with modal form.
   */
  public function testAddWidgetButton() {
    $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.
    $this
      ->drupalGet('admin/structure/types/manage/paragraphed_test/form-display');
    $page = $this
      ->getSession()
      ->getPage();
    $page
      ->pressButton('field_paragraphs_settings_edit');
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();
    $edit = [
      'fields[field_paragraphs][settings_edit_form][settings][edit_mode]' => 'closed',
      'fields[field_paragraphs][settings_edit_form][settings][add_mode]' => 'modal',
    ];
    $this
      ->submitForm($edit, 'Update');
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();
    $this
      ->submitForm([], 'Save');

    // Add a Paragraph type.
    $paragraph_type = 'text_paragraph';
    $this
      ->addParagraphsType($paragraph_type);
    $this
      ->addParagraphsType('text');

    // Add icons to the paragraphs types.
    $icon_one = $this
      ->addParagraphsTypeIcon($paragraph_type);
    $icon_two = $this
      ->addParagraphsTypeIcon('text');

    // Add a text field to the text_paragraph type.
    $this
      ->drupalGet('admin/structure/paragraphs_type/' . $paragraph_type . '/fields/add-field');
    $page
      ->selectFieldOption('new_storage_type', 'formatted_text');
    if ($this
      ->coreVersion('10.3')) {
      $page
        ->pressButton('Continue');
    }
    else {
      $this
        ->assertSession()
        ->waitForElementVisible('css', '#text_long');
    }
    $page
      ->selectFieldOption('group_field_options_wrapper', 'text_long');
    $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');

    // Create paragraph type Nested test.
    $this
      ->addParagraphsType('nested_test');
    $this
      ->drupalGet('/admin/structure/paragraphs_type/nested_test/fields/add-field');
    $page
      ->selectFieldOption('new_storage_type', 'field_ui:entity_reference_revisions:paragraph');
    if ($this
      ->coreVersion('10.3')) {
      $page
        ->pressButton('Continue');
    }
    $page
      ->fillField('label', 'Paragraphs');
    $this
      ->assertSession()
      ->waitForElementVisible('css', '#edit-name-machine-name-suffix .link');
    $page
      ->pressButton('Edit');
    $page
      ->fillField('field_name', 'paragraphs');
    $page
      ->pressButton('Continue');
    $page
      ->pressButton('Save settings');

    // Set the settings for the field in the nested paragraph.
    $component = [
      'type' => 'paragraphs',
      'region' => 'content',
      'settings' => [
        'edit_mode' => 'closed',
        'add_mode' => 'modal',
        'form_display_mode' => 'default',
      ],
    ];
    EntityFormDisplay::load('paragraph.nested_test.default')
      ->setComponent('field_paragraphs', $component)
      ->save();

    // Add a paragraphed test.
    $this
      ->drupalGet('node/add/paragraphed_test');

    // Add a nested paragraph with the add widget.
    $page
      ->pressButton('Add Paragraph');
    $this
      ->assertSession()
      ->elementTextContains('css', '.ui-dialog-title', 'Add Paragraph');
    $paragraphs_dialog = $this
      ->assertSession()
      ->waitForElementVisible('css', 'div.ui-dialog');
    $paragraphs_dialog
      ->pressButton('nested_test');
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // Verify that the paragraphs type icons are being displayed.
    $button_one = $this
      ->assertSession()
      ->buttonExists($paragraph_type);
    $button_two = $this
      ->assertSession()
      ->buttonExists('text');
    $this
      ->assertStringContainsString($icon_one
      ->getFilename(), $button_one
      ->getAttribute('style'));
    $this
      ->assertStringContainsString($icon_two
      ->getFilename(), $button_two
      ->getAttribute('style'));

    // Find the add button in the nested paragraph with xpath.
    $element = $this
      ->xpath('//div[contains(@class, "form-item")]/div/div/div[contains(@class, "paragraph-type-add-modal")]/input');
    $element[0]
      ->click();

    // Add a text inside the nested paragraph.
    $page = $this
      ->getSession()
      ->getPage();
    $dialog = $page
      ->find('xpath', '//div[contains(@class, "ui-dialog")]');
    $dialog
      ->pressButton('text');
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();
    $edit = [
      'title[0][value]' => 'Example title',
    ];
    $this
      ->submitForm($edit, 'Save');

    // Check the created paragraphed test.
    $this
      ->assertSession()
      ->pageTextContainsOnce('paragraphed_test Example title has been created.');
    $this
      ->assertSession()
      ->elementTextContains('css', '.paragraph--type--nested-test', 'Paragraphs');
    $this
      ->assertSession()
      ->elementTextContains('css', '.paragraph--type--text', '');

    // Add a paragraphs field with another paragraphs widget title to the
    // paragraphed_test content type.
    $this
      ->addParagraphsField('paragraphed_test', 'field_paragraphs_two', 'node');
    $settings = [
      'title' => 'Renamed paragraph',
      'title_plural' => 'Renamed paragraphs',
      'add_mode' => 'modal',
    ];
    $this
      ->setParagraphsWidgetSettings('paragraphed_test', 'field_paragraphs_two', $settings);

    // Check that the "add" buttons and modal form windows are labeled
    // correctly.
    $this
      ->drupalGet('node/add/paragraphed_test');
    $page
      ->pressButton('Add Paragraph');
    $this
      ->assertSession()
      ->elementTextContains('css', '.ui-dialog-title', 'Add Paragraph');
    $this
      ->assertSession()
      ->elementTextNotContains('css', '.ui-dialog-title', 'Add Renamed paragraph');
    $this
      ->assertSession()
      ->elementExists('css', '.ui-dialog-titlebar-close')
      ->press();
    $page
      ->pressButton('Add Renamed paragraph');
    $this
      ->assertSession()
      ->elementTextContains('css', '.ui-dialog-title', 'Add Renamed paragraph');
    $this
      ->assertSession()
      ->elementTextNotContains('css', '.ui-dialog-title', 'Add Paragraph');
  }

  /**
   * Test Modal add widget with hidden delta field.
   */
  public function testModalAddWidgetDelta() {
    $content_type = 'test_modal_delta';
    $this
      ->addParagraphedContentType($content_type);
    $this
      ->loginAsAdmin([
      "administer content types",
      "administer node form display",
      "edit any {$content_type} content",
      "create {$content_type} content",
    ]);

    // Set the add mode on the content type to modal form widget.
    $this
      ->drupalGet("admin/structure/types/manage/{$content_type}/form-display");
    $page = $this
      ->getSession()
      ->getPage();
    $page
      ->pressButton('field_paragraphs_settings_edit');
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();
    $edit = [
      'fields[field_paragraphs][settings_edit_form][settings][edit_mode]' => 'closed',
      'fields[field_paragraphs][settings_edit_form][settings][add_mode]' => 'modal',
    ];
    $this
      ->submitForm($edit, 'Update');
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();
    $this
      ->submitForm([], 'Save');

    // Add a Paragraph types.
    $this
      ->addParagraphsType('test_1');
    $this
      ->addParagraphsType('test_2');
    $this
      ->addParagraphsType('test_3');

    // Add a text field to the text_paragraph type.
    $this
      ->drupalGet('admin/structure/paragraphs_type/test_1/fields/add-field');
    $page
      ->selectFieldOption('new_storage_type', 'formatted_text');
    if ($this
      ->coreVersion('10.3')) {
      $page
        ->pressButton('Continue');
    }
    else {
      $this
        ->assertSession()
        ->waitForElementVisible('css', '#text_long');
    }
    $page
      ->selectFieldOption('group_field_options_wrapper', 'text_long');
    $page
      ->fillField('label', 'Text');
    $this
      ->assertSession()
      ->waitForElementVisible('css', '#edit-name-machine-name-suffix .link');
    $page
      ->pressButton('Edit');
    $page
      ->fillField('field_name', 'text_1');
    $page
      ->pressButton('Continue');
    $page
      ->pressButton('Save settings');
    $this
      ->drupalGet('admin/structure/paragraphs_type/test_2/fields/add-field');
    $page
      ->selectFieldOption('new_storage_type', 'formatted_text');
    if ($this
      ->coreVersion('10.3')) {
      $page
        ->pressButton('Continue');
    }
    else {
      $this
        ->assertSession()
        ->waitForElementVisible('css', '#text_long');
    }
    $page
      ->selectFieldOption('group_field_options_wrapper', 'text_long');
    $page
      ->fillField('label', 'Text');
    $this
      ->assertSession()
      ->waitForElementVisible('css', '#edit-name-machine-name-suffix .link');
    $page
      ->pressButton('Edit');
    $page
      ->fillField('field_name', 'text_2');
    if ($this
      ->coreVersion('10.2')) {
      $page
        ->pressButton('Continue');
      $page
        ->pressButton('Save settings');
    }
    else {
      $page
        ->pressButton('Save and continue');
      $page
        ->pressButton('Save field settings');
      $page
        ->pressButton('Save settings');
    }
    $this
      ->drupalGet('admin/structure/paragraphs_type/test_3/fields/add-field');
    $page
      ->selectFieldOption('new_storage_type', 'formatted_text');
    if ($this
      ->coreVersion('10.3')) {
      $page
        ->pressButton('Continue');
    }
    else {
      $this
        ->assertSession()
        ->waitForElementVisible('css', '#text_long');
    }
    $page
      ->selectFieldOption('group_field_options_wrapper', 'text_long');
    $page
      ->fillField('label', 'Text');
    $this
      ->assertSession()
      ->waitForElementVisible('css', '#edit-name-machine-name-suffix .link');
    $page
      ->pressButton('Edit');
    $page
      ->fillField('field_name', 'test_3');
    $page
      ->pressButton('Continue');
    $page
      ->pressButton('Save settings');

    // Create paragraph type Nested test.
    $this
      ->addParagraphsType('test_nested');
    $this
      ->drupalGet('/admin/structure/paragraphs_type/test_nested/fields/add-field');
    $page
      ->selectFieldOption('new_storage_type', 'field_ui:entity_reference_revisions:paragraph');
    if ($this
      ->coreVersion('10.3')) {
      $page
        ->pressButton('Continue');
    }
    $page
      ->fillField('label', 'Paragraphs');
    $this
      ->assertSession()
      ->waitForElementVisible('css', '#edit-name-machine-name-suffix .link');
    $page
      ->pressButton('Edit');
    $page
      ->fillField('field_name', 'paragraphs');
    $page
      ->pressButton('Continue');
    $page
      ->pressButton('Save settings');

    // Set the settings for the field in the nested paragraph.
    $component = [
      'type' => 'paragraphs',
      'region' => 'content',
      'settings' => [
        'edit_mode' => 'closed',
        'add_mode' => 'modal',
        'form_display_mode' => 'default',
      ],
    ];
    EntityFormDisplay::load('paragraph.test_nested.default')
      ->setComponent('field_paragraphs', $component)
      ->save();

    // Add a paragraphed test.
    $this
      ->drupalGet('node/add/test_modal_delta');
    $page
      ->fillField('title[0][value]', 'Test modal add widget delta');

    // Add a nested paragraph with the add widget - use negative delta.
    //
    // This case covers full execution of
    // ParagraphsWidget::prepareDeltaPosition() when list is empty.
    $this
      ->getSession()
      ->executeScript("jQuery('input.paragraph-type-add-delta').last().val(-100)");
    $page
      ->find('xpath', '//*[@name="button_add_modal"]')
      ->click();
    $page
      ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_nested")]')
      ->click();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // NOTE: After nested paragraphs is added there will be 2 add buttons and we
    // will use xpath "ancestor" axis to switch scope between base paragraphs
    // and nested paragraphs.
    //
    // For jQuery selector, we will use first() and last(), for nested and base
    // paragraph respectively.
    //
    // Add 2 additional paragraphs in base field.
    $this
      ->getSession()
      ->executeScript("jQuery('input.paragraph-type-add-delta').last().val('')");
    for ($i = 1; $i <= 2; $i++) {
      $page
        ->find('xpath', '//*[@name="button_add_modal" and not(ancestor::table)]')
        ->click();
      $page
        ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_' . $i . '")]')
        ->click();
      $this
        ->assertSession()
        ->assertWaitOnAjaxRequest();
    }

    // There should be 3 paragraphs and last one should be "test_2" type.
    $base_paragraphs = $page
      ->findAll('xpath', '//*[contains(@class, "paragraph-type-label") and not(ancestor::div[contains(@class, "paragraphs-nested")])]');
    $this
      ->assertEquals(3, count($base_paragraphs), 'There should be 3 paragraphs.');
    $this
      ->assertEquals('test_2', $base_paragraphs[2]
      ->getText(), 'Last paragraph should be type "test_2".');

    // Add new paragraph to 1st position - set delta to 0 for base paragraphs.
    $this
      ->getSession()
      ->executeScript("jQuery('input.paragraph-type-add-delta').last().val(0)");
    $page
      ->find('xpath', '//*[@name="button_add_modal" and not(ancestor::table)]')
      ->click();
    $page
      ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_3")]')
      ->click();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // There should be 4 paragraphs and first one should be "test_3" type.
    $base_paragraphs = $page
      ->findAll('xpath', '//*[contains(@class, "paragraph-type-label") and not(ancestor::div[contains(@class, "paragraphs-nested")])]');
    $this
      ->assertEquals(4, count($base_paragraphs), 'There should be 4 paragraphs.');
    $this
      ->assertEquals('test_3', $base_paragraphs[0]
      ->getText(), '1st paragraph should be type "test_3".');

    // Add new paragraph to 3rd position - set delta to 2 for base paragraphs.
    $this
      ->getSession()
      ->executeScript("jQuery('input.paragraph-type-add-delta').last().val(2)");
    $page
      ->find('xpath', '//*[@name="button_add_modal" and not(ancestor::table)]')
      ->click();
    $page
      ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_2")]')
      ->click();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // There should be 5 paragraphs and 3rd one should be "test_2" type.
    $base_paragraphs = $page
      ->findAll('xpath', '//*[contains(@class, "paragraph-type-label") and not(ancestor::div[contains(@class, "paragraphs-nested")])]');
    $this
      ->assertEquals(5, count($base_paragraphs), 'There should be 5 paragraphs.');
    $this
      ->assertEquals('test_2', $base_paragraphs[2]
      ->getText(), '3rd paragraph should be type "test_2".');

    // Add new paragraph to last position - using really big delta.
    $this
      ->getSession()
      ->executeScript("jQuery('input.paragraph-type-add-delta').last().val(1000)");
    $page
      ->find('xpath', '//*[@name="button_add_modal" and not(ancestor::table)]')
      ->click();
    $page
      ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_1")]')
      ->click();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // There should be 6 paragraphs and last one should be "test_1" type.
    $base_paragraphs = $page
      ->findAll('xpath', '//*[contains(@class, "paragraph-type-label") and not(ancestor::div[contains(@class, "paragraphs-nested")])]');
    $this
      ->assertEquals(6, count($base_paragraphs), 'There should be 6 paragraphs.');
    $this
      ->assertEquals('test_1', $base_paragraphs[5]
      ->getText(), 'Last paragraph should be type "test_1".');

    // Clear delta base paragraphs.
    $this
      ->getSession()
      ->executeScript("jQuery('input.paragraph-type-add-delta').last().val('')");
    $page
      ->find('xpath', '//*[@name="button_add_modal" and not(ancestor::table)]')
      ->click();
    $page
      ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_3")]')
      ->click();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // There should be 7 paragraphs and last one should be "test_3" type.
    $base_paragraphs = $page
      ->findAll('xpath', '//*[contains(@class, "paragraph-type-label") and not(ancestor::div[contains(@class, "paragraphs-nested")])]');
    $this
      ->assertEquals(7, count($base_paragraphs), 'There should be 7 paragraphs.');
    $this
      ->assertEquals('test_3', $base_paragraphs[6]
      ->getText(), 'Last paragraph should be type "test_3".');

    // Save -> Open -> Check.
    $page
      ->pressButton('Save');
    $this
      ->drupalGet('/node/1/edit');

    // Check order for all Base Paragraphs.
    $base_paragraphs = $page
      ->findAll('xpath', '//*[contains(@class, "paragraph-type-label") and not(ancestor::div[contains(@class, "paragraphs-nested")])]');
    $base_paragraphs_type = [];
    foreach ($base_paragraphs as $base_paragraph) {
      $base_paragraphs_type[] = $base_paragraph
        ->getText();
    }
    $this
      ->assertEquals([
      'test_3',
      'test_nested',
      'test_2',
      'test_1',
      'test_2',
      'test_1',
      'test_3',
    ], $base_paragraphs_type);

    // Test adding in nested paragraphs.
    $page
      ->find('xpath', '//tr[2]/td[2]//*[contains(@class, "paragraphs-icon-button-edit")]')
      ->click();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // Add paragraph in nested to have initial state for adding positions.
    $page
      ->find('xpath', '//*[@name="button_add_modal" and ancestor::table]')
      ->click();
    $page
      ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_1")]')
      ->click();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // Add new paragraph to first position.
    $this
      ->getSession()
      ->executeScript("jQuery('input.paragraph-type-add-delta').first().val(0)");
    $page
      ->find('xpath', '//*[@name="button_add_modal" and ancestor::table]')
      ->click();
    $page
      ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_3")]')
      ->click();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // Add new paragraph to 2nd position - using float value for index.
    $this
      ->getSession()
      ->executeScript("jQuery('input.paragraph-type-add-delta').first().val(1.1111)");
    $page
      ->find('xpath', '//*[@name="button_add_modal" and ancestor::table]')
      ->click();
    $page
      ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_2")]')
      ->click();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // Add new paragraph to first position - using negative index.
    $this
      ->getSession()
      ->executeScript("jQuery('input.paragraph-type-add-delta').first().val(-100)");
    $page
      ->find('xpath', '//*[@name="button_add_modal" and ancestor::table]')
      ->click();
    $page
      ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_2")]')
      ->click();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // Add new paragraph to last position - using some text as position.
    $this
      ->getSession()
      ->executeScript("jQuery('input.paragraph-type-add-delta').first().val('some_text')");
    $page
      ->find('xpath', '//*[@name="button_add_modal" and ancestor::table]')
      ->click();
    $page
      ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_3")]')
      ->click();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // Check order for all Nested Paragraphs.
    $nested_paragraphs = $page
      ->findAll('xpath', '//*[contains(@class, "paragraph-type-label") and ancestor::div[contains(@class, "paragraphs-nested")]]');
    $nested_paragraphs_type = [];
    foreach ($nested_paragraphs as $nested_paragraph) {
      $nested_paragraphs_type[] = $nested_paragraph
        ->getText();
    }
    $this
      ->assertEquals([
      'test_2',
      'test_3',
      'test_2',
      'test_1',
      'test_3',
    ], $nested_paragraphs_type);

    // Check the Add above functionality does not affect the position of the new
    // added Paragraphs when using the Add Paragraph button at the bottom.
    $this
      ->drupalGet('node/add/test_modal_delta');

    // Add a new Paragraph.
    $page
      ->find('xpath', '//*[@name="button_add_modal"]')
      ->click();
    $paragraphs_dialog = $this
      ->assertSession()
      ->waitForElementVisible('css', 'div.ui-dialog');
    $paragraphs_dialog
      ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_1")]')
      ->press();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // Attempt to add a new Paragraph above and cancel.
    $page
      ->find('xpath', '//*[@name="button_add_modal"]')
      ->click();
    $this
      ->getSession()
      ->executeScript("jQuery('input.paragraph-type-add-delta').first().val(0)");
    $this
      ->assertSession()
      ->elementExists('css', '.ui-dialog-titlebar-close')
      ->press();
    $delta = $this
      ->getSession()
      ->evaluateScript("jQuery('.paragraph-type-add-delta').val()");
    $this
      ->assertEquals($delta, '');

    // Add a new Paragraph with the Add button at the bottom.
    $page
      ->find('xpath', '//*[@name="button_add_modal"]')
      ->click();
    $paragraphs_dialog = $this
      ->assertSession()
      ->waitForElementVisible('css', 'div.ui-dialog');
    $paragraphs_dialog
      ->find('xpath', '//*[contains(@class, "paragraphs-add-dialog") and contains(@class, "ui-dialog-content")]//*[contains(@name, "test_2")]')
      ->press();
    $this
      ->assertSession()
      ->assertWaitOnAjaxRequest();

    // The position of it should be below the first added Paragraph.
    $base_paragraphs = $page
      ->findAll('xpath', '//*[contains(@class, "paragraph-type-label") and not(ancestor::div[contains(@class, "paragraphs-nested")])]');
    $base_paragraphs_type = [];
    foreach ($base_paragraphs as $base_paragraph) {
      $base_paragraphs_type[] = $base_paragraph
        ->getText();
    }
    $this
      ->assertEquals([
      'test_1',
      'test_2',
    ], $base_paragraphs_type);
  }

}