public function ParagraphsAddWidgetTest::testAddWidgetButton in Paragraphs 8

Tests the add widget button with modal form.

File

tests/src/FunctionalJavascript/ParagraphsAddWidgetTest.php, line 59

Class

ParagraphsAddWidgetTest

Test paragraphs user interface.

Namespace

Drupal\Tests\paragraphs\FunctionalJavascript

Code

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', '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('Save and continue');

  // 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');
  $page
    ->fillField('label', 'Paragraphs');
  $this
    ->assertSession()
    ->waitForElementVisible('css', '#edit-name-machine-name-suffix .link');
  $page
    ->pressButton('Edit');
  $page
    ->fillField('field_name', 'paragraphs');
  $page
    ->pressButton('Save and continue');

  // 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()
    ->assertWaitOnAjaxRequest();
  $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();
  $this
    ->assertSession()
    ->assertWaitOnAjaxRequest();

  // 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()
    ->assertWaitOnAjaxRequest();
  $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()
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSession()
    ->elementTextContains('css', '.ui-dialog-title', 'Add Renamed paragraph');
  $this
    ->assertSession()
    ->elementTextNotContains('css', '.ui-dialog-title', 'Add Paragraph');
}