TestMultiWidthLayoutsTest.php in Drupal 10

Namespace

Drupal\Tests\layout_builder\FunctionalJavascript

File

core/modules/layout_builder/tests/src/FunctionalJavascript/TestMultiWidthLayoutsTest.php

<?php

namespace Drupal\Tests\layout_builder\FunctionalJavascript;

use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
use Drupal\layout_builder\Entity\LayoutBuilderEntityViewDisplay;

/**
 * Test the multi-width layout plugins.
 *
 * @group layout_builder
 */
class TestMultiWidthLayoutsTest extends WebDriverTestBase {

  /**
   * {@inheritdoc}
   */
  protected static $modules = [
    'layout_builder',
    'block',
    'node',
  ];

  /**
   * {@inheritdoc}
   */
  protected $defaultTheme = 'stark';

  /**
   * {@inheritdoc}
   */
  protected function setUp() : void {
    parent::setUp();
    $this
      ->createContentType([
      'type' => 'bundle_with_section_field',
    ]);
    LayoutBuilderEntityViewDisplay::load('node.bundle_with_section_field.default')
      ->enableLayoutBuilder()
      ->setOverridable()
      ->save();
    $this
      ->createNode([
      'type' => 'bundle_with_section_field',
    ]);
    $this
      ->drupalLogin($this
      ->drupalCreateUser([
      'configure any layout',
    ]));
  }

  /**
   * Tests changing the columns widths of a multi-width section.
   */
  public function testWidthChange() {
    $assert_session = $this
      ->assertSession();
    $page = $this
      ->getSession()
      ->getPage();
    $this
      ->drupalGet('node/1/layout');
    $width_options = [
      [
        'label' => 'Two column',
        'default_width' => '50-50',
        'additional_widths' => [
          '33-67',
          '67-33',
          '25-75',
          '75-25',
        ],
        'class' => 'layout--twocol-section--',
      ],
      [
        'label' => 'Three column',
        'default_width' => '33-34-33',
        'additional_widths' => [
          '25-50-25',
          '25-25-50',
          '50-25-25',
        ],
        'class' => 'layout--threecol-section--',
      ],
    ];
    foreach ($width_options as $width_option) {
      $width = $width_option['default_width'];
      $assert_session
        ->linkExists('Add section');
      $page
        ->clickLink('Add section');
      $this
        ->assertNotEmpty($assert_session
        ->waitForElementVisible('css', "#drupal-off-canvas a:contains(\"{$width_option['label']}\")"));
      $page
        ->clickLink($width_option['label']);
      $this
        ->assertNotEmpty($assert_session
        ->waitForElementVisible('css', '#drupal-off-canvas input[type="submit"][value="Add section"]'));
      $page
        ->pressButton("Add section");
      $this
        ->assertWidthClassApplied($width_option['class'] . $width);
      foreach ($width_option['additional_widths'] as $width) {
        $width_class = $width_option['class'] . $width;
        $assert_session
          ->linkExists('Configure Section 1');
        $page
          ->clickLink('Configure Section 1');
        $this
          ->assertNotEmpty($assert_session
          ->waitForElementVisible('css', '#drupal-off-canvas input[type="submit"][value="Update"]'));
        $page
          ->findField('layout_settings[column_widths]')
          ->setValue($width);
        $page
          ->pressButton("Update");
        $this
          ->assertWidthClassApplied($width_class);
      }
      $assert_session
        ->linkExists('Remove Section 1');
      $this
        ->clickLink('Remove Section 1');
      $this
        ->assertNotEmpty($assert_session
        ->waitForElementVisible('css', '#drupal-off-canvas input[type="submit"][value="Remove"]'));
      $page
        ->pressButton('Remove');
      $assert_session
        ->assertNoElementAfterWait('css', ".{$width_class}");
    }
  }

  /**
   * Asserts the width class is applied to the first section.
   *
   * @param string $width_class
   *   The width class.
   *
   * @internal
   */
  protected function assertWidthClassApplied(string $width_class) : void {
    $this
      ->assertNotEmpty($this
      ->assertSession()
      ->waitForElementVisible('css', ".{$width_class}[data-layout-delta=\"0\"]"));
  }

}

Classes

Name	Description
TestMultiWidthLayoutsTest	Test the multi-width layout plugins.