function LayoutBuilderUiTest::testAddHighlights

Tests that elements that open the dialog are properly highlighted.

File

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

Class

LayoutBuilderUiTest

Tests the Layout Builder UI.

Namespace

Code

public function testAddHighlights() : void {
  $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 content block.
  $page->clickLink('Add block');
  $this->assertNotEmpty($assert_session->waitForElementVisible('css', 'a:contains("Create content block")'));
  $assert_session->assertWaitOnAjaxRequest();
  // Highlight is present with ChooseBlockController::build().
  $this->assertHighlightedElement('[data-layout-builder-highlight-id="block-0-first"]');
  $page->clickLink('Create content 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();
}