ModalRendererTest.php

Same filename in other branches
  1. 9 core/modules/system/tests/src/FunctionalJavascript/ModalRendererTest.php
  2. 8.9.x core/modules/system/tests/src/FunctionalJavascript/ModalRendererTest.php
  3. 10 core/modules/system/tests/src/FunctionalJavascript/ModalRendererTest.php

Namespace

Drupal\Tests\system\FunctionalJavascript

File

core/modules/system/tests/src/FunctionalJavascript/ModalRendererTest.php

View source
<?php

declare (strict_types=1);
namespace Drupal\Tests\system\FunctionalJavascript;

use Drupal\FunctionalJavascriptTests\WebDriverTestBase;

/**
 * Tests that dialog links use different renderer services.
 *
 * @group system
 */
class ModalRendererTest extends WebDriverTestBase {
    
    /**
     * {@inheritdoc}
     */
    protected static $modules = [
        'system',
        'dialog_renderer_test',
    ];
    
    /**
     * {@inheritdoc}
     */
    protected $defaultTheme = 'stark';
    
    /**
     * Tests that links respect 'data-dialog-renderer' attribute.
     */
    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');
    }
    
    /**
     * Confirm focus management of a dialog openers in a dropbutton.
     */
    public function testOpenerInDropbutton() : void {
        $assert_session = $this->assertSession();
        $page = $this->getSession()
            ->getPage();
        $this->drupalGet('dialog_renderer-collapsed-opener');
        // Open a modal using a link inside a dropbutton.
        $page->find('css', '.dropbutton-toggle button')
            ->click();
        $modal_link = $assert_session->waitForElementVisible('css', '.secondary-action a');
        $modal_link->click();
        $assert_session->waitForElementVisible('css', '.ui-dialog');
        $assert_session->assertVisibleInViewport('css', '.ui-dialog .ui-dialog-content');
        $page->pressButton('Close');
        // When the dialog "closes" it is still present, so wait on it switching to
        // `display: none;`.
        $assert_session->waitForElement('css', '.ui-dialog[style*="display: none;"]');
        // Confirm that when the modal closes, focus is moved to the first visible
        // and focusable item in the contextual link container, because the original
        // opener is not available.
        $this->assertJsCondition('document.activeElement === document.querySelector(".dropbutton-action a")');
    }

}

Classes

Title Deprecated Summary
ModalRendererTest Tests that dialog links use different renderer services.

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.