From 1927c6f668d7cafa63772e3327e11a10cc24e2ed Mon Sep 17 00:00:00 2001 From: meirzamoodle Date: Wed, 7 Feb 2024 00:37:26 +0700 Subject: [PATCH] MDL-78096 editor_tiny: Scenario updates for TinyMCE image enhancements --- .../tests/behat/default_value.feature | 6 +-- .../tests/behat/edit_fields_settings.feature | 6 +-- .../tests/behat/accessibilitychecker.feature | 19 +++++---- .../autosave/tests/behat/autosave.feature | 6 +-- .../plugins/link/tests/behat/link.feature | 10 ++--- .../plugins/media/tests/behat/image.feature | 41 +++++++++++++++---- .../tests/behat/duplicate_lesson_page.feature | 18 ++++---- .../tests/behat/questions_images.feature | 12 +++--- .../behat/manually_mark_question.feature | 6 +-- .../tests/behat/embedded_images.feature | 18 ++++---- 10 files changed, 83 insertions(+), 59 deletions(-) diff --git a/customfield/field/textarea/tests/behat/default_value.feature b/customfield/field/textarea/tests/behat/default_value.feature index ea196036927..13b5c8adf3e 100644 --- a/customfield/field/textarea/tests/behat/default_value.feature +++ b/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 diff --git a/customfield/tests/behat/edit_fields_settings.feature b/customfield/tests/behat/edit_fields_settings.feature index 2bf4d980405..e573e097995 100644 --- a/customfield/tests/behat/edit_fields_settings.feature +++ b/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" diff --git a/lib/editor/tiny/plugins/accessibilitychecker/tests/behat/accessibilitychecker.feature b/lib/editor/tiny/plugins/accessibilitychecker/tests/behat/accessibilitychecker.feature index 2a18e5609a4..9ec5a592322 100644 --- a/lib/editor/tiny/plugins/accessibilitychecker/tests/behat/accessibilitychecker.feature +++ b/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 "

Some plain text

Some more text

" + And I set the field "Description" to "

Some plain text

Some more text

" 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" diff --git a/lib/editor/tiny/plugins/autosave/tests/behat/autosave.feature b/lib/editor/tiny/plugins/autosave/tests/behat/autosave.feature index 9edd046cd52..d94880fbc45 100644 --- a/lib/editor/tiny/plugins/autosave/tests/behat/autosave.feature +++ b/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 "

Image test

" 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 diff --git a/lib/editor/tiny/plugins/link/tests/behat/link.feature b/lib/editor/tiny/plugins/link/tests/behat/link.feature index 45109fe9e7e..635531625eb 100644 --- a/lib/editor/tiny/plugins/link/tests/behat/link.feature +++ b/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/" diff --git a/lib/editor/tiny/plugins/media/tests/behat/image.feature b/lib/editor/tiny/plugins/media/tests/behat/image.feature index 6238eb8b375..39ea3e19380 100644 --- a/lib/editor/tiny/plugins/media/tests/behat/image.feature +++ b/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" diff --git a/mod/lesson/tests/behat/duplicate_lesson_page.feature b/mod/lesson/tests/behat/duplicate_lesson_page.feature index 0c646fc1c62..b65057373fc 100644 --- a/mod/lesson/tests/behat/duplicate_lesson_page.feature +++ b/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" diff --git a/mod/lesson/tests/behat/questions_images.feature b/mod/lesson/tests/behat/questions_images.feature index 291753e4f59..1e72b90d3cf 100644 --- a/mod/lesson/tests/behat/questions_images.feature +++ b/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?" diff --git a/mod/quiz/tests/behat/manually_mark_question.feature b/mod/quiz/tests/behat/manually_mark_question.feature index aab1436f20c..7275f6aee43 100644 --- a/mod/quiz/tests/behat/manually_mark_question.feature +++ b/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" diff --git a/mod/workshop/tests/behat/embedded_images.feature b/mod/workshop/tests/behat/embedded_images.feature index 031b0553b17..573c13f514f 100644 --- a/mod/workshop/tests/behat/embedded_images.feature +++ b/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"