Issue #3316816 by Wim Leers, nod_: Stabilize FunctionalJavascript testing...

Issue #3316816 by Wim Leers, nod_: Stabilize FunctionalJavascript testing AJAX: make ::setValue() trigger both "input" and "formUpdated" events

core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTestBase.php

@@ -86,14 +86,8 @@ protected function addImage() {
     $this->waitForEditor();
     $this->pressEditorButton('Insert image');
     $panel = $page->find('css', '.ck-dropdown__panel.ck-image-insert__panel');
-    // Do not use setValue method as it triggers a blur event by default that
-    // closes the CKEditor 5 panel, making it impossible to click on the Insert
-    // button.
-    $this->getSession()->executeScript('
-      const input = document.querySelector(".ck-dropdown__panel.ck-image-insert__panel input[type=text]");
-      input.value = "' . $src . '";
-      input.dispatchEvent(new Event("input", {bubbles:true}));
-    ');
+    $src_input = $panel->find('css', 'input[type=text]');
+    $src_input->setValue($src);
     $panel->find('xpath', "//button[span[text()='Insert']]")->click();
   }
 

core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageUrlTest.php

@@ -104,14 +104,8 @@ public function testImageUrlWidget(): void {
 
     $this->pressEditorButton('Insert image');
     $panel = $page->find('css', '.ck-dropdown__panel.ck-image-insert__panel');
-    // Do not use setValue method as it triggers a blur event by default that
-    // closes the CKEditor 5 panel, making it impossible to click on the Insert
-    // button.
-    $this->getSession()->executeScript('
-      const input = document.querySelector(".ck-dropdown__panel.ck-image-insert__panel input[type=text]");
-      input.value = "' . $src . '";
-      input.dispatchEvent(new Event("input", {bubbles:true}));
-    ');
+    $src_input = $panel->find('css', 'input[type=text]');
+    $src_input->setValue($src);
     $panel->find('xpath', "//button[span[text()='Insert']]")->click();
 
     $this->assertNotEmpty($assert_session->waitForElementVisible('css', $image_selector));

core/tests/Drupal/FunctionalJavascriptTests/DrupalSelenium2Driver.php

@@ -142,6 +142,24 @@ public function setValue($xpath, $value) {
     $not_clickable_exception = NULL;
     $result = $this->waitFor(10, function () use (&$not_clickable_exception, $xpath, $value) {
       try {
+        // \Behat\Mink\Driver\Selenium2Driver::setValue() will call .blur() on
+        // the element, modify that to trigger the "input" and "change" events
+        // instead. They indicate the value has changed, rather than implying
+        // user focus changes.
+        $this->executeJsOnXpath($xpath, <<<JS
+var node = {{ELEMENT}};
+var original = node.blur;
+node.blur = function() {
+  node.dispatchEvent(new Event("input", {bubbles:true}));
+  node.dispatchEvent(new Event("change", {bubbles:true}));
+  // Do not wait for the debounce, which only triggers the 'formUpdated` event
+  // up to once every 0.3 seconds. In tests, no humans are typing, hence there
+  // is no need to debounce.
+  // @see Drupal.behaviors.formUpdated
+  node.dispatchEvent(new Event("formUpdated", {bubbles:true}));
+  node.blur = original;
+};
+JS);
         parent::setValue($xpath, $value);
         return TRUE;
       }