Issue #3331835 by Spokje, znerol, smustgrave, murilohp, bircher: Some...

Issue #3331835 by Spokje, znerol, smustgrave, murilohp, bircher: Some JavaScript errors are not recorded during test runs

core/modules/ckeditor5/ckeditor5.libraries.yml

@@ -110,6 +110,7 @@ internal.admin:
     - filter/drupal.filter.admin
     - core/jquery
     - core/once
+    - core/drupal.announce
 
 internal.admin.specialCharacters:
   css:

core/modules/ckeditor5/js/ckeditor5.admin.js

@@ -652,6 +652,10 @@
           '#filter-format-edit-form, #filter-format-add-form',
         );
 
+        if (!form) {
+          return;
+        }
+
         // Get the current stored UI state as an object.
         const currentStates = form.hasAttribute('data-drupal-ui-state')
           ? JSON.parse(form.getAttribute('data-drupal-ui-state'))
@@ -714,7 +718,9 @@
         if (activeTab) {
           setTimeout(() => {
             const activeTabLink = document.querySelector(activeTab);
-            activeTabLink.click();
+            if (activeTabLink) {
+              activeTabLink.click();
+            }
 
             // Only change focus on the plugin-settings-wrapper element.
             if (id !== 'plugin-settings-wrapper') {

core/modules/filter/filter.filter_html.admin.js

@@ -114,12 +114,14 @@
           });
 
         // When the allowed tags list is manually changed, update userTags.
-        that.$allowedHTMLFormItem.on('change.updateUserTags', function () {
-          that.userTags = difference(
-            Object.values(that._parseSetting(this.value)),
-            Object.values(that.autoTags),
-          );
-        });
+        if (that.autoTags) {
+          that.$allowedHTMLFormItem.on('change.updateUserTags', function () {
+            that.userTags = difference(
+              Object.values(that._parseSetting(this.value)),
+              Object.values(that.autoTags),
+            );
+          });
+        }
       });
     },
 

core/modules/system/tests/modules/js_errors_test/js/js_errors_async_test.js

+/**
+ * @file
+ *  Test script for JavaScript errors thrown in async context.
+ */
+(function () {
+  window.addEventListener('DOMContentLoaded', () => {
+    setTimeout(() => {
+      throw new Error('An error thrown in async context.');
+    });
+  });
+})();

core/modules/system/tests/modules/js_errors_test/js_errors_test.libraries.yml

@@ -4,3 +4,9 @@ errors_test:
     js/js_errors_test.js: {}
   dependencies:
     - core/drupal
+errors_async_test:
+  version: VERSION
+  js:
+    js/js_errors_async_test.js: {}
+  dependencies:
+    - core/drupal

core/modules/system/tests/modules/js_errors_test/js_errors_test.routing.yml

@@ -5,3 +5,10 @@ js_errors_test.errors:
     _title: 'JsErrorsTest'
   requirements:
     _access: 'TRUE'
+js_errors_async_test.errors:
+  path: '/js_errors_async_test'
+  defaults:
+    _controller: '\Drupal\js_errors_test\Controller\JsErrorsTestController::jsErrorsAsyncTest'
+    _title: 'JsErrorsAsyncTest'
+  requirements:
+    _access: 'TRUE'

core/modules/system/tests/modules/js_errors_test/src/Controller/JsErrorsTestController.php

@@ -19,4 +19,16 @@ public function jsErrorsTest(): array {
     ];
   }
 
+  /**
+   * Renders page that has js_errors_test/errors_async_test library attached.
+   *
+   * @return string[][]
+   *   Render array.
+   */
+  public function jsErrorsAsyncTest(): array {
+    return [
+      '#attached' => ['library' => ['js_errors_test/errors_async_test']],
+    ];
+  }
+
 }

core/modules/system/tests/modules/js_testing_log_test/js/js_testing_log.js

@@ -2,7 +2,7 @@
  * @file
  *  Support code for testing JavaScript error handling in functional tests.
  */
-(function (Drupal) {
+(function () {
   if (typeof console !== 'undefined' && console.warn) {
     const originalWarnFunction = console.warn;
     console.warn = (warning) => {
@@ -17,19 +17,17 @@
       );
       originalWarnFunction(warning);
     };
-
-    const originalThrowFunction = Drupal.throwError;
-    Drupal.throwError = (error) => {
-      const errors = JSON.parse(
-        sessionStorage.getItem('js_testing_log_test.errors') ||
-          JSON.stringify([]),
-      );
-      errors.push(error.stack);
-      sessionStorage.setItem(
-        'js_testing_log_test.errors',
-        JSON.stringify(errors),
-      );
-      originalThrowFunction(error);
-    };
   }
-})(Drupal);
+
+  window.addEventListener('error', (evt) => {
+    const errors = JSON.parse(
+      sessionStorage.getItem('js_testing_log_test.errors') ||
+        JSON.stringify([]),
+    );
+    errors.push(evt.error.stack);
+    sessionStorage.setItem(
+      'js_testing_log_test.errors',
+      JSON.stringify(errors),
+    );
+  });
+})();

