public function LayoutBuilderTest::testLayoutBuilderUi in Block Style Plugins 8.2

Tests that styles can be applied via Layout Builder.

File

tests/src/FunctionalJavascript/LayoutBuilderTest.php, line 75

Class

LayoutBuilderTest

Layout Builder tests.

Namespace

Drupal\Tests\block_style_plugins\FunctionalJavascript

Code

public function testLayoutBuilderUi() {

  /** @var \Drupal\FunctionalJavascriptTests\WebDriverWebAssert $assert */
  $assert = $this
    ->assertSession();
  $page = $this
    ->getSession()
    ->getPage();
  $block_css_locator = '.block-system-powered-by-block';
  $this
    ->drupalGet('node/1/layout');
  $assert
    ->pageTextContains('The node body');

  // Add a new block.
  $this
    ->addNewBlock('Powered by Drupal');

  // Click the contextual link.
  $this
    ->clickContextualLink($block_css_locator, 'Style settings');
  $assert
    ->assertWaitOnAjaxRequest();
  $this
    ->assertNotEmpty($assert
    ->waitForElementVisible('css', '#drupal-off-canvas'));

  // Choose a style to apply.
  $dropdown = $assert
    ->waitForElementVisible('css', '[name="block_styles"]');

  // $this->assertNotEmpty($dropdown);
  $dropdown
    ->selectOption('Simple Class');
  $page
    ->pressButton('Add Styles');
  $assert
    ->assertWaitOnAjaxRequest();

  // Configure the styles.
  $page
    ->fillField('settings[simple_class]', 'test-class');
  $page
    ->pressButton('Add Styles');
  $assert
    ->assertWaitOnAjaxRequest();

  // Check to see if classes were applied.
  $block_element = $assert
    ->waitForElementVisible('css', $block_css_locator);
  $this
    ->assertNotEmpty($block_element);
  $block_element
    ->hasClass('test-class');

  // Edit the style.
  $this
    ->clickContextualLink($block_css_locator, 'Style settings');
  $assert
    ->assertWaitOnAjaxRequest();
  $this
    ->clickLink('Edit');
  $assert
    ->assertWaitOnAjaxRequest();
  $assert
    ->fieldValueEquals('settings[simple_class]', 'test-class');
  $page
    ->fillField('settings[simple_class]', 'edited-class');
  $page
    ->pressButton('Update');
  $assert
    ->assertWaitOnAjaxRequest();

  // Save the Layout.
  $page
    ->pressButton('Save layout');

  // Check to see if classes are still applied.
  $block_element = $assert
    ->waitForElementVisible('css', $block_css_locator);
  $this
    ->assertNotEmpty($block_element);
  $block_element
    ->hasClass('edited-class');

  // Delete the style.
  $this
    ->drupalGet('node/1/layout');
  $this
    ->clickContextualLink($block_css_locator, 'Style settings');
  $assert
    ->assertWaitOnAjaxRequest();
  $this
    ->assertNotEmpty($assert
    ->waitForElementVisible('css', '#drupal-off-canvas'));
  $this
    ->clickLink('Delete');
  $assert
    ->assertWaitOnAjaxRequest();
  $page
    ->pressButton('Cancel');
  $assert
    ->assertWaitOnAjaxRequest();
  $this
    ->clickLink('Delete');
  $assert
    ->assertWaitOnAjaxRequest();
  $this
    ->assertNotEmpty($assert
    ->waitForElementVisible('css', '[value="Confirm"]'));
  $page
    ->pressButton('Confirm');
  $assert
    ->assertWaitOnAjaxRequest();

  // Check to see if classes have been removed.
  $assert
    ->responseNotContains('edited-class');

  // Save the Layout.
  $page
    ->pressButton('Save layout');

  // Check to see if classes have been removed.
  $assert
    ->responseContains('The layout override has been saved');
  $assert
    ->responseNotContains('edited-class');
}