function LayoutBuilderTest::testLayoutBuilderUi

Tests the Layout Builder UI.

File

core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderTest.php, line 104

Class

LayoutBuilderTest

Tests the Layout Builder UI.

Namespace

Code

public function testLayoutBuilderUi() : void {
    $layout_url = 'node/1/layout';
    $node_url = 'node/1';
    $assert_session = $this->assertSession();
    $page = $this->getSession()
        ->getPage();
    // Ensure the block is not displayed initially.
    $this->drupalGet($node_url);
    $assert_session->pageTextContains('The node body');
    $assert_session->pageTextNotContains('Powered by Drupal');
    $assert_session->linkNotExists('Layout');
    $this->enableLayoutsForBundle('admin/structure/types/manage/bundle_with_section_field/display', TRUE);
    // The existing content is still shown until overridden.
    $this->drupalGet($node_url);
    $assert_session->pageTextContains('The node body');
    // Enter the layout editing mode.
    $assert_session->linkExists('Layout');
    $this->clickLink('Layout');
    $this->markCurrentPage();
    $assert_session->pageTextContains('The node body');
    $assert_session->linkExists('Add section');
    // Add a new block.
    $this->openAddBlockForm('Powered by Drupal');
    $page->fillField('settings[label]', 'This is the label');
    $page->checkField('settings[label_display]');
    // Save the new block, and ensure it is displayed on the page.
    $page->pressButton('Add block');
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->assertNoElementAfterWait('css', '#drupal-off-canvas');
    $assert_session->addressEquals($layout_url);
    $assert_session->pageTextContains('Powered by Drupal');
    $assert_session->pageTextContains('This is the label');
    $this->assertPageNotReloaded();
    // Until the layout is saved, the new block is not visible on the node page.
    $this->drupalGet($node_url);
    $assert_session->pageTextNotContains('Powered by Drupal');
    // When returning to the layout edit mode, the new block is visible.
    $this->drupalGet($layout_url);
    $assert_session->pageTextContains('Powered by Drupal');
    // Save the layout, and the new block is visible.
    $page->pressButton('Save layout');
    $assert_session->addressEquals($node_url);
    $assert_session->pageTextContains('Powered by Drupal');
    $assert_session->pageTextContains('This is the label');
    $assert_session->elementExists('css', '.layout');
    $this->drupalGet($layout_url);
    $this->markCurrentPage();
    $assert_session->linkExists('Add section');
    $this->clickLink('Add section');
    $this->assertNotEmpty($assert_session->waitForElementVisible('named', [
        'link',
        'Two column',
    ]));
    $this->clickLink('Two column');
    $assert_session->waitForElementVisible('named', [
        'button',
        'Add section',
    ]);
    $page->pressButton('Add section');
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->assertNoElementAfterWait('css', '.layout__region--second .block-system-powered-by-block');
    $assert_session->elementTextNotContains('css', '.layout__region--second', 'Powered by Drupal');
    // Drag the block to a region in different section.
    $this->sortableTo('.block-system-powered-by-block', '.layout__region--content', '.layout__region--second');
    $assert_session->assertWaitOnAjaxRequest();
    // Ensure the drag succeeded.
    $assert_session->elementExists('css', '.layout__region--second .block-system-powered-by-block');
    $assert_session->elementTextContains('css', '.layout__region--second', 'Powered by Drupal');
    $this->assertPageNotReloaded();
    // Ensure the dragged block is still in the correct position after reload.
    $this->drupalGet($layout_url);
    $assert_session->elementExists('css', '.layout__region--second .block-system-powered-by-block');
    $assert_session->elementTextContains('css', '.layout__region--second', 'Powered by Drupal');
    // Ensure the dragged block is still in the correct position after save.
    $page->pressButton('Save layout');
    $assert_session->elementExists('css', '.layout__region--second .block-system-powered-by-block');
    $assert_session->elementTextContains('css', '.layout__region--second', 'Powered by Drupal');
    // Reconfigure a block and ensure that the layout content is updated.
    $this->drupalGet($layout_url);
    $this->markCurrentPage();
    $this->clickContextualLink('.block-system-powered-by-block', 'Configure');
    $this->assertOffCanvasFormAfterWait('layout_builder_update_block');
    $page->fillField('settings[label]', 'This is the new label');
    $page->pressButton('Update');
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->assertNoElementAfterWait('css', '#drupal-off-canvas');
    $assert_session->addressEquals($layout_url);
    $assert_session->pageTextContains('Powered by Drupal');
    $assert_session->pageTextContains('This is the new label');
    $assert_session->pageTextNotContains('This is the label');
    // Remove a block.
    $this->clickContextualLink('.block-system-powered-by-block', 'Remove block');
    $this->assertOffCanvasFormAfterWait('layout_builder_remove_block');
    $assert_session->pageTextContains('Are you sure you want to remove the This is the new label block?');
    $assert_session->pageTextContains('This action cannot be undone.');
    $page->pressButton('Remove');
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->assertNoElementAfterWait('css', '#drupal-off-canvas');
    $assert_session->pageTextNotContains('Powered by Drupal');
    $assert_session->linkExists('Add block');
    $assert_session->addressEquals($layout_url);
    $this->assertPageNotReloaded();
    $page->pressButton('Save layout');
    $assert_session->elementExists('css', '.layout');
    // Test deriver-based blocks.
    $this->drupalGet($layout_url);
    $this->markCurrentPage();
    $this->openAddBlockForm('My content block');
    $page->pressButton('Add block');
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->pageTextContains('This is the block content');
    // Remove both sections.
    $assert_session->linkExists('Remove Section 1');
    $this->clickLink('Remove Section 1');
    $this->assertOffCanvasFormAfterWait('layout_builder_remove_section');
    $assert_session->pageTextContains('Are you sure you want to remove section 1?');
    $assert_session->pageTextContains('This action cannot be undone.');
    $page->pressButton('Remove');
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->linkExists('Remove Section 1');
    $this->clickLink('Remove Section 1');
    $this->assertOffCanvasFormAfterWait('layout_builder_remove_section');
    $page->pressButton('Remove');
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->pageTextNotContains('This is the block content');
    $assert_session->linkNotExists('Add block');
    $this->assertPageNotReloaded();
    $page->pressButton('Save layout');
    // Removing all sections results in no layout being used.
    $assert_session->addressEquals($node_url);
    $assert_session->elementNotExists('css', '.layout');
    $assert_session->pageTextNotContains('The node body');
}