public function ComponentAttributeTest::testManageComponentAttributesForm in Layout Builder Component Attributes 1.0.x

Same name and namespace in other branches

1. 1.2.x tests/src/FunctionalJavascript/ComponentAttributeTest.php \Drupal\Tests\layout_builder_component_attributes\FunctionalJavascript\ComponentAttributeTest::testManageComponentAttributesForm()
2. 1.1.x tests/src/FunctionalJavascript/ComponentAttributeTest.php \Drupal\Tests\layout_builder_component_attributes\FunctionalJavascript\ComponentAttributeTest::testManageComponentAttributesForm()

Tests Manage Component Attributes Form.

File

tests/src/FunctionalJavascript/ComponentAttributeTest.php, line 111

Class

ComponentAttributeTest

Class ComponentAttributeTest.

Namespace

Drupal\Tests\layout_builder_component_attributes\FunctionalJavascript

Code

public function testManageComponentAttributesForm() {
  $this
    ->getSession()
    ->resizeWindow(1200, 2000);
  $assert_session = $this
    ->assertSession();
  $page = $this
    ->getSession()
    ->getPage();
  $this
    ->drupalGet(static::FIELD_UI_PREFIX . '/display/default/layout');
  $this
    ->resetLayoutBuilderLayout();
  $this
    ->clickContextualLink('.layout-builder-block', 'Manage attributes');
  $assert_session
    ->assertWaitOnAjaxRequest();

  // Test validation, one field at a time.
  // Block Attributes.
  $page
    ->find('xpath', '//details[contains(@id, "edit-block-attributes")]')
    ->click();
  $page
    ->fillField('block_attributes[id]', '(block-id-test');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSettingsTrayOpen();
  $page
    ->fillField('block_attributes[id]', 'block-id-test');
  $page
    ->fillField('block_attributes[class]', '*block-class1 block-class2');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSettingsTrayOpen();
  $page
    ->fillField('block_attributes[class]', 'block-class1 block-class2');
  $page
    ->fillField('block_attributes[style]', 'color blue;');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSettingsTrayOpen();
  $page
    ->fillField('block_attributes[style]', 'color: blue;');
  $page
    ->fillField('block_attributes[data]', 'data-block-test' . PHP_EOL . 'ata-block-test2|test-value');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSettingsTrayOpen();
  $page
    ->fillField('block_attributes[data]', 'data-block-test' . PHP_EOL . 'data-block-test2|test-value');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();

  // Block Title Attributes.
  $this
    ->clickContextualLink('.layout-builder-block', 'Manage attributes');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $page
    ->find('xpath', '//details[contains(@id, "edit-block-title-attributes")]')
    ->click();
  $page
    ->fillField('block_title_attributes[id]', '(block-title-id-test');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSettingsTrayOpen();
  $page
    ->fillField('block_title_attributes[id]', 'block-title-id-test');
  $page
    ->fillField('block_title_attributes[class]', '*block-title-class1 block-title-class2');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSettingsTrayOpen();
  $page
    ->fillField('block_title_attributes[class]', 'block-title-class1 block-title-class2');
  $page
    ->fillField('block_title_attributes[style]', 'color white;');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSettingsTrayOpen();
  $page
    ->fillField('block_title_attributes[style]', 'color: white;');
  $page
    ->fillField('block_title_attributes[data]', 'data-block-title-test' . PHP_EOL . 'ata-block-title-test2|test-value-title');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSettingsTrayOpen();
  $page
    ->fillField('block_title_attributes[data]', 'data-block-title-test' . PHP_EOL . 'data-block-title-test2|test-value-title');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();

  // Block Content Attributes.
  $this
    ->clickContextualLink('.layout-builder-block', 'Manage attributes');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $page
    ->find('xpath', '//details[contains(@id, "edit-block-content-attributes")]')
    ->click();
  $page
    ->fillField('block_content_attributes[id]', '(block-content-id-test');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSettingsTrayOpen();
  $page
    ->fillField('block_content_attributes[id]', 'block-content-id-test');
  $page
    ->fillField('block_content_attributes[class]', '*block-content-class1 block-content-class2');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSettingsTrayOpen();
  $page
    ->fillField('block_content_attributes[class]', 'block-content-class1 block-content-class2');
  $page
    ->fillField('block_content_attributes[style]', 'color red;');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSettingsTrayOpen();
  $page
    ->fillField('block_content_attributes[style]', 'color: red;');
  $page
    ->fillField('block_content_attributes[data]', 'data-block-content-test' . PHP_EOL . 'ata-block-content-test2|test-value-content');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $this
    ->assertSettingsTrayOpen();
  $page
    ->fillField('block_content_attributes[data]', 'data-block-content-test' . PHP_EOL . 'data-block-content-test2|test-value-content');
  $page
    ->pressButton('Update');
  $assert_session
    ->assertWaitOnAjaxRequest();
  $page
    ->pressButton('Save layout');

  // Verify correct rendering of attributes.
  $this
    ->drupalGet('node/add/bundle_with_section_field');
  $page
    ->fillField('Title', 'Test Node Title');
  $page
    ->pressButton('Save');
  $this
    ->drupalGet('node/1');

  // Verify Block Attributes.
  $element = $page
    ->find('xpath', '//*[@id="block-id-test"]');
  $this
    ->assertNotEmpty($element, "Block ID rendered");
  $this
    ->assertTrue($element
    ->hasClass('block-class1'), "Block class rendered");
  $this
    ->assertTrue($element
    ->hasClass('block-class2'), "Block class rendered");
  $style = $element
    ->getAttribute('style');
  $this
    ->assertSame('color: blue;', $style, "Style attribute rendered");
  $this
    ->assertTrue($element
    ->hasAttribute('data-block-test'), "Data attribute rendered");
  $data1 = $element
    ->getAttribute('data-block-test');
  $this
    ->assertEmpty($data1, "Data attribute has no value");
  $this
    ->assertTrue($element
    ->hasAttribute('data-block-test2'), "Data attribute rendered");
  $data2 = $element
    ->getAttribute('data-block-test2');
  $this
    ->assertSame($data2, 'test-value', "Data attribute has expected value");

  // Verify Block Title Attributes.
  $element = $page
    ->find('xpath', '//*[@id="block-title-id-test"]');
  $this
    ->assertNotEmpty($element, "Block ID rendered");
  $this
    ->assertTrue($element
    ->hasClass('block-title-class1'), "Block class rendered");
  $this
    ->assertTrue($element
    ->hasClass('block-title-class2'), "Block class rendered");
  $style = $element
    ->getAttribute('style');
  $this
    ->assertSame('color: white;', $style, "Style attribute rendered");
  $this
    ->assertTrue($element
    ->hasAttribute('data-block-title-test'), "Data attribute rendered");
  $data1 = $element
    ->getAttribute('data-block-title-test');
  $this
    ->assertEmpty($data1, "Data attribute has no value");
  $this
    ->assertTrue($element
    ->hasAttribute('data-block-title-test2'), "Data attribute rendered");
  $data2 = $element
    ->getAttribute('data-block-title-test2');
  $this
    ->assertSame($data2, 'test-value-title', "Data attribute has expected value");

  // Verify Block Content Attributes.
  $element = $page
    ->find('xpath', '//*[@id="block-content-id-test"]');
  $this
    ->assertNotEmpty($element, "Block ID rendered");
  $this
    ->assertTrue($element
    ->hasClass('block-content-class1'), "Block class rendered");
  $this
    ->assertTrue($element
    ->hasClass('block-content-class2'), "Block class rendered");
  $style = $element
    ->getAttribute('style');
  $this
    ->assertSame('color: red;', $style, "Style attribute rendered");
  $this
    ->assertTrue($element
    ->hasAttribute('data-block-content-test'), "Data attribute rendered");
  $data1 = $element
    ->getAttribute('data-block-content-test');
  $this
    ->assertEmpty($data1, "Data attribute has no value");
  $this
    ->assertTrue($element
    ->hasAttribute('data-block-content-test2'), "Data attribute rendered");
  $data2 = $element
    ->getAttribute('data-block-content-test2');
  $this
    ->assertSame($data2, 'test-value-content', "Data attribute has expected value");
}