function 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

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();
}