public function LayoutBuilderUiTest::testAddHighlights in Drupal 8

Same name and namespace in other branches

1. 9 core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderUiTest.php \Drupal\Tests\layout_builder\FunctionalJavascript\LayoutBuilderUiTest::testAddHighlights()
2. 10 core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderUiTest.php \Drupal\Tests\layout_builder\FunctionalJavascript\LayoutBuilderUiTest::testAddHighlights()

Tests that elements that open the dialog are properly highlighted.

File

core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderUiTest.php, line 134

Class

LayoutBuilderUiTest

Tests the Layout Builder UI.

Namespace

Drupal\Tests\layout_builder\FunctionalJavascript

Code

public function testAddHighlights() {
  $assert_session = $this
    ->assertSession();
  $page = $this
    ->getSession()
    ->getPage();
  $bundle = BlockContentType::create([
    'id' => 'basic',
    'label' => 'Basic block',
    'revision' => 1,
  ]);
  $bundle
    ->save();
  block_content_add_body_field($bundle
    ->id());
  $this
    ->drupalGet(static::FIELD_UI_PREFIX . '/display/default/layout');
  $assert_session
    ->elementsCount('css', '.layout-builder__add-section', 2);
  $assert_session
    ->elementNotExists('css', '.is-layout-builder-highlighted');
  $page
    ->clickLink('Add section');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElement('css', '#drupal-off-canvas .item-list'));
  $assert_session
    ->assertWaitOnAjaxRequest();

  // Highlight is present with AddSectionController.
  $this
    ->assertHighlightedElement('[data-layout-builder-highlight-id="section-0"]');
  $page
    ->clickLink('Two column');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '#drupal-off-canvas input[type="submit"][value="Add section"]'));
  $assert_session
    ->assertWaitOnAjaxRequest();

  // The highlight is present with ConfigureSectionForm.
  $this
    ->assertHighlightedElement('[data-layout-builder-highlight-id="section-0"]');

  // Submit the form to add the section and then confirm that no element is
  // highlighted anymore.
  $page
    ->pressButton("Add section");
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertHighlightNotExists();
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '[data-layout-delta="1"]'));
  $assert_session
    ->elementsCount('css', '.layout-builder__add-block', 3);

  // Add a custom block.
  $page
    ->clickLink('Add block');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', 'a:contains("Create custom block")'));
  $assert_session
    ->assertWaitOnAjaxRequest();

  // Highlight is present with ChooseBlockController::build().
  $this
    ->assertHighlightedElement('[data-layout-builder-highlight-id="block-0-first"]');
  $page
    ->clickLink('Create custom block');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '#drupal-off-canvas input[value="Add block"]'));
  $assert_session
    ->assertWaitOnAjaxRequest();

  // Highlight is present with ChooseBlockController::inlineBlockList().
  $this
    ->assertHighlightedElement('[data-layout-builder-highlight-id="block-0-first"]');
  $page
    ->pressButton('Close');
  $this
    ->assertHighlightNotExists();

  // The highlight should persist with all block config dialogs.
  $page
    ->clickLink('Add block');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', 'a:contains("Recent content")'));
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertHighlightedElement('[data-layout-builder-highlight-id="block-0-first"]');
  $page
    ->clickLink('Recent content');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '#drupal-off-canvas input[value="Add block"]'));

  // The highlight is present with ConfigureBlockFormBase::doBuildForm().
  $this
    ->assertHighlightedElement('[data-layout-builder-highlight-id="block-0-first"]');
  $page
    ->pressButton('Close');
  $this
    ->assertHighlightNotExists();

  // The highlight is present when the "Configure section" dialog is open.
  $page
    ->clickLink('Configure Section 1');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '#drupal-off-canvas'));
  $this
    ->assertHighlightedElement('[data-layout-builder-highlight-id="section-update-0"]');
  $page
    ->pressButton('Close');
  $this
    ->assertHighlightNotExists();

  // The highlight is present when the "Remove Section" dialog is open.
  $page
    ->clickLink('Remove Section 1');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '#drupal-off-canvas'));
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertHighlightedElement('[data-layout-builder-highlight-id="section-update-0"]');
  $page
    ->pressButton('Close');
  $this
    ->assertHighlightNotExists();

  // A block is highlighted when its "Configure" contextual link is clicked.
  $this
    ->clickContextualLink('.block-field-blocknodebundle-with-section-fieldbody', 'Configure');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '#drupal-off-canvas'));
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertHighlightedElement('.block-field-blocknodebundle-with-section-fieldbody');

  // Make sure the highlight remains when contextual links are revealed with
  // the mouse.
  $this
    ->toggleContextualTriggerVisibility('.block-field-blocknodebundle-with-section-fieldbody');
  $active_section = $page
    ->find('css', '.block-field-blocknodebundle-with-section-fieldbody');
  $active_section
    ->pressButton('Open configuration options');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '.block-field-blocknodebundle-with-section-fieldbody .contextual.open'));
  $page
    ->pressButton('Close');
  $this
    ->assertHighlightNotExists();

  // @todo Remove the reload once https://www.drupal.org/node/2918718 is
  //   completed.
  $this
    ->getSession()
    ->reload();

  // Block is highlighted when its "Remove block" contextual link is clicked.
  $this
    ->clickContextualLink('.block-field-blocknodebundle-with-section-fieldbody', 'Remove block');
  $this
    ->assertNotEmpty($assert_session
    ->waitForElementVisible('css', '#drupal-off-canvas'));
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertHighlightedElement('.block-field-blocknodebundle-with-section-fieldbody');
  $page
    ->pressButton('Close');
  $this
    ->assertHighlightNotExists();
}