Move into nested docroot

web/core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxTest.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+
+/**
+ * Tests AJAX responses.
+ *
+ * @group Ajax
+ */
+class AjaxTest extends JavascriptTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = ['ajax_test'];
+
+  public function testAjaxWithAdminRoute() {
+    \Drupal::service('theme_installer')->install(['stable', 'seven']);
+    $theme_config = \Drupal::configFactory()->getEditable('system.theme');
+    $theme_config->set('admin', 'seven');
+    $theme_config->set('default', 'stable');
+    $theme_config->save();
+
+    $account = $this->drupalCreateUser(['view the administration theme']);
+    $this->drupalLogin($account);
+
+    // First visit the site directly via the URL. This should render it in the
+    // admin theme.
+    $this->drupalGet('admin/ajax-test/theme');
+    $assert = $this->assertSession();
+    $assert->pageTextContains('Current theme: seven');
+
+    // Now click the modal, which should also use the admin theme.
+    $this->drupalGet('ajax-test/dialog');
+    $assert->pageTextNotContains('Current theme: stable');
+    $this->clickLink('Link 8 (ajax)');
+    $assert->assertWaitOnAjaxRequest();
+
+    $assert->pageTextContains('Current theme: stable');
+    $assert->pageTextNotContains('Current theme: seven');
+  }
+
+  /**
+   * Test that AJAX loaded libraries are not retained between requests.
+   *
+   * @see https://www.drupal.org/node/2647916
+   */
+  public function testDrupalSettingsCachingRegression() {
+    $this->drupalGet('ajax-test/dialog');
+    $assert = $this->assertSession();
+    $session = $this->getSession();
+
+    // Insert a fake library into the already loaded library settings.
+    $fake_library = 'fakeLibrary/fakeLibrary';
+    $session->evaluateScript("drupalSettings.ajaxPageState.libraries = drupalSettings.ajaxPageState.libraries + ',$fake_library';");
+
+    $libraries = $session->evaluateScript('drupalSettings.ajaxPageState.libraries');
+    // Test that the fake library is set.
+    $this->assertContains($fake_library, $libraries);
+
+    // Click on the AJAX link.
+    $this->clickLink('Link 8 (ajax)');
+    $assert->assertWaitOnAjaxRequest();
+
+    // Test that the fake library is still set after the AJAX call.
+    $libraries = $session->evaluateScript('drupalSettings.ajaxPageState.libraries');
+    $this->assertContains($fake_library, $libraries);
+
+    // Reload the page, this should reset the loaded libraries and remove the
+    // fake library.
+    $this->drupalGet('ajax-test/dialog');
+    $libraries = $session->evaluateScript('drupalSettings.ajaxPageState.libraries');
+    $this->assertNotContains($fake_library, $libraries);
+
+    // Click on the AJAX link again, and the libraries should still not contain
+    // the fake library.
+    $this->clickLink('Link 8 (ajax)');
+    $assert->assertWaitOnAjaxRequest();
+    $libraries = $session->evaluateScript('drupalSettings.ajaxPageState.libraries');
+    $this->assertNotContains($fake_library, $libraries);
+  }
+
+}

web/core/tests/Drupal/FunctionalJavascriptTests/Core/MachineNameTest.php

