MDL-76735 editor_tiny: Fix random behat failure for Media image

lib/editor/tiny/plugins/media/amd/src/image.js

@@ -24,6 +24,7 @@
 import Templates from 'core/templates';
 import {get_string as getString, get_strings as getStrings} from 'core/str';
 import * as ModalFactory from 'core/modal_factory';
+import Pending from 'core/pending';
 import {displayFilepicker} from 'editor_tiny/utils';
 import Selectors from './selectors';
 import Modal from './imagemodal';
@@ -305,6 +306,7 @@ export const MediaImage = class {
     }
 
     setImage() {
+        const pendingPromise = new Pending('tiny_media:setImage');
         const url = this.form.querySelector(Selectors.IMAGE.elements.url).value;
         if (url === '') {
             return;
@@ -312,6 +314,7 @@ export const MediaImage = class {
 
         // Check if there are any accessibility issues.
         if (this.updateWarning()) {
+            pendingPromise.resolve();
             return;
         }
 
@@ -319,12 +322,14 @@ export const MediaImage = class {
         const width = this.form.querySelector(Selectors.IMAGE.elements.width).value;
         if (!this.isPercentageValue(width) && isNaN(parseInt(width, 10))) {
             this.form.querySelector(Selectors.IMAGE.elements.width).focus();
+            pendingPromise.resolve();
             return;
         }
 
         const height = this.form.querySelector(Selectors.IMAGE.elements.height).value;
         if (!this.isPercentageValue(height) && isNaN(parseInt(height, 10))) {
             this.form.querySelector(Selectors.IMAGE.elements.height).focus();
+            pendingPromise.resolve();
             return;
         }
 
@@ -332,6 +337,7 @@ export const MediaImage = class {
         .then((html) => {
             this.editor.insertContent(html);
             this.currentModal.destroy();
+            pendingPromise.resolve();
 
             return html;
         })

lib/editor/tiny/plugins/media/tests/behat/image.feature

@@ -26,3 +26,18 @@ Feature: Use the TinyMCE editor to upload an image
     And I upload "/lib/editor/tiny/tests/behat/fixtures/tinyscreenshot.png" to the file picker for TinyMCE
     # Note: This needs to be replaced with a label.
     Then ".tiny_image_preview" "css_element" should be visible
+
+  @_file_upload
+  Scenario: Insert image to the TinyMCE editor
+    Given I log in as "admin"
+    And I open my profile in edit mode
+    And I click on the "Image" button for the "Description" TinyMCE editor
+    And I click on "Browse repositories..." "button" in the "Image properties" "dialogue"
+    And I upload "lib/editor/tiny/tests/behat/fixtures/moodle-logo.png" to the file picker for TinyMCE
+    And I set the field "Describe this image for someone who cannot see it" to "It's the Moodle"
+    And I click on "Save image" "button" in the "Image properties" "dialogue"
+    When I select the "img" element in position "0" of the "Description" TinyMCE editor
+    And I click on the "Image" button for the "Description" TinyMCE editor
+    Then the field "Describe this image for someone who cannot see it" matches value "It's the Moodle"
+    # Note: This needs to be replaced with a label.
+    And ".tiny_image_preview" "css_element" should be visible