function ModalRendererTest::testModalRenderer

Tests that links respect 'data-dialog-renderer' attribute.

File

core/modules/system/tests/src/FunctionalJavascript/ModalRendererTest.php, line 29

Class

ModalRendererTest

Tests that dialog links use different renderer services.

Namespace

Code

public function testModalRenderer() : void {
    $session_assert = $this->assertSession();
    $this->drupalGet('/dialog_renderer-test-links');
    $this->clickLink('Normal Modal!');
    // Neither of the wide modals should have been used.
    $style = $session_assert->waitForElementVisible('css', '.ui-dialog')
        ->getAttribute('style');
    $this->assertStringNotContainsString('700px', $style);
    $this->assertStringNotContainsString('1000px', $style);
    // Tabbable should focus the close button when it is the only tabbable item.
    $this->assertJsCondition('document.activeElement === document.querySelector(".ui-dialog .ui-dialog-titlebar-close")');
    $this->drupalGet('/dialog_renderer-test-links');
    $this->clickLink('Wide Modal!');
    $this->assertNotEmpty($session_assert->waitForElementVisible('css', '.ui-dialog[style*="width: 700px;"]'));
    $this->drupalGet('/dialog_renderer-test-links');
    $this->clickLink('Extra Wide Modal!');
    $this->assertNotEmpty($session_assert->waitForElementVisible('css', '.ui-dialog[style*="width: 1000px;"]'));
    $this->drupalGet('/dialog_renderer-test-links');
    $this->clickLink('Hidden close button modal!');
    $session_assert->waitForElementVisible('css', '.ui-dialog');
    // Tabbable should focus the dialog itself when there is no other item.
    $this->assertJsCondition('document.activeElement === document.querySelector(".ui-dialog")');
    $this->drupalGet('/dialog_renderer-test-links');
    $this->clickLink('Button pane modal!');
    $session_assert->waitForElementVisible('css', '.ui-dialog');
    $session_assert->assertVisibleInViewport('css', '.ui-dialog .ui-dialog-buttonpane');
    // Tabbable should focus the first tabbable item inside button pane.
    $this->assertJsCondition('document.activeElement === tabbable.tabbable(document.querySelector(".ui-dialog .ui-dialog-buttonpane"))[0]');
    $this->drupalGet('/dialog_renderer-test-links');
    $this->clickLink('Content link modal!');
    $session_assert->waitForElementVisible('css', '.ui-dialog');
    $session_assert->assertVisibleInViewport('css', '.ui-dialog .ui-dialog-content');
    // Tabbable should focus the first tabbable item inside modal content.
    $this->assertJsCondition('document.activeElement === tabbable.tabbable(document.querySelector(".ui-dialog .ui-dialog-content"))[0]');
    $this->drupalGet('/dialog_renderer-test-links');
    $this->clickLink('Auto focus modal!');
    $session_assert->waitForElementVisible('css', '.ui-dialog');
    $session_assert->assertVisibleInViewport('css', '.ui-dialog .ui-dialog-content');
    // Tabbable should focus the item with autofocus inside button pane.
    $this->assertJsCondition('document.activeElement === tabbable.tabbable(document.querySelector(".ui-dialog .ui-dialog-content"))[1]');
    $this->assertJsCondition('document.activeElement === document.querySelector(".ui-dialog .form-text")');
    // By default, buttons within "action" form elements are changed to jQuery
    // ui buttons and moved into the 'ui-dialog-buttonpane' container.
    $this->drupalGet('/dialog_renderer-test-links');
    $this->clickLink('Auto buttons default!');
    $this->assertNotNull($session_assert->waitForElement('css', '.ui-dialog-buttonpane .ui-dialog-buttonset .js-form-submit'));
    $session_assert->elementExists('css', '.ui-dialog-buttonpane .ui-dialog-buttonset .js-form-submit');
    // When the drupalAutoButtons option is false, buttons SHOULD NOT be moved
    // into the 'ui-dialog-buttonpane' container.
    $this->drupalGet('/dialog_renderer-test-links');
    $this->clickLink('Auto buttons false!');
    $this->assertNotNull($session_assert->waitForElement('css', '.form-actions'));
    $session_assert->elementExists('css', '.form-actions');
    $session_assert->elementNotExists('css', '.ui-dialog-buttonpane');
    // When the drupalAutoButtons option is true, buttons SHOULD be moved
    // into the 'ui-dialog-buttonpane' container.
    $this->drupalGet('/dialog_renderer-test-links');
    $this->clickLink('Auto buttons true!');
    $this->assertNotNull($session_assert->waitForElement('css', '.ui-dialog-buttonpane .ui-dialog-buttonset .js-form-submit'));
    $session_assert->elementExists('css', '.ui-dialog-buttonpane .ui-dialog-buttonset .js-form-submit');
}