Update to Drupal 8.2.6. For more information, see https://www.drupal.org/project/drupal/releases/8.2.6

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();
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php

@@ -26,21 +26,149 @@ class JSWebAssert extends WebAssert {
    *   be displayed.
    */
   public function assertWaitOnAjaxRequest($timeout = 10000, $message = 'Unable to complete AJAX request.') {
-    $result = $this->session->wait($timeout, '(typeof(jQuery)=="undefined" || (0 === jQuery.active && 0 === jQuery(\':animated\').length))');
+    $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() {
-    // Drupal is using the default delay value of 300 milliseconds.
-    $this->session->wait(300);
-    $this->assertWaitOnAjaxRequest();
+    // Wait for the autocomplete to be visible.
+    return $this->waitForElementVisible('css', '.ui-autocomplete li');
   }
 
   /**

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());
+  }
+
+}