FocusFirstCommandTest.php

<?php

declare (strict_types=1);
namespace Drupal\FunctionalJavascriptTests\Ajax;

use Drupal\FunctionalJavascriptTests\WebDriverTestBase;

/**
 * Tests setting focus via AJAX command.
 *
 * @group Ajax
 */
class FocusFirstCommandTest extends WebDriverTestBase {
  
  /**
   * {@inheritdoc}
   */
  protected static $modules = [
    'ajax_test',
  ];
  
  /**
   * {@inheritdoc}
   */
  protected $defaultTheme = 'stark';
  
  /**
   * Tests AjaxFocusFirstCommand on a page.
   */
  public function testFocusFirst() : void {
    $page = $this->getSession()
      ->getPage();
    $assert_session = $this->assertSession();
    $this->drupalGet('ajax-test/focus-first');
    $has_focus_id = $this->getSession()
      ->evaluateScript('document.activeElement.id');
    $this->assertNotContains($has_focus_id, [
      'edit-first-input',
      'edit-first-container-input',
    ]);
    // Confirm that focus does not change if the selector targets a
    // non-focusable container containing no tabbable elements.
    $page->pressButton('SelectorNothingTabbable');
    $this->assertNotNull($assert_session->waitForElementVisible('css', '#edit-selector-has-nothing-tabbable[data-has-focus]'));
    $has_focus_id = $this->getSession()
      ->evaluateScript('document.activeElement.id');
    $this->assertEquals('edit-selector-has-nothing-tabbable', $has_focus_id);
    // Confirm that focus does not change if the page has no match for the
    // provided selector.
    $page->pressButton('SelectorNotExist');
    $this->assertNotNull($assert_session->waitForElementVisible('css', '#edit-selector-does-not-exist[data-has-focus]'));
    $has_focus_id = $this->getSession()
      ->evaluateScript('document.activeElement.id');
    $this->assertEquals('edit-selector-does-not-exist', $has_focus_id);
    // Confirm focus is moved to first tabbable element in a container.
    $page->pressButton('focusFirstContainer');
    $this->assertNotNull($assert_session->waitForElementVisible('css', '#edit-first-container-input[data-has-focus]'));
    $has_focus_id = $this->getSession()
      ->evaluateScript('document.activeElement.id');
    $this->assertEquals('edit-first-container-input', $has_focus_id);
    // Confirm focus is moved to first tabbable element in a form.
    $page->pressButton('focusFirstForm');
    $this->assertNotNull($assert_session->waitForElementVisible('css', '#ajax-test-focus-first-command-form #edit-first-input[data-has-focus]'));
    // Confirm the form has more than one input to confirm that focus is moved
    // to the first tabbable element in the container.
    $this->assertNotNull($page->find('css', '#ajax-test-focus-first-command-form #edit-second-input'));
    $has_focus_id = $this->getSession()
      ->evaluateScript('document.activeElement.id');
    $this->assertEquals('edit-first-input', $has_focus_id);
    // Confirm that the selector provided will use the first match in the DOM as
    // the container.
    $page->pressButton('SelectorMultipleMatches');
    $this->assertNotNull($assert_session->waitForElementVisible('css', '#edit-inside-same-selector-container-1[data-has-focus]'));
    $this->assertNotNull($page->findById('edit-inside-same-selector-container-2'));
    $this->assertNull($assert_session->waitForElementVisible('css', '#edit-inside-same-selector-container-2[data-has-focus]'));
    $has_focus_id = $this->getSession()
      ->evaluateScript('document.activeElement.id');
    $this->assertEquals('edit-inside-same-selector-container-1', $has_focus_id);
    // Confirm that if a container has no tabbable children, but is itself
    // focusable, then that container receives focus.
    $page->pressButton('focusableContainerNotTabbableChildren');
    $this->assertNotNull($assert_session->waitForElementVisible('css', '#focusable-container-without-tabbable-children[data-has-focus]'));
    $has_focus_id = $this->getSession()
      ->evaluateScript('document.activeElement.id');
    $this->assertEquals('focusable-container-without-tabbable-children', $has_focus_id);
  }

}