@@ -0,0 +1,116 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Core;
+
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+
+/**
+ * Tests for the machine name field.
+ *
+ * @group field
+ */
+class MachineNameTest extends JavascriptTestBase {
+
+  /**
+   * Required modules.
+   *
+   * Node is required because the machine name callback checks for
+   * access_content.
+   *
+   * @var array
+   */
+  public static $modules = ['node', 'form_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    $account = $this->drupalCreateUser(array(
+      'access content',
+    ));
+    $this->drupalLogin($account);
+  }
+
+  /**
+   * Tests that machine name field functions.
+   *
+   * Makes sure that the machine name field automatically provides a valid
+   * machine name and that the manual editing mode functions.
+   */
+  public function testMachineName() {
+    // Visit the machine name test page which contains two machine name fields.
+    $this->drupalGet('form-test/machine-name');
+
+    // Test values for conversion.
+    $test_values = [
+      [
+        'input' => 'Test value !0-9@',
+        'message' => 'A title that should be transliterated must be equal to the php generated machine name',
+        'expected' => 'test_value_0_9_',
+      ],
+      [
+        'input' => 'Test value',
+        'message' => 'A title that should not be transliterated must be equal to the php generated machine name',
+        'expected' => 'test_value',
+      ],
+    ];
+
+    // Get page and session.
+    $page = $this->getSession()->getPage();
+    $assert_session = $this->assertSession();
+
+    // Get elements from the page.
+    $title_1 = $page->findField('machine_name_1_label');
+    $machine_name_1_field = $page->findField('machine_name_1');
+    $machine_name_2_field = $page->findField('machine_name_2');
+    $machine_name_1_wrapper = $machine_name_1_field->getParent();
+    $machine_name_2_wrapper = $machine_name_2_field->getParent();
+    $machine_name_1_value = $page->find('css', '#edit-machine-name-1-label-machine-name-suffix .machine-name-value');
+    $machine_name_2_value = $page->find('css', '#edit-machine-name-2-label-machine-name-suffix .machine-name-value');
+    $button_1 = $page->find('css', '#edit-machine-name-1-label-machine-name-suffix button.link');
+
+    // Assert both fields are initialized correctly.
+    $this->assertNotEmpty($machine_name_1_value, 'Machine name field 1 must be initialized');
+    $this->assertNotEmpty($machine_name_2_value, 'Machine name field 2 must be initialized');
+
+    // Field must be present for the rest of the test to work.
+    if (empty($machine_name_1_value)) {
+      $this->fail('Cannot finish test, missing machine name field');
+    }
+
+    // Test each value for conversion to a machine name.
+    foreach ($test_values as $test_info) {
+      // Set the value for the field, triggering the machine name update.
+      $title_1->setValue($test_info['input']);
+
+      // Wait the set timeout for fetching the machine name.
+      $this->assertJsCondition('jQuery("#edit-machine-name-1-label-machine-name-suffix .machine-name-value").html() == "' . $test_info['expected'] . '"');
+
+      // Validate the generated machine name.
+      $this->assertEquals($test_info['expected'], $machine_name_1_value->getHtml(), $test_info['message']);
+
+      // Validate the second machine name field is empty.
+      $this->assertEmpty($machine_name_2_value->getHtml(), 'The second machine name field should still be empty');
+    }
+
+    // Validate the machine name field is hidden. Elements are visually hidden
+    // using positioning, isVisible() will therefore not work.
+    $this->assertEquals(TRUE, $machine_name_1_wrapper->hasClass('visually-hidden'), 'The ID field must not be visible');
+    $this->assertEquals(TRUE, $machine_name_2_wrapper->hasClass('visually-hidden'), 'The ID field must not be visible');
+
+    // Test switching back to the manual editing mode by clicking the edit link.
+    $button_1->click();
+
+    // Validate the visibility of the machine name field.
+    $this->assertEquals(FALSE, $machine_name_1_wrapper->hasClass('visually-hidden'), 'The ID field must now be visible');
+
+    // Validate the visibility of the second machine name field.
+    $this->assertEquals(TRUE, $machine_name_2_wrapper->hasClass('visually-hidden'), 'The ID field must not be visible');
+
+    // Validate if the element contains the correct value.
+    $this->assertEquals($test_values[1]['expected'], $machine_name_1_field->getValue(), 'The ID field value must be equal to the php generated machine name');
+  }
+
+}

web/core/tests/Drupal/FunctionalJavascriptTests/Core/Session/SessionTest.php

@@ -0,0 +1,61 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Core\Session;
+
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+use Drupal\menu_link_content\Entity\MenuLinkContent;
+
+/**
+ * Tests that sessions don't expire.
+ *
+ * @group session
+ */
+class SessionTest extends JavascriptTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = ['menu_link_content', 'block'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    $account = $this->drupalCreateUser();
+    $this->drupalLogin($account);
+
+    $menu_link_content = MenuLinkContent::create([
+      'title' => 'Link to front page',
+      'menu_name' => 'tools',
+      'link' => ['uri' => 'route:<front>'],
+    ]);
+    $menu_link_content->save();
+
+    $this->drupalPlaceBlock('system_menu_block:tools');
+  }
+
+  /**
+   * Tests that the session doesn't expire.
+   *
+   * Makes sure that drupal_valid_test_ua() works for multiple requests
+   * performed by the Mink browser. The SIMPLETEST_USER_AGENT cookie must always
+   * be valid.
+   */
+  public function testSessionExpiration() {
+    // Visit the front page and click the link back to the front page a large
+    // number of times.
+    $this->drupalGet('<front>');
+
+    $session_assert = $this->assertSession();
+
+    $page = $this->getSession()->getPage();
+
+    for ($i = 0; $i < 25; $i++) {
+      $page->clickLink('Link to front page');
+      $session_assert->statusCodeEquals(200);
+    }
+  }
+
+}

web/core/tests/Drupal/FunctionalJavascriptTests/Dialog/DialogPositionTest.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Dialog;
+
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+
+/**
+ * Tests the JavaScript functionality of the dialog position.
+ *
+ * @group dialog
+ */
+class DialogPositionTest extends JavascriptTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = ['block'];
+
+  /**
+   * Tests if the dialog UI works properly with block layout page.
+   */
+  public function testDialogOpenAndClose() {
+    $admin_user = $this->drupalCreateUser(['administer blocks']);
+    $this->drupalLogin($admin_user);
+    $this->drupalGet('admin/structure/block');
+    $session = $this->getSession();
+    $assert_session = $this->assertSession();
+    $page = $session->getPage();
+
+    // Open the dialog using the place block link.
+    $placeBlockLink = $page->findLink('Place block');
+    $this->assertTrue($placeBlockLink->isVisible(), 'Place block button exists.');
+    $placeBlockLink->click();
+    $assert_session->assertWaitOnAjaxRequest();
+    $dialog = $page->find('css', '.ui-dialog');
+    $this->assertTrue($dialog->isVisible(), 'Dialog is opened after clicking the Place block button.');
+
+    // Close the dialog again.
+    $closeButton = $page->find('css', '.ui-dialog-titlebar-close');
+    $closeButton->click();
+    $assert_session->assertWaitOnAjaxRequest();
+    $dialog = $page->find('css', '.ui-dialog');
+    $this->assertNull($dialog, 'Dialog is closed after clicking the close button.');
+
+    // Resize the window. The test should pass after waiting for Javascript to
+    // finish as no Javascript errors should have been triggered. If there were
+    // javascript errors the test will fail on that.
+    $session->resizeWindow(625, 625);
+    $assert_session->assertWaitOnAjaxRequest();
+  }
+
+}

web/core/tests/Drupal/FunctionalJavascriptTests/EntityReference/EntityReferenceAutocompleteWidgetTest.php

@@ -0,0 +1,102 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests\EntityReference;
+
+use Drupal\field\Tests\EntityReference\EntityReferenceTestTrait;
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+use Drupal\simpletest\ContentTypeCreationTrait;
+use Drupal\simpletest\NodeCreationTrait;
+
+/**
+ * Tests the output of entity reference autocomplete widgets.
+ *
+ * @group entity_reference
+ */
+class EntityReferenceAutocompleteWidgetTest extends JavascriptTestBase {
+
+  use ContentTypeCreationTrait;
+  use EntityReferenceTestTrait;
+  use NodeCreationTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = ['node'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    // Create a Content type and two test nodes.
+    $this->createContentType(['type' => 'page']);
+    $this->createNode(['title' => 'Test page']);
+    $this->createNode(['title' => 'Page test']);
+
+    $user = $this->drupalCreateUser([
+      'access content',
+      'create page content',
+    ]);
+    $this->drupalLogin($user);
+  }
+
+  /**
+   * Tests that the default autocomplete widget return the correct results.
+   */
+  public function testEntityReferenceAutocompleteWidget() {
+    // Create an entity reference field and use the default 'CONTAINS' match
+    // operator.
+    $field_name = 'field_test';
+    $this->createEntityReferenceField('node', 'page', $field_name, $field_name, 'node', 'default', ['target_bundles' => ['page']]);
+    entity_get_form_display('node', 'page', 'default')
+      ->setComponent($field_name, [
+        'type' => 'entity_reference_autocomplete',
+        'settings' => array(
+          'match_operator' => 'CONTAINS',
+        ),
+      ])
+      ->save();
+
+    // Visit the node add page.
+    $this->drupalGet('node/add/page');
+    $page = $this->getSession()->getPage();
+    $assert_session = $this->assertSession();
+
+    $autocomplete_field = $page->findField($field_name . '[0][target_id]');
+    $autocomplete_field->setValue('Test');
+    $this->getSession()->getDriver()->keyDown($autocomplete_field->getXpath(), ' ');
+    $assert_session->waitOnAutocomplete();
+
+    $results = $page->findAll('css', '.ui-autocomplete li');
+
+    $this->assertCount(2, $results);
+    $assert_session->pageTextContains('Test page');
+    $assert_session->pageTextContains('Page test');
+
+    // Now switch the autocomplete widget to the 'STARTS_WITH' match operator.
+    entity_get_form_display('node', 'page', 'default')
+      ->setComponent($field_name, [
+        'type' => 'entity_reference_autocomplete',
+        'settings' => array(
+          'match_operator' => 'STARTS_WITH',
+        ),
+      ])
+      ->save();
+
+    $this->drupalGet('node/add/page');
+    $page = $this->getSession()->getPage();
+
+    $autocomplete_field = $page->findField($field_name . '[0][target_id]');
+    $autocomplete_field->setValue('Test');
+    $this->getSession()->getDriver()->keyDown($autocomplete_field->getXpath(), ' ');
+    $assert_session->waitOnAutocomplete();
+
+    $results = $page->findAll('css', '.ui-autocomplete li');
+
+    $this->assertCount(1, $results);
+    $assert_session->pageTextContains('Test page');
+    $assert_session->pageTextNotContains('Page test');
+  }
+
+}

web/core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php

@@ -0,0 +1,369 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests;
+
+use Behat\Mink\Element\NodeElement;
+use Behat\Mink\Exception\ElementHtmlException;
+use Behat\Mink\Exception\ElementNotFoundException;
+use Behat\Mink\Exception\UnsupportedDriverActionException;
+use Drupal\Tests\WebAssert;
+
+/**
+ * Defines a class with methods for asserting presence of elements during tests.
+ */
+class JSWebAssert extends WebAssert {
+
+  /**
+   * Waits for AJAX request to be completed.
+   *
+   * @param int $timeout
+   *   (Optional) Timeout in milliseconds, defaults to 10000.
+   * @param string $message
+   *   (optional) A message for exception.
+   *
+   * @throws \RuntimeException
+   *   When the request is not completed. If left blank, a default message will
+   *   be displayed.
+   */
+  public function assertWaitOnAjaxRequest($timeout = 10000, $message = 'Unable to complete AJAX request.') {
+    $condition = <<<JS
+      (function() {
+        function isAjaxing(instance) {
+          return instance && instance.ajaxing === true;
+        }
+        return (
+          // Assert no AJAX request is running (via jQuery or Drupal) and no
+          // animation is running.
+          (typeof jQuery === 'undefined' || (jQuery.active === 0 && jQuery(':animated').length === 0)) &&
+          (typeof Drupal === 'undefined' || typeof Drupal.ajax === 'undefined' || !Drupal.ajax.instances.some(isAjaxing))
+        );
+      }());
+JS;
+    $result = $this->session->wait($timeout, $condition);
+    if (!$result) {
+      throw new \RuntimeException($message);
+    }
+  }
+
+  /**
+   * Waits for the specified selector and returns it when available.
+   *
+   * @param string $selector
+   *   The selector engine name. See ElementInterface::findAll() for the
+   *   supported selectors.
+   * @param string|array $locator
+   *   The selector locator.
+   * @param int $timeout
+   *   (Optional) Timeout in milliseconds, defaults to 10000.
+   *
+   * @return \Behat\Mink\Element\NodeElement|null
+   *   The page element node if found, NULL if not.
+   *
+   * @see \Behat\Mink\Element\ElementInterface::findAll()
+   */
+  public function waitForElement($selector, $locator, $timeout = 10000) {
+    $page = $this->session->getPage();
+
+    $result = $page->waitFor($timeout / 1000, function() use ($page, $selector, $locator) {
+      return $page->find($selector, $locator);
+    });
+
+    return $result;
+  }
+
+  /**
+   * Waits for the specified selector and returns it when available and visible.
+   *
+   * @param string $selector
+   *   The selector engine name. See ElementInterface::findAll() for the
+   *   supported selectors.
+   * @param string|array $locator
+   *   The selector locator.
+   * @param int $timeout
+   *   (Optional) Timeout in milliseconds, defaults to 10000.
+   *
+   * @return \Behat\Mink\Element\NodeElement|null
+   *   The page element node if found and visible, NULL if not.
+   *
+   * @see \Behat\Mink\Element\ElementInterface::findAll()
+   */
+  public function waitForElementVisible($selector, $locator, $timeout = 10000) {
+    $page = $this->session->getPage();
+
+    $result = $page->waitFor($timeout / 1000, function() use ($page, $selector, $locator) {
+      $element = $page->find($selector, $locator);
+      if (!empty($element) && $element->isVisible()) {
+        return $element;
+      }
+      return NULL;
+    });
+
+    return $result;
+  }
+  /**
+   * Waits for a button (input[type=submit|image|button|reset], button) with
+   * specified locator and returns it.
+   *
+   * @param string $locator
+   *   The button ID, value or alt string.
+   * @param int $timeout
+   *   (Optional) Timeout in milliseconds, defaults to 10000.
+   *
+   * @return \Behat\Mink\Element\NodeElement|null
+   *   The page element node if found, NULL if not.
+   */
+  public function waitForButton($locator, $timeout = 10000) {
+    return $this->waitForElement('named', array('button', $locator), $timeout);
+  }
+
+  /**
+   * Waits for a link with specified locator and returns it when available.
+   *
+   * @param string $locator
+   *   The link ID, title, text or image alt.
+   * @param int $timeout
+   *   (Optional) Timeout in milliseconds, defaults to 10000.
+   *
+   * @return \Behat\Mink\Element\NodeElement|null
+   *   The page element node if found, NULL if not.
+   */
+  public function waitForLink($locator, $timeout = 10000) {
+    return $this->waitForElement('named', array('link', $locator), $timeout);
+  }
+
+  /**
+   * Waits for a field with specified locator and returns it when available.
+   *
+   * @param string $locator
+   *   The input ID, name or label for the field (input, textarea, select).
+   * @param int $timeout
+   *   (Optional) Timeout in milliseconds, defaults to 10000.
+   *
+   * @return \Behat\Mink\Element\NodeElement|null
+   *   The page element node if found, NULL if not.
+   */
+  public function waitForField($locator, $timeout = 10000) {
+    return $this->waitForElement('named', array('field', $locator), $timeout);
+  }
+
+  /**
+   * Waits for an element by its id and returns it when available.
+   *
+   * @param string $id
+   *   The element ID.
+   * @param int $timeout
+   *   (Optional) Timeout in milliseconds, defaults to 10000.
+   *
+   * @return \Behat\Mink\Element\NodeElement|null
+   *   The page element node if found, NULL if not.
+   */
+  public function waitForId($id, $timeout = 10000) {
+    return $this->waitForElement('named', array('id', $id), $timeout);
+  }
+
+  /**
+   * Waits for the jQuery autocomplete delay duration.
+   *
+   * @see https://api.jqueryui.com/autocomplete/#option-delay
+   */
+  public function waitOnAutocomplete() {
+    // Wait for the autocomplete to be visible.
+    return $this->waitForElementVisible('css', '.ui-autocomplete li');
+  }
+
+  /**
+   * Test that a node, or it's specific corner, is visible in the viewport.
+   *
+   * Note: Always set the viewport size. This can be done with a PhantomJS
+   * startup parameter or in your test with \Behat\Mink\Session->resizeWindow().
+   * Drupal CI Javascript tests by default use a viewport of 1024x768px.
+   *
+   * @param string $selector_type
+   *   The element selector type (CSS, XPath).
+   * @param string|array $selector
+   *   The element selector. Note: the first found element is used.
+   * @param bool|string $corner
+   *   (Optional) The corner to test:
+   *   topLeft, topRight, bottomRight, bottomLeft.
+   *   Or FALSE to check the complete element (default).
+   * @param string $message
+   *   (optional) A message for the exception.
+   *
+   * @throws \Behat\Mink\Exception\ElementHtmlException
+   *   When the element doesn't exist.
+   * @throws \Behat\Mink\Exception\ElementNotFoundException
+   *   When the element is not visible in the viewport.
+   */
+  public function assertVisibleInViewport($selector_type, $selector, $corner = FALSE, $message = 'Element is not visible in the viewport.') {
+    $node = $this->session->getPage()->find($selector_type, $selector);
+    if ($node === NULL) {
+      if (is_array($selector)) {
+        $selector = implode(' ', $selector);
+      }
+      throw new ElementNotFoundException($this->session->getDriver(), 'element', $selector_type, $selector);
+    }
+
+    // Check if the node is visible on the page, which is a prerequisite of
+    // being visible in the viewport.
+    if (!$node->isVisible()) {
+      throw new ElementHtmlException($message, $this->session->getDriver(), $node);
+    }
+
+    $result = $this->checkNodeVisibilityInViewport($node, $corner);
+
+    if (!$result) {
+      throw new ElementHtmlException($message, $this->session->getDriver(), $node);
+    }
+  }
+
+  /**
+   * Test that a node, or its specific corner, is not visible in the viewport.
+   *
+   * Note: the node should exist in the page, otherwise this assertion fails.
+   *
+   * @param string $selector_type
+   *   The element selector type (CSS, XPath).
+   * @param string|array $selector
+   *   The element selector. Note: the first found element is used.
+   * @param bool|string $corner
+   *   (Optional) Corner to test: topLeft, topRight, bottomRight, bottomLeft.
+   *   Or FALSE to check the complete element (default).
+   * @param string $message
+   *   (optional) A message for the exception.
+   *
+   * @throws \Behat\Mink\Exception\ElementHtmlException
+   *   When the element doesn't exist.
+   * @throws \Behat\Mink\Exception\ElementNotFoundException
+   *   When the element is not visible in the viewport.
+   *
+   * @see \Drupal\FunctionalJavascriptTests\JSWebAssert::assertVisibleInViewport()
+   */
+  public function assertNotVisibleInViewport($selector_type, $selector, $corner = FALSE, $message = 'Element is visible in the viewport.') {
+    $node = $this->session->getPage()->find($selector_type, $selector);
+    if ($node === NULL) {
+      if (is_array($selector)) {
+        $selector = implode(' ', $selector);
+      }
+      throw new ElementNotFoundException($this->session->getDriver(), 'element', $selector_type, $selector);
+    }
+
+    $result = $this->checkNodeVisibilityInViewport($node, $corner);
+
+    if ($result) {
+      throw new ElementHtmlException($message, $this->session->getDriver(), $node);
+    }
+  }
+
+  /**
+   * Check the visibility of a node, or it's specific corner.
+   *
+   * @param \Behat\Mink\Element\NodeElement $node
+   *   A valid node.
+   * @param bool|string $corner
+   *   (Optional) Corner to test: topLeft, topRight, bottomRight, bottomLeft.
+   *   Or FALSE to check the complete element (default).
+   *
+   * @return bool
+   *   Returns TRUE if the node is visible in the viewport, FALSE otherwise.
+   *
+   * @throws \Behat\Mink\Exception\UnsupportedDriverActionException
+   *   When an invalid corner specification is given.
+   */
+  private function checkNodeVisibilityInViewport(NodeElement $node, $corner = FALSE) {
+    $xpath = $node->getXpath();
+
+    // Build the Javascript to test if the complete element or a specific corner
+    // is in the viewport.
+    switch ($corner) {
+      case 'topLeft':
+        $test_javascript_function = <<<JS
+          function t(r, lx, ly) {
+            return (
+              r.top >= 0 &&
+              r.top <= ly &&
+              r.left >= 0 &&
+              r.left <= lx
+            )
+          }
+JS;
+        break;
+
+      case 'topRight':
+        $test_javascript_function = <<<JS
+          function t(r, lx, ly) {
+            return (
+              r.top >= 0 &&
+              r.top <= ly &&
+              r.right >= 0 &&
+              r.right <= lx
+            );
+          }
+JS;
+        break;
+
+      case 'bottomRight':
+        $test_javascript_function = <<<JS
+          function t(r, lx, ly) {
+            return (
+              r.bottom >= 0 &&
+              r.bottom <= ly &&
+              r.right >= 0 &&
+              r.right <= lx
+            );
+          }
+JS;
+        break;
+
+      case 'bottomLeft':
+        $test_javascript_function = <<<JS
+          function t(r, lx, ly) {
+            return (
+              r.bottom >= 0 &&
+              r.bottom <= ly &&
+              r.left >= 0 &&
+              r.left <= lx
+            );
+          }
+JS;
+        break;
+
+      case FALSE:
+        $test_javascript_function = <<<JS
+          function t(r, lx, ly) {
+            return (
+              r.top >= 0 &&
+              r.left >= 0 &&
+              r.bottom <= ly &&
+              r.right <= lx
+            );
+          }
+JS;
+        break;
+
+      // Throw an exception if an invalid corner parameter is given.
+      default:
+        throw new UnsupportedDriverActionException($corner, $this->session->getDriver());
+    }
+
+    // Build the full Javascript test. The shared logic gets the corner
+    // specific test logic injected.
+    $full_javascript_visibility_test = <<<JS
+      (function(t){
+        var w = window,
+        d = document,
+        e = d.documentElement,
+        n = d.evaluate("$xpath", d, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue,
+        r = n.getBoundingClientRect(),
+        lx = (w.innerWidth || e.clientWidth),
+        ly = (w.innerHeight || e.clientHeight);
+
+        return t(r, lx, ly);
+      }($test_javascript_function));
+JS;
+
+    // Check the visibility by injecting and executing the full Javascript test
+    // script in the page.
+    return $this->session->evaluateScript($full_javascript_visibility_test);
+  }
+
+}

web/core/tests/Drupal/FunctionalJavascriptTests/JavascriptTestBase.php

@@ -0,0 +1,172 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests;
+
+use Drupal\Tests\BrowserTestBase;
+use Zumba\GastonJS\Exception\DeadClient;
+use Zumba\Mink\Driver\PhantomJSDriver;
+
+/**
+ * Runs a browser test using PhantomJS.
+ *
+ * Base class for testing browser interaction implemented in JavaScript.
+ */
+abstract class JavascriptTestBase extends BrowserTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $minkDefaultDriverClass = PhantomJSDriver::class;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function initMink() {
+    // Set up the template cache used by the PhantomJS mink driver.
+    $path = $this->tempFilesDirectory . DIRECTORY_SEPARATOR . 'browsertestbase-templatecache';
+    $this->minkDefaultDriverArgs = [
+      'http://127.0.0.1:8510',
+      $path,
+    ];
+    if (!file_exists($path)) {
+      mkdir($path);
+    }
+
+    try {
+      return parent::initMink();
+    }
+    catch (DeadClient $e) {
+      $this->markTestSkipped('PhantomJS is either not installed or not running. Start it via phantomjs --ssl-protocol=any --ignore-ssl-errors=true vendor/jcalderonzumba/gastonjs/src/Client/main.js 8510 1024 768&');
+    }
+    catch (\Exception $e) {
+      $this->markTestSkipped('An unexpected error occurred while starting Mink: ' . $e->getMessage());
+    }
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function tearDown() {
+    if ($this->mink) {
+      // Wait for all requests to finish. It is possible that an AJAX request is
+      // still on-going.
+      $result = $this->getSession()->wait(5000, '(typeof(jQuery)=="undefined" || (0 === jQuery.active && 0 === jQuery(\':animated\').length))');
+      if (!$result) {
+        // If the wait is unsuccessful, there may still be an AJAX request in
+        // progress. If we tear down now, then this AJAX request may fail with
+        // missing database tables, because tear down will have removed them.
+        // Rather than allow it to fail, throw an explicit exception now
+        // explaining what the problem is.
+        throw new \RuntimeException('Unfinished AJAX requests while tearing down a test');
+      }
+    }
+    parent::tearDown();
+  }
+
+  /**
+   * Asserts that the element with the given CSS selector is visible.
+   *
+   * @param string $css_selector
+   *   The CSS selector identifying the element to check.
+   * @param string $message
+   *   Optional message to show alongside the assertion.
+   *
+   * @deprecated in Drupal 8.1.x, will be removed before Drupal 8.3.x. Use
+   *   \Behat\Mink\Element\NodeElement::isVisible() instead.
+   */
+  protected function assertElementVisible($css_selector, $message = '') {
+    $this->assertTrue($this->getSession()->getDriver()->isVisible($this->cssSelectToXpath($css_selector)), $message);
+  }
+
+  /**
+   * Asserts that the element with the given CSS selector is not visible.
+   *
+   * @param string $css_selector
+   *   The CSS selector identifying the element to check.
+   * @param string $message
+   *   Optional message to show alongside the assertion.
+   *
+   * @deprecated in Drupal 8.1.x, will be removed before Drupal 8.3.x. Use
+   *   \Behat\Mink\Element\NodeElement::isVisible() instead.
+   */
+  protected function assertElementNotVisible($css_selector, $message = '') {
+    $this->assertFalse($this->getSession()->getDriver()->isVisible($this->cssSelectToXpath($css_selector)), $message);
+  }
+
+  /**
+   * Waits for the given time or until the given JS condition becomes TRUE.
+   *
+   * @param string $condition
+   *   JS condition to wait until it becomes TRUE.
+   * @param int $timeout
+   *   (Optional) Timeout in milliseconds, defaults to 10000.
+   * @param string $message
+   *   (optional) A message to display with the assertion. If left blank, a
+   *   default message will be displayed.
+   *
+   * @throws \PHPUnit_Framework_AssertionFailedError
+   *
+   * @see \Behat\Mink\Driver\DriverInterface::evaluateScript()
+   */
+  protected function assertJsCondition($condition, $timeout = 10000, $message = '') {
+    $message = $message ?: "Javascript condition met:\n" . $condition;
+    $result = $this->getSession()->getDriver()->wait($timeout, $condition);
+    $this->assertTrue($result, $message);
+  }
+
+  /**
+   * Creates a screenshot.
+   *
+   * @param string $filename
+   *   The file name of the resulting screenshot. If using the default phantomjs
+   *   driver then this should be a JPG filename.
+   * @param bool $set_background_color
+   *   (optional) By default this method will set the background color to white.
+   *   Set to FALSE to override this behaviour.
+   *
+   * @throws \Behat\Mink\Exception\UnsupportedDriverActionException
+   *   When operation not supported by the driver.
+   * @throws \Behat\Mink\Exception\DriverException
+   *   When the operation cannot be done.
+   */
+  protected function createScreenshot($filename, $set_background_color = TRUE) {
+    $session = $this->getSession();
+    if ($set_background_color) {
+      $session->executeScript("document.body.style.backgroundColor = 'white';");
+    }
+    $image = $session->getScreenshot();
+    file_put_contents($filename, $image);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function assertSession($name = NULL) {
+    return new JSWebAssert($this->getSession($name), $this->baseUrl);
+  }
+
+  /**
+   * Gets the current Drupal javascript settings and parses into an array.
+   *
+   * Unlike BrowserTestBase::getDrupalSettings(), this implementation reads the
+   * current values of drupalSettings, capturing all changes made via javascript
+   * after the page was loaded.
+   *
+   * @return array
+   *   The Drupal javascript settings array.
+   *
+   * @see \Drupal\Tests\BrowserTestBase::getDrupalSettings()
+   */
+  protected function getDrupalSettings() {
+    $script = <<<EndOfScript
+(function () {
+  if (typeof drupalSettings !== 'undefined') {
+    return drupalSettings;
+  }
+})();
+EndOfScript;
+
+    return $this->getSession()->evaluateScript($script) ?: [];
+  }
+
+}

web/core/tests/Drupal/FunctionalJavascriptTests/Tests/JSWebAssertTest.php

@@ -0,0 +1,89 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Tests;
+
+use Behat\Mink\Element\NodeElement;
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+
+/**
+ * Tests for the JSWebAssert class.
+ *
+ * @group javascript
+ */
+class JSWebAssertTest extends JavascriptTestBase {
+
+  /**
+   * Required modules.
+   *
+   * @var array
+   */
+  public static $modules = ['js_webassert_test'];
+
+  /**
+   * Tests that JSWebAssert assertions work correctly.
+   */
+  public function testJsWebAssert() {
+    $this->drupalGet('js_webassert_test_form');
+
+    $session = $this->getSession();
+    $assert_session = $this->assertSession();
+    $page = $session->getPage();
+
+    $test_button = $page->findButton('Add button');
+    $test_link = $page->findButton('Add link');
+    $test_field = $page->findButton('Add field');
+    $test_id = $page->findButton('Add ID');
+    $test_wait_on_ajax = $page->findButton('Test assertWaitOnAjaxRequest');
+    $test_wait_on_element_visible = $page->findButton('Test waitForElementVisible');
+
+    // Test the wait...() methods by first checking the fields aren't available
+    // and then are available after the wait method.
+    $result = $page->findButton('Added button');
+    $this->assertEmpty($result);
+    $test_button->click();
+    $result = $assert_session->waitForButton('Added button');
+    $this->assertNotEmpty($result);
+    $this->assertTrue($result instanceof NodeElement);
+
+    $result = $page->findLink('Added link');
+    $this->assertEmpty($result);
+    $test_link->click();
+    $result = $assert_session->waitForLink('Added link');
+    $this->assertNotEmpty($result);
+    $this->assertTrue($result instanceof NodeElement);
+
+    $result = $page->findField('added_field');
+    $this->assertEmpty($result);
+    $test_field->click();
+    $result = $assert_session->waitForField('added_field');
+    $this->assertNotEmpty($result);
+    $this->assertTrue($result instanceof NodeElement);
+
+    $result = $page->findById('js_webassert_test_field_id');
+    $this->assertEmpty($result);
+    $test_id->click();
+    $result = $assert_session->waitForId('js_webassert_test_field_id');
+    $this->assertNotEmpty($result);
+    $this->assertTrue($result instanceof NodeElement);
+
+    // Test waitOnAjaxRequest. Verify the element is available after the wait
+    // and the behaviors have run on completing by checking the value.
+    $result = $page->findField('test_assert_wait_on_ajax_input');
+    $this->assertEmpty($result);
+    $test_wait_on_ajax->click();
+    $assert_session->assertWaitOnAjaxRequest();
+    $result = $page->findField('test_assert_wait_on_ajax_input');
+    $this->assertNotEmpty($result);
+    $this->assertTrue($result instanceof NodeElement);
+    $this->assertEquals('js_webassert_test', $result->getValue());
+
+    $result = $page->findButton('Added WaitForElementVisible');
+    $this->assertEmpty($result);
+    $test_wait_on_element_visible->click();
+    $result = $assert_session->waitForElementVisible('named', array('button', 'Added WaitForElementVisible'));
+    $this->assertNotEmpty($result);
+    $this->assertTrue($result instanceof NodeElement);
+    $this->assertEquals(TRUE, $result->isVisible());
+  }
+
+}