Commit 6a1bac3c authored by catch's avatar catch
Browse files

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
parent e2fcbd9e

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

+2 −8
Original line number Diff line number Diff line
@@ -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

+2 −8
Original line number Diff line number Diff line
@@ -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

+18 −0
Original line number Diff line number Diff line
@@ -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;

      }