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

<?php

namespace Drupal\Tests\paragraphs\FunctionalJavascript;

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

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

  use LoginAdminTrait;
  use ParagraphsTestBaseTrait;
  use ParagraphsCoreVersionUiTestTrait;

  /**
   * Modules to enable.
   *
   * @var array
   */
  protected static $modules = [
    'node',
    'paragraphs_test',
    'paragraphs',
    'field',
    'field_ui',
    'block',
    'link',
    'text',
  ];

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

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

  /**
   * Tests visibility of elements when switching perspectives.
   */
  public function testEditPerspectives() {
    $this->loginAsAdmin([
      'edit behavior plugin settings'
    ]);

    $page = $this->getSession()->getPage();
    $this->drupalGet('admin/structure/paragraphs_type/add');
    $page->fillField('label', 'TestPlugin');
    $this->assertSession()->waitForElementVisible('css', '#edit-name-machine-name-suffix .link');
    $page->pressButton('Edit');
    $page->fillField('id', 'testplugin');
    $page->checkField('behavior_plugins[test_text_color][enabled]');
    $page->pressButton('Save and manage fields');

    $this->addParagraphedContentType('testcontent', 'field_testparagraphfield');
    $this->addFieldtoParagraphType('testplugin', 'body', 'string_long');

    $this->drupalGet('node/add/testcontent');
    $this->clickLink('Behavior');
    $style_selector = $page->find('css', '.form-item-field-testparagraphfield-0-behavior-plugins-test-text-color-text-color');
    $this->assertTrue($style_selector->isVisible());
    $this->clickLink('Content');
    $this->assertFalse($style_selector->isVisible());

    // Assert scroll position when switching tabs.
    $this->getSession()->resizeWindow(800, 450);
    $this->drupalGet('node/add/testcontent');
    $button = $this->getSession ()->getPage()->findButton('Add TestPlugin');
    $button->press();
    $this->assertSession()->assertWaitOnAjaxRequest();
    $button->press();
    $this->assertSession()->assertWaitOnAjaxRequest();
    $button->press();
    $this->assertSession()->assertWaitOnAjaxRequest();

    // First move to the last paragraph, assert that the tabs are
    // still visible, then move back up to the second.
    $this->getSession()->getPage()->find('css', '.field--widget-paragraphs tbody > tr:nth-child(4)')->mouseOver();
    $this->assertSession()->assertVisibleInViewport('css', '.paragraphs-tabs');
    $this->getSession()->getPage()->find('css', '.field--widget-paragraphs tbody > tr:nth-child(2)')->mouseOver();
    $this->getSession()->evaluateScript('window.scrollBy(0, -10);');

    // As a result, only paragraph 2 and 3 are fully visible on the content tab.
    $this->assertSession()->assertNotVisibleInViewport('css', '.field--widget-paragraphs tbody > tr:first-child');
    $this->assertSession()->assertVisibleInViewport('css', '.field--widget-paragraphs tbody > tr:nth-child(2)');
    $this->assertSession()->assertVisibleInViewport('css', '.field--widget-paragraphs tbody > tr:nth-child(3)');
    $this->assertSession()->assertNotVisibleInViewport('css', '.field--widget-paragraphs tbody > tr:nth-child(4)');
    $this->assertSession()->assertNotVisibleInViewport('css', '.field-add-more-submit');

    // When clicking the Behavior tab, paragraph 2, 3 and 4 are in the viewport
    // because the behavior settings take less space.
    $this->clickLink('Behavior');
    $this->assertSession()->assertVisibleInViewport('css', '.field--widget-paragraphs tbody > tr:nth-child(2)');
    $this->assertSession()->assertVisibleInViewport('css', '.field--widget-paragraphs tbody > tr:nth-child(3)');
    $this->assertSession()->assertVisibleInViewport('css', '.field--widget-paragraphs tbody > tr:nth-child(4)');

    // When we switch back to the Content tab, we should stay on the same
    // scroll position as before.
    $this->clickLink('Content');
    $this->assertSession()->assertNotVisibleInViewport('css', '.field--widget-paragraphs tbody > tr:first-child');
    $this->assertSession()->assertVisibleInViewport('css', '.field--widget-paragraphs tbody > tr:nth-child(2)');
    $this->assertSession()->assertVisibleInViewport('css', '.field--widget-paragraphs tbody > tr:nth-child(3)');
    $this->assertSession()->assertNotVisibleInViewport('css', '.field--widget-paragraphs tbody > tr:nth-child(4)');
    $this->assertSession()->assertNotVisibleInViewport('css', '.field-add-more-submit');
  }

  /**
   * Tests visibility of add modes actions when switching perspectives.
   */
  public function testPerspectivesAddModesVisibility() {
    $this->loginAsAdmin([
      'edit behavior plugin settings'
    ]);

    $page = $this->getSession()->getPage();
    $this->drupalGet('admin/structure/paragraphs_type/add');
    $page->fillField('label', 'TestPlugin');
    $this->assertSession()->waitForElementVisible('css', '#edit-name-machine-name-suffix .link');
    $page->pressButton('Edit');
    $page->fillField('id', 'testplugin');
    $page->checkField('behavior_plugins[test_text_color][enabled]');
    $page->pressButton('Save and manage fields');

    $this->addParagraphedContentType('testcontent', 'field_testparagraphfield');
    $this->addFieldtoParagraphType('testplugin', 'body', 'string_long');
    $form_display = \Drupal::service('entity_display.repository')->getFormDisplay('node', 'testcontent');
    $component = $form_display->getComponent('field_testparagraphfield');

    $component['settings']['add_mode'] = 'button';
    $form_display->setComponent('field_testparagraphfield', $component)->save();
    $this->drupalGet('node/add/testcontent');
    $add_wrapper = $page->find('css', '.paragraphs-add-wrapper');
    $this->assertTrue($add_wrapper->isVisible());
    $this->clickLink('Behavior');
    $this->assertFalse($add_wrapper->isVisible());

    $component['settings']['add_mode'] = 'select';
    $form_display->setComponent('field_testparagraphfield', $component)->save();
    $this->drupalGet('node/add/testcontent');
    $add_wrapper = $page->find('css', '.paragraphs-add-wrapper');
    $this->assertTrue($add_wrapper->isVisible());
    $this->clickLink('Behavior');
    $this->assertFalse($add_wrapper->isVisible());

    $component['settings']['add_mode'] = 'modal';
    $form_display->setComponent('field_testparagraphfield', $component)->save();
    $this->drupalGet('node/add/testcontent');
    $add_wrapper = $page->find('css', '.paragraphs-add-wrapper');
    $this->assertTrue($add_wrapper->isVisible());
    $this->clickLink('Behavior');
    $this->assertFalse($add_wrapper->isVisible());

    $component['settings']['add_mode'] = 'dropdown';
    $form_display->setComponent('field_testparagraphfield', $component)->save();
    $this->drupalGet('node/add/testcontent');
    $add_wrapper = $page->find('css', '.paragraphs-add-wrapper');
    $this->assertTrue($add_wrapper->isVisible());
    $this->clickLink('Behavior');
    $this->assertFalse($add_wrapper->isVisible());
  }

  /**
   * Test if tabs are visible with no behavior elements.
   */
  public function testTabsVisibility() {
    $this->loginAsAdmin([
      'access content overview',
    ]);

    $page = $this->getSession()->getPage();
    $this->drupalGet('admin/structure/paragraphs_type/add');
    $page->fillField('label', 'TestPlugin');
    $this->assertSession()->waitForElementVisible('css', '#edit-name-machine-name-suffix .link');
    $page->pressButton('Edit');
    $page->fillField('id', 'testplugin');
    $page->pressButton('Save and manage fields');

    $this->drupalGet('admin/structure/types/add');
    $page->fillField('name', 'TestContent');
    $this->assertSession()->waitForElementVisible('css', '#edit-name-machine-name-suffix .link');
    $page->pressButton('Edit');
    $page->fillField('type', 'testcontent');
    $page->pressButton('Save and manage fields');

    $this->drupalGet('admin/structure/types/manage/testcontent/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', 'testparagraphfield');
    $this->assertSession()->waitForElementVisible('css', '#edit-name-machine-name-suffix .link');
    $page->pressButton('Edit');
    $page->fillField('field_name', 'testparagraphfield');
    $page->pressButton('Continue');
    $edit = [
      'field_storage[subform][settings][target_type]' => 'paragraph',
    ];
    $this->submitForm($edit, 'Save settings');

    $this->drupalGet('node/add/testcontent');
    $style_selector = $page->find('css', '.paragraphs-tabs');
    $this->assertFalse($style_selector->isVisible());
  }

  /**
   * Test edit perspectives works fine with multiple fields.
   */
  public function testPerspectivesWithMultipleFields() {
    $this->loginAsAdmin([
      'edit behavior plugin settings'
    ]);

    // Add a nested Paragraph type.
    $paragraph_type = 'nested_paragraph';
    $this->addParagraphsType($paragraph_type);
    $this->addParagraphsField('nested_paragraph', 'paragraphs', 'paragraph');
    $edit = [
      'behavior_plugins[test_bold_text][enabled]' => TRUE,
    ];
    $this->drupalGet('admin/structure/paragraphs_type/' . $paragraph_type);
    $this->submitForm($edit, 'Save');

    $this->addParagraphedContentType('testcontent');
    $this->addParagraphsField('testcontent', 'field_paragraphs2', 'node');

    // Disable the default paragraph on both the node and the nested paragraph
    // to explicitly test with no paragraph and avoid a loop.
    EntityFormDisplay::load('node.testcontent.default')
      ->setComponent('field_paragraphs', ['type' => 'paragraphs', 'settings' => ['default_paragraph_type' => '_none']])
      ->setComponent('field_paragraphs2', ['type' => 'paragraphs', 'settings' => ['default_paragraph_type' => '_none']])
      ->save();
    EntityFormDisplay::load('paragraph' . '.' . $paragraph_type . '.default')
      ->setComponent('paragraphs', ['type' => 'paragraphs', 'settings' => ['default_paragraph_type' => '_none']])
      ->save();

    $assert_session = $this->assertSession();

    $this->drupalGet('node/add/testcontent');
    $assert_session->elementNotExists('css', '.paragraphs-nested');

    // Add a nested paragraph to the first field.
    $button = $this->getSession()->getPage()->findButton('Add nested_paragraph');
    $button->press();

    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->elementExists('css', '.paragraphs-nested');

    // Add a paragraph to the second field.
    $region_field2 = $this->getSession()->getPage()->find('css', '.field--name-field-paragraphs2');
    $button_field2 = $region_field2->findButton('Add nested_paragraph');
    $button_field2->press();
    $assert_session->assertWaitOnAjaxRequest();

    // Ge the style checkboxes from each field, make sure they are not visible
    // by default.
    $page = $this->getSession()->getPage();
    $style_selector = $page->findField('field_paragraphs[0][behavior_plugins][test_bold_text][bold_text]');
    $this->assertFalse($style_selector->isVisible());
    $style_selector2 = $page->findField('field_paragraphs2[0][behavior_plugins][test_bold_text][bold_text]');
    $this->assertFalse($style_selector2->isVisible());

    // Switch to Behavior on the first field, then the second, make sure
    // the visibility of the checkboxes is correct after each change.
    $this->clickLink('Behavior', 0);
    $this->assertTrue($style_selector->isVisible());
    $this->assertFalse($style_selector2->isVisible());
    $this->clickLink('Behavior', 1);
    $this->assertTrue($style_selector->isVisible());
    $this->assertTrue($style_selector2->isVisible());

    // Switch the second field back to Content, verify visibility again.
    $this->clickLink('Content', 1);
    $this->assertTrue($style_selector->isVisible());
    $this->assertFalse($style_selector2->isVisible());
  }

}