MDL-78096 editor_tiny: Scenario updates for TinyMCE image enhancements

customfield/field/textarea/tests/behat/default_value.feature

@@ -36,12 +36,12 @@ Feature: Default value for the textarea custom field can contain images
       | Short name | testfield  |
     # Embed the image into Default value.
     And I click on "Image" "button" in the "Default value" "form_row"
-    And I click on "Browse repositories..." "button"
+    And I click on "Browse repositories" "button"
     And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
     And I click on "gd-logo.png" "link"
     And I click on "Select this file" "button"
-    And I set the field "Describe this image for someone who cannot see it" to "Example"
-    And I click on "Save image" "button"
+    And I set the field "How would you describe this image to someone who can't see it:" to "Example"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I click on "Save changes" "button" in the "Adding a new Text area" "dialogue"
     And I log out
 

customfield/tests/behat/edit_fields_settings.feature

@@ -83,12 +83,12 @@ Feature: Teachers can edit course custom fields
     And I navigate to "Courses > Default settings > Course custom fields" in site administration
     And I click on "Edit" "link" in the "Field 1" "table_row"
     And I click on "Image" "button" in the "Description" "form_row"
-    And I click on "Browse repositories..." "button"
+    And I click on "Browse repositories" "button"
     And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
     And I click on "gd-logo.png" "link"
     And I click on "Select this file" "button"
-    And I set the field "Describe this image for someone who cannot see it" to "Example"
-    And I click on "Save image" "button"
+    And I set the field "How would you describe this image to someone who can't see it:" to "Example"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I click on "Save changes" "button" in the "Updating Field 1" "dialogue"
     And I log out
     And I log in as "teacher1"

lib/editor/tiny/plugins/accessibilitychecker/tests/behat/accessibilitychecker.feature

@@ -22,25 +22,26 @@ Feature: Tiny editor accessibility checker
   Scenario: Perform accessibility validation on images with no alt attribute
     Given I log in as "admin"
     And I open my profile in edit mode
-    And I set the field "Description" to "<p>Some plain text</p><img src='/broken-image' width='1' height='1'/><p>Some more text</p>"
+    And I set the field "Description" to "<p>Some plain text</p><img src='http://download.moodle.org/unittest/test.jpg' width='1' height='1'/><p>Some more text</p>"
     And I click on the "Tools > Accessibility checker" menu item for the "Description" TinyMCE editor
     And I should see "Images require alternative text." in the "Accessibility checker" "dialogue"
     And I click on "View" "link" in the "Accessibility checker" "dialogue"
     And I click on the "Image" button for the "Description" TinyMCE editor
-    And the field "URL" matches value "/broken-image"
-    And I set the field "Describe this image for someone who cannot see it" to "No more warning!"
-    And I press "Save image"
+    And I wait "1" seconds
+    And I click on "This image is decorative only" "checkbox"
+    And I set the field "How would you describe this image to someone who can't see it:" to "No more warning!"
+    And I press "Save"
     And I click on the "Tools > Accessibility checker" menu item for the "Description" TinyMCE editor
     And I should see "Congratulations, no accessibility issues found!" in the "Accessibility checker" "dialogue"
     And I click on "Close" "button" in the "Accessibility checker" "dialogue"
     And I select the "img" element in position "2" of the "Description" TinyMCE editor
     And I click on the "Image" button for the "Description" TinyMCE editor
-    And I set the field "URL" to "/decorative-image.png"
-    And I set the field "Describe this image for someone who cannot see it" to ""
-    And I set the field "Width" to "1"
-    And I set the field "Height" to "1"
+    And I set the field "URL" to "http://download.moodle.org/unittest/test.jpg"
+    And I click on "Add" "button" in the "Insert image" "dialogue"
+    And I wait "1" seconds
+    And I set the field "How would you describe this image to someone who can't see it:" to ""
     And I click on "This image is decorative only" "checkbox"
-    When I press "Save image"
+    When I press "Save"
     And I click on the "Tools > Accessibility checker" menu item for the "Description" TinyMCE editor
     Then I should see "Congratulations, no accessibility issues found!" in the "Accessibility checker" "dialogue"
 

lib/editor/tiny/plugins/autosave/tests/behat/autosave.feature

@@ -45,12 +45,12 @@ Feature: Tiny editor autosave
     And I set the field "Course summary" to "<p>Image test</p>"
     And I select the "p" element in position "1" of the "Course summary" TinyMCE editor
     And I click on the "Image" button for the "Course summary" TinyMCE editor
-    And I click on "Browse repositories..." "button"
+    And I click on "Browse repositories" "button"
     And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
     And I click on "tinyscreenshot.png" "link"
     And I click on "Select this file" "button"
-    And I set the field "Describe this image" to "It's the Moodle"
-    And I click on "Save image" "button"
+    And I set the field "How would you describe this image to someone who can't see it:" to "It's the Moodle"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I click on "Save and display" "button"
     When I am on the "Course 1" course page logged in as teacher1
     And I navigate to "Settings" in current page administration

lib/editor/tiny/plugins/link/tests/behat/link.feature

@@ -106,12 +106,12 @@ Feature: Add links to TinyMCE
     And I click on "Save changes" "button"
     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 click on "Browse repositories" "button" in the "Insert image" "dialogue"
     And I select "Private files" repository in file picker
     And I click on "moodle-logo.png" "link"
     And I click on "Select this file" "button"
-    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"
+    And I set the field "How would you describe this image to someone who can't see it:" to "It's the Moodle"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I select the "img" element in position "0" of the "Description" TinyMCE editor
     And I click on the "Link" button for the "Description" TinyMCE editor
     And I set the field "Enter a URL" to "https://moodle.org/"
@@ -132,8 +132,8 @@ Feature: Add links to TinyMCE
     And I click on "Edit profile" "link" in the "region-main" "region"
     And 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
-    And the field "Describe this image for someone who cannot see it" matches value "It's the Moodle"
-    And I click on "Close" "button" in the "Image properties" "dialogue"
+    And the field "How would you describe this image to someone who can't see it:" matches value "It's the Moodle"
+    And I click on "Close" "button" in the "Image details" "dialogue"
     And I click on the "Link" button for the "Description" TinyMCE editor
     And the field "Text to display" matches value "Moodle - Open-source learning platform"
     And the field "Enter a URL" matches value "https://moodle.org/"

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

@@ -8,21 +8,21 @@ Feature: Use the TinyMCE editor to upload an image
     Given I log in as "admin"
     And I open my profile in edit mode
     When I click on the "Image" button for the "Description" TinyMCE editor
-    Then "Image properties" "dialogue" should exist
+    Then "Insert image" "dialogue" should exist
 
-  Scenario: Browsing repositories in the TinyMCE editor shows the FilePicker
+  Scenario: Browsing repositories in the TinyMCE editor opens the image dialog and shows the FilePicker
     Given I log in as "admin"
     And I open my profile in edit mode
     When 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 click on "Browse repositories" "button" in the "Insert image" "dialogue"
     Then "File picker" "dialogue" should exist
 
   @_file_upload @test_tiny
-  Scenario: Browsing repositories in the TinyMCE editor shows the FilePicker
+  Scenario: Browsing repositories in the TinyMCE editor shows the FilePicker and upload url image
     Given I log in as "admin"
     And I open my profile in edit mode
     When 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 click on "Browse repositories" "button" in the "Insert image" "dialogue"
     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
@@ -32,12 +32,35 @@ Feature: Use the TinyMCE editor to upload an image
     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 click on "Browse repositories" "button" in the "Insert image" "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"
+    And I set the field "How would you describe this image to someone who can't see it:" to "It's the Moodle"
+    And I click on "Save" "button" in the "Image details" "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"
+    Then the field "How would you describe this image to someone who can't 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
+
+  @_file_upload
+  Scenario: Resizing the image uses the original and custom sizes and the keep proportion checkbox
+    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 "Insert image" "dialogue"
+    And I upload "lib/editor/tiny/tests/behat/fixtures/moodle-logo.png" to the file picker for TinyMCE
+    And I click on "This image is decorative only" "checkbox"
+    And I click on "Save" "button" in the "Image details" "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 "Original size" matches value "1"
+    And I click on "Custom size" "radio"
+    Then the field "Keep proportion" matches value "1"
+    And I click on "Keep proportion" "checkbox"
+    And I set the field "Width" to "102"
+    And I click on "Save" "button" in the "Image details" "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 "Custom size" matches value "1"
+    And the field "Width" matches value "102"
+    And the field "Keep proportion" matches value "0"

mod/lesson/tests/behat/duplicate_lesson_page.feature

@@ -39,12 +39,12 @@ Feature: In a lesson activity, a teacher can duplicate a lesson page
       | id_answer_editor_1 | Previous page |
       | id_jumpto_1 | Previous page |
     And I click on "Image" "button" in the "Page contents" "form_row"
-    And I click on "Browse repositories..." "button"
+    And I click on "Browse repositories" "button"
     And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
     And I click on "moodle_logo.jpg" "link"
     And I click on "Select this file" "button"
-    And I set the field "Describe this image for someone who cannot see it" to "It's the logo"
-    And I click on "Save image" "button"
+    And I set the field "How would you describe this image to someone who can't see it:" to "It's the logo"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I press "Save page"
     And I follow "Duplicate page: First page name"
     Then I should see "Inserted page: First page name"
@@ -73,12 +73,12 @@ Feature: In a lesson activity, a teacher can duplicate a lesson page
       | id_jumpto_1 | This page |
       | id_score_1 | 0 |
     And I click on "Image" "button" in the "//*[@id='id_answer_editor_0']/ancestor::*[@data-fieldtype='editor']" "xpath_element"
-    And I click on "Browse repositories..." "button"
+    And I click on "Browse repositories" "button"
     And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
     And I click on "moodle_logo.jpg" "link"
     And I click on "Select this file" "button"
-    And I set the field "Describe this image for someone who cannot see it" to "It's the logo"
-    And I click on "Save image" "button"
+    And I set the field "How would you describe this image to someone who can't see it:" to "It's the logo"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I press "Save page"
     And I follow "Duplicate page: True false with an image in the answer"
     Then I should see "Inserted page: True false with an image in the answer"
@@ -110,12 +110,12 @@ Feature: In a lesson activity, a teacher can duplicate a lesson page
       | id_jumpto_1 | This page |
       | id_score_1 | 0 |
     And I click on "Image" "button" in the "//*[@id='id_response_editor_0']/ancestor::*[@data-fieldtype='editor']" "xpath_element"
-    And I click on "Browse repositories..." "button"
+    And I click on "Browse repositories" "button"
     And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
     And I click on "moodle_logo.jpg" "link"
     And I click on "Select this file" "button"
-    And I set the field "Describe this image for someone who cannot see it" to "It's the logo"
-    And I click on "Save image" "button"
+    And I set the field "How would you describe this image to someone who can't see it:" to "It's the logo"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I press "Save page"
     And I follow "Duplicate page: True false with an image in the feedback"
     Then I should see "Inserted page: True false with an image in the feedback"

mod/lesson/tests/behat/questions_images.feature

@@ -47,12 +47,12 @@ Feature: In a lesson activity, teacher can add embedded images in questions answ
       | id_jumpto_2 | This page |
       | id_score_2 | 0 |
     And I click on "Image" "button" in the "//*[@data-fieldtype='editor']/*[descendant::*[@id='id_answer_editor_2']]" "xpath_element"
-    And I click on "Browse repositories..." "button"
+    And I click on "Browse repositories" "button"
     And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
     And I click on "moodle_logo.jpg" "link"
     And I click on "Select this file" "button"
-    And I set the field "Describe this image for someone who cannot see it" to "It's the logo"
-    And I click on "Save image" "button"
+    And I set the field "How would you describe this image to someone who can't see it:" to "It's the logo"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I press "Save page"
     And I set the field "qtype" to "Add a question page"
     And I set the field "Select a question type" to "True/false"
@@ -67,12 +67,12 @@ Feature: In a lesson activity, teacher can add embedded images in questions answ
       | id_response_editor_1 | Wrong |
       | id_jumpto_1 | This page |
     And I click on "Image" "button" in the "//*[@data-fieldtype='editor']/*[descendant::*[@id='id_response_editor_0']]" "xpath_element"
-    And I click on "Browse repositories..." "button"
+    And I click on "Browse repositories" "button"
     And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
     And I click on "moodle_logo.jpg" "link"
     And I click on "Select this file" "button"
-    And I set the field "Describe this image for someone who cannot see it" to "It's the logo"
-    And I click on "Save image" "button"
+    And I set the field "How would you describe this image to someone who can't see it:" to "It's the logo"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I press "Save page"
     When I am on the "Test lesson name" "lesson activity" page logged in as student1
     Then I should see "What animal is an amphibian?"

mod/quiz/tests/behat/manually_mark_question.feature

@@ -68,12 +68,12 @@ Feature: Teachers can override the grade for any question
     And I set the field "Comment" to "Administrator's comment"
     And I select the "p" element in position "0" of the "Comment" TinyMCE editor
     And I click on the "Image" button for the "Comment" TinyMCE editor
-    And I click on "Browse repositories..." "button" in the "Image properties" "dialogue"
+    And I click on "Browse repositories" "button" in the "Insert image" "dialogue"
     And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
     And I click on "moodle_logo.jpg" "link"
     And I click on "Select this file" "button"
-    And I set the field "Describe this image for someone who cannot see it" to "It's the logo"
-    And I click on "Save image" "button" in the "Image properties" "dialogue"
+    And I set the field "How would you describe this image to someone who can't see it:" to "It's the logo"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I press "Save" and switch to main window
     And I switch to the main window
     Then I should see "Commented: [It's the logo]" in the ".history table" "css_element"

mod/workshop/tests/behat/embedded_images.feature

@@ -36,34 +36,34 @@ Feature: Teachers can embed images into instructions and conclusion fields
     And I am on the "Workshop with embedded images" "workshop activity editing" page
     And I expand all fieldsets
     And I click on "Image" "button" in the "Instructions for submission" "form_row"
-    And I click on "Browse repositories..." "button"
+    And I click on "Browse repositories" "button"
     And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
     And I click on "moodlelogo.png" "link"
     And I click on "Select this file" "button"
-    And I set the field "Describe this image for someone who cannot see it" to "How to submit"
-    And I click on "Save image" "button"
+    And I set the field "How would you describe this image to someone who can't see it:" to "How to submit"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I press "Save and display"
     # Embed the image into Instructions for assessment.
     And I navigate to "Settings" in current page administration
     And I expand all fieldsets
     And I click on "Image" "button" in the "Instructions for assessment" "form_row"
-    And I click on "Browse repositories..." "button"
+    And I click on "Browse repositories" "button"
     And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
     And I click on "moodlelogo.png" "link"
     And I click on "Select this file" "button"
-    And I set the field "Describe this image for someone who cannot see it" to "How to assess"
-    And I click on "Save image" "button"
+    And I set the field "How would you describe this image to someone who can't see it:" to "How to assess"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I press "Save and display"
     # Embed the image into Conclusion.
     And I navigate to "Settings" in current page administration
     And I expand all fieldsets
     And I click on "Image" "button" in the "Conclusion" "form_row"
-    And I click on "Browse repositories..." "button"
+    And I click on "Browse repositories" "button"
     And I click on "Private files" "link" in the ".fp-repo-area" "css_element"
     And I click on "moodlelogo.png" "link"
     And I click on "Select this file" "button"
-    And I set the field "Describe this image for someone who cannot see it" to "Well done"
-    And I click on "Save image" "button"
+    And I set the field "How would you describe this image to someone who can't see it:" to "Well done"
+    And I click on "Save" "button" in the "Image details" "dialogue"
     And I press "Save and display"
     # Save the form and check the images are displayed in appropriate phases.
     And I change phase in workshop "Workshop with embedded images" to "Submission phase"