public function ParagraphsStableEditPerspectivesUiTest::testEditPerspectives in Paragraphs 8

Tests visibility of elements when switching perspectives.

File

tests/src/FunctionalJavascript/ParagraphsStableEditPerspectivesUiTest.php, line 50

Class

ParagraphsStableEditPerspectivesUiTest

Test paragraphs user interface.

Namespace

Drupal\Tests\paragraphs\FunctionalJavascript

Code

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, 500);
  $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');
}