core/modules/system/tests/modules/js_testing_log_test/js_testing_log_test.libraries.yml

@@ -2,5 +2,3 @@ deprecation_log:
   version: VERSION
   js:
     js/js_testing_log.js: {}
-  dependencies:
-    - core/drupal

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

@@ -101,6 +101,11 @@ public function testCurrentPathChange() {
    * Tests that overridden CSS files are not added during lazy load.
    */
   public function testLazyLoadOverriddenCSS() {
+    // The test_theme throws a few JavaScript errors. Since we're only
+    // interested in CSS for this test, we're not letting this test fail on
+    // those.
+    $this->failOnJavascriptConsoleErrors = FALSE;
+
     // The test theme overrides js.module.css without an implementation,
     // thereby removing it.
     \Drupal::service('theme_installer')->install(['test_theme']);

core/tests/Drupal/FunctionalJavascriptTests/Ajax/FormValuesTest.php

@@ -26,7 +26,6 @@ class FormValuesTest extends WebDriverTestBase {
    */
   protected function setUp(): void {
     parent::setUp();
-
     $this->drupalLogin($this->drupalCreateUser(['access content']));
   }
 
@@ -34,7 +33,6 @@ protected function setUp(): void {
    * Submits forms with select and checkbox elements via Ajax.
    */
   public function testSimpleAjaxFormValue() {
-
     $this->drupalGet('ajax_forms_test_get_form');
 
     $session = $this->getSession();
@@ -58,10 +56,23 @@ public function testSimpleAjaxFormValue() {
     $session->getPage()->uncheckField('checkbox');
     $div1 = $this->assertSession()->waitForElement('css', "div#ajax_checkbox_value:contains('unchecked')");
     $this->assertNotNull($div1, 'DataCommand updates the DOM as expected when a checkbox is de-selected');
+  }
+
+  /**
+   * Tests that AJAX elements with invalid callbacks return error code 500.
+   */
+  public function testSimpleInvalidCallbacksAjaxFormValue() {
+    $this->drupalGet('ajax_forms_test_get_form');
+
+    $session = $this->getSession();
 
-    // Verify that AJAX elements with invalid callbacks return error code 500.
     // Ensure the test error log is empty before these tests.
     $this->assertFileDoesNotExist(DRUPAL_ROOT . '/' . $this->siteDirectory . '/error.log');
+
+    // We're going to do some invalid requests. The JavaScript errors thrown
+    // whilst doing so are expected. Do not interpret them as a test failure.
+    $this->failOnJavascriptConsoleErrors = FALSE;
+
     // We don't need to check for the X-Drupal-Ajax-Token header with these
     // invalid requests.
     foreach (['null', 'empty', 'nonexistent'] as $key) {
@@ -74,10 +85,11 @@ public function testSimpleAjaxFormValue() {
 
       // The select element is enabled as the response is received.
       $this->assertSession()->waitForElement('css', "select[name=\"$element_name\"]:enabled");
+      // Not using File API, a potential error must trigger a PHP warning, which
+      // should be logged in the error.log.
       $this->assertFileExists(DRUPAL_ROOT . '/' . $this->siteDirectory . '/error.log');
       $this->assertStringContainsString('"The specified #ajax callback is empty or not callable."', file_get_contents(DRUPAL_ROOT . '/' . $this->siteDirectory . '/error.log'));
-      // The exceptions are expected. Do not interpret them as a test failure.
-      // Not using File API; a potential error must trigger a PHP warning.
+      // Remove error.log, so we have a clean slate for the next request.
       unlink(\Drupal::root() . '/' . $this->siteDirectory . '/error.log');
     }
     // We need to reload the page to kill any unfinished AJAX calls before

core/tests/Drupal/FunctionalJavascriptTests/JavascriptErrorsTest.php

@@ -39,6 +39,24 @@ public function testJavascriptErrors(): void {
     $this->failOnJavaScriptErrors();
   }
 
+  /**
+   * Tests that JavaScript console errors will result in a test failure
+   * during asynchronous calls.
+   */
+  public function testJavascriptErrorsAsync(): void {
+    // Visit page that will throw a JavaScript console error in async context.
+    $this->drupalGet('js_errors_async_test');
+    // Ensure that errors from previous page loads will be detected.
+    $this->drupalGet('user');
+
+    $this->expectException(AssertionFailedError::class);
+    $this->expectExceptionMessageMatches('/^Error: An error thrown in async context./');
+
+    // Manually call the method under test, as it cannot be caught by PHPUnit
+    // when triggered from assertPostConditions().
+    $this->failOnJavaScriptErrors();
+  }
+
   /**
    * Clear the JavaScript error log to prevent this test failing for real.
    *