L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-78428 tiny_media: Code cleanup

Browse Source 
- Fix typo
 - Behat improvement
This commit is contained in:
Huong Nguyen
2025-03-24 14:01:51 +07:00
parent 0c0c87ad8a
commit cda7e8e8be
7 changed files with 152 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/editor/tiny/plugins/media/amd/build/embed/embedhandler.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
lib/editor/tiny/plugins/media/amd/build/embed/embedhandler.min.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
lib/editor/tiny/plugins/media/amd/src/embed/embedhandler.js
+14 -14
View File
@@ -149,9 +149,9 @@ export class EmbedHandler {
*
* @returns {null|object}
*/
getMediumProperties = () => {
const medium = this.selectedMedia;
if (!medium) {
getMediaProperties = () => {
const media = this.selectedMedia;
if (!media) {
return null;
}
@@ -164,7 +164,7 @@ export class EmbedHandler {
};
const sources = [];
medium.querySelectorAll('track').forEach((track) => {
media.querySelectorAll('track').forEach((track) => {
tracks[track.getAttribute('kind')].push({
src: track.getAttribute('src'),
srclang: track.getAttribute('srclang'),
@@ -173,22 +173,22 @@ export class EmbedHandler {
});
});
medium.querySelectorAll('source').forEach((source) => {
media.querySelectorAll('source').forEach((source) => {
sources.push(source.src);
});
const title = medium.getAttribute('title') ?? medium.textContent;
const title = media.getAttribute('title') ?? media.textContent;
return {
type: this.mediaType,
sources,
poster: medium.getAttribute('poster'),
poster: media.getAttribute('poster'),
title: title ? title.trim() : false,
width: medium.getAttribute('width'),
height: medium.getAttribute('height'),
autoplay: hasAudioVideoAttr(medium, 'autoplay'),
loop: hasAudioVideoAttr(medium, 'loop'),
muted: hasAudioVideoAttr(medium, 'muted'),
controls: hasAudioVideoAttr(medium, 'controls'),
width: media.getAttribute('width'),
height: media.getAttribute('height'),
autoplay: hasAudioVideoAttr(media, 'autoplay'),
loop: hasAudioVideoAttr(media, 'loop'),
muted: hasAudioVideoAttr(media, 'muted'),
controls: hasAudioVideoAttr(media, 'controls'),
tracks,
};
};
@@ -199,7 +199,7 @@ export class EmbedHandler {
* @returns {object}
*/
getCurrentEmbedData = () => {
const properties = this.getMediumProperties();
const properties = this.getMediaProperties();
if (!properties || this.newMediaLink) {
return {media: {}};
}
lib/editor/tiny/plugins/media/tests/behat/audio.feature
-130
View File
@@ -1,130 +0,0 @@
@editor @editor_tiny @tiny_media @javascript
Feature: Use the TinyMCE editor to upload an audio
In order to work with audios
As a user
I need to be able to upload and manipulate audios
Scenario: Clicking on the Audio button in the TinyMCE editor opens the audio dialog
Given I log in as "admin"
And I open my profile in edit mode
When I click on the "Multimedia" button for the "Description" TinyMCE editor
Then "Insert media" "dialogue" should exist
Scenario: Browsing repositories in the TinyMCE editor shows the FilePicker
Given I log in as "admin"
And I open my profile in edit mode
When I click on the "Multimedia" button for the "Description" TinyMCE editor
And I click on "Browse repositories" "button" in the "Insert media" "dialogue"
Then "File picker" "dialogue" should exist
@_file_upload
Scenario: Browsing repositories in the TinyMCE editor shows the FilePicker and add audio file
Given I log in as "admin"
When I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
And I click on "Browse repositories" "button"
And I upload "/lib/editor/tiny/tests/behat/fixtures/audio-sample.mp3" to the file picker for TinyMCE
And I click on "Save" "button"
Then I select the "audio" element in position "1" of the "Description" TinyMCE editor
@_file_upload
# The following scenario covers:
# 1. Preview uploaded audio.
# 2. Delete previewed audio.
Scenario: Preview audio before embedding it into TinyMCE editor
Given I log in as "admin"
When I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
Then "Insert media" "dialogue" should exist
And I click on "Browse repositories" "button" in the "Insert media" "dialogue"
And "File picker" "dialogue" should exist
And I upload "/lib/editor/tiny/tests/behat/fixtures/audio-sample.mp3" to the file picker for TinyMCE
# Preview inserted audio.
And "Media details" "dialogue" should exist
And "tiny-insert-media" "region" should not exist in the "Media details" "dialogue"
And "tiny-media-details-body" "region" should exist in the "Media details" "dialogue"
And the field "Media title" in the "Media details" "dialogue" matches value "audio-sample"
And "Delete media" "button" should exist in the "Media details" "dialogue"
# Add custom thumbnail button should not exist for audio type.
And "Add custom thumbnail" "button" should not exist in the "Media details" "dialogue"
# Media controls.
And the field "Show controls" in the "Media details" "dialogue" matches value "1"
And the field "Autoplay" in the "Media details" "dialogue" matches value "0"
And the field "Muted" in the "Media details" "dialogue" matches value "0"
And the field "Loop" in the "Media details" "dialogue" matches value "0"
# Size configuration should not exist for audio type.
And "Original size" "radio" should not exist in the "Media details" "dialogue"
And "Custom size" "radio" should not exist in the "Media details" "dialogue"
# Subtitles, captions, description, tracks and metadata button for video/audio.
And "Subtitles and captions" "link" should exist in the "Media details" "dialogue"
# Let's delete the previwed audio.
And I click on "Delete media" "button" in the "Media details" "dialogue"
And "Delete media" "dialogue" should exist
And "Delete" "button" should exist in the "Delete media" "dialogue"
And I click on "Delete" "button" in the "Delete media" "dialogue"
And "Insert media" "dialogue" should exist
And "tiny-insert-media" "region" should exist
@_file_upload
Scenario: Add subtitles to an audio before embedding it into TinyMCE editor
Given I log in as "admin"
When I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
Then "Insert media" "dialogue" should exist
And I click on "Browse repositories" "button" in the "Insert media" "dialogue"
And "File picker" "dialogue" should exist
And I upload "/lib/editor/tiny/tests/behat/fixtures/audio-sample.mp3" to the file picker for TinyMCE
And "Media details" "dialogue" should exist
And "tiny-insert-media" "region" should not exist in the "Media details" "dialogue"
And "tiny-media-details-body" "region" should exist in the "Media details" "dialogue"
# Add media subtitles.
And I click on "Subtitles and captions" "link" in the "Media details" "dialogue"
And I click on "Browse repositories..." "button" in the "Media details" "dialogue"
And "File picker" "dialogue" should exist
And I upload "/lib/editor/tiny/tests/behat/fixtures/subtitle-sample.vtt" to the file picker for TinyMCE
And "File picker" "dialogue" should not exist
And I set the field "Language" in the "Media details" "dialogue" to "en"
And I set the field "Label" in the "Media details" "dialogue" to "Subtitle sample"
And I click on "Save" "button" in the "Media details" "dialogue"
And I select the "audio" element in position "1" of the "Description" TinyMCE editor
And I click on the "Multimedia" button for the "Description" TinyMCE editor
And "Media details" "dialogue" should exist
And I click on "Subtitles and captions" "link" in the "Media details" "dialogue"
And the field "Subtitle track URL" in the "Media details" "dialogue" does not match value ""
And the field "Language" in the "Media details" "dialogue" matches value "en"
And the field "Label" in the "Media details" "dialogue" matches value "Subtitle sample"
@_file_upload
Scenario: Insert and update audio in the TinyMCE editor
Given I log in as "admin"
When I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
Then "Insert media" "dialogue" should exist
And I click on "Browse repositories" "button" in the "Insert media" "dialogue"
And "File picker" "dialogue" should exist
And I upload "/lib/editor/tiny/tests/behat/fixtures/audio-sample.mp3" to the file picker for TinyMCE
# Preview inserted audio.
And "Media details" "dialogue" should exist
And "tiny-insert-media" "region" should not exist in the "Media details" "dialogue"
And "tiny-media-details-body" "region" should exist in the "Media details" "dialogue"
And the field "Media title" in the "Media details" "dialogue" matches value "audio-sample"
And "Delete media" "button" should exist in the "Media details" "dialogue"
# Embed media into tiny and preview it by selecting it from tiny.
And I click on "Save" "button" in the "Media details" "dialogue"
And I select the "audio" element in position "1" of the "Description" TinyMCE editor
And I click on the "Multimedia" button for the "Description" TinyMCE editor
And "Media details" "dialogue" should exist
# Let's update audio data.
And I set the field "Media title" in the "Media details" "dialogue" to "Test title"
And I click on "Autoplay" "checkbox" in the "Media details" "dialogue"
And I click on "Muted" "checkbox" in the "Media details" "dialogue"
And I click on "Loop" "checkbox" in the "Media details" "dialogue"
And I click on "Save" "button" in the "Media details" "dialogue"
# Let's preview and check the updated data.
And I select the "audio" element in position "1" of the "Description" TinyMCE editor
And I click on the "Multimedia" button for the "Description" TinyMCE editor
And "Media details" "dialogue" should exist
And the field "Media title" in the "Media details" "dialogue" matches value "Test title"
And the field "Autoplay" in the "Media details" "dialogue" matches value "1"
And the field "Muted" in the "Media details" "dialogue" matches value "1"
And the field "Loop" in the "Media details" "dialogue" matches value "1"
lib/editor/tiny/plugins/media/tests/behat/link.feature
-74
View File
@@ -1,74 +0,0 @@
@editor @editor_tiny @tiny_media @javascript
Feature: Use the TinyMCE editor to upload a media link
In order to work with media links
As a user
I need to be able to upload and manipulate media links
Scenario: Clicking on the media button in the TinyMCE editor opens the dialog
Given I log in as "admin"
When I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
Then "Insert media" "dialogue" should exist
# The following scenario covers:
# 1. Add YouTube link.
# 3. Preview embedded YouTube link from tiny.
# 4. Embed YouTube link as a hyperlink.
# 5. Preview embedded YouTube link from tiny.
Scenario: Embed YouTube link as a hyperlink
Given I log in as "admin"
When I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
Then "Insert media" "dialogue" should exist
# Add audio link using "Or add via URL" input.
And I set the field "Or add via URL" to "https://www.youtube.com/watch?v=-fPTdIruJUU"
And I click on "Add" "button" in the "Insert media" "dialogue"
# Preview inserted link.
And "Media details" "dialogue" should exist
And "tiny-insert-media" "region" should not exist in the "Media details" "dialogue"
And "tiny-media-details-body" "region" should exist in the "Media details" "dialogue"
And the field "Media title" in the "Media details" "dialogue" matches value "https://www.youtube.com/watch?v=-fPTdIruJUU"
And "Add custom thumbnail" "button" should not exist in the "Media details" "dialogue"
And "Show controls" "checkbox" should not exist in the "Media details" "dialogue"
And "Autoplay" "checkbox" should not exist in the "Media details" "dialogue"
And "Muted" "checkbox" should not exist in the "Media details" "dialogue"
And "Loop" "checkbox" should not exist in the "Media details" "dialogue"
# Embed link as video into tiny and preview it by selecting it from tiny.
And I click on "Save" "button"
And I select the "a" element in position "0" of the "Description" TinyMCE editor
And I click on the "Multimedia" button for the "Description" TinyMCE editor
And "Media details" "dialogue" should exist
And the field "Media title" in the "Media details" "dialogue" matches value "https://www.youtube.com/watch?v=-fPTdIruJUU"
And "Show controls" "checkbox" should not exist in the "Media details" "dialogue"
And "Autoplay" "checkbox" should not exist in the "Media details" "dialogue"
And "Muted" "checkbox" should not exist in the "Media details" "dialogue"
And "Loop" "checkbox" should not exist in the "Media details" "dialogue"
And I set the field "Media title" in the "Media details" "dialogue" to "https://www.youtube.com/watch?v=-fPTdIruJUU"
And I click on "Save" "button" in the "Media details" "dialogue"
And I select the "a" element in position "0" of the "Description" TinyMCE editor
And I click on the "Multimedia" button for the "Description" TinyMCE editor
And "Media details" "dialogue" should exist
And the field "Media title" in the "Media details" "dialogue" matches value "https://www.youtube.com/watch?v=-fPTdIruJUU"
# Delete previewed link.
And I click on "Delete media" "button" in the "Media details" "dialogue"
And "Delete media" "dialogue" should exist
And "Delete" "button" should exist in the "Delete media" "dialogue"
And I click on "Delete" "button" in the "Delete media" "dialogue"
And "Insert media" "dialogue" should exist
And "tiny-insert-media" "region" should exist in the "Insert media" "dialogue"
# Let's add the same YouTube link.
And I set the field "Or add via URL" to "https://www.youtube.com/watch?v=-fPTdIruJUU"
And I click on "Add" "button" in the "Insert media" "dialogue"
# Preview inserted media link.
And "Media details" "dialogue" should exist
And "tiny-insert-media" "region" should not exist in the "Media details" "dialogue"
And "tiny-media-details-body" "region" should exist in the "Media details" "dialogue"
And the field "Media title" in the "Media details" "dialogue" matches value "https://www.youtube.com/watch?v=-fPTdIruJUU"
And "Add custom thumbnail" "button" should not exist in the "Media details" "dialogue"
And "Show controls" "checkbox" should not exist in the "Media details" "dialogue"
And "Autoplay" "checkbox" should not exist in the "Media details" "dialogue"
And "Muted" "checkbox" should not exist in the "Media details" "dialogue"
And "Loop" "checkbox" should not exist in the "Media details" "dialogue"
And "Original size" "radio" should not exist in the "Media details" "dialogue"
And "Custom size" "radio" should not exist in the "Media details" "dialogue"
And I click on "Save" "button" in the "Media details" "dialogue"
lib/editor/tiny/plugins/media/tests/behat/media.feature
+136
View File
@@ -0,0 +1,136 @@
@editor @editor_tiny @tiny_media @javascript
Feature: Use the TinyMCE editor to upload a media file
In order to work with media files
As a user
I need to be able to upload and change settings of media files
Background:
Given I log in as "admin"
And I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
Scenario: Clicking on the media button in the TinyMCE editor opens the insert media dialog
Then "Insert media" "dialogue" should exist
And "Browse repositories" "button" should exist in the "Insert media" "dialogue"
And I click on "Browse repositories" "button" in the "Insert media" "dialogue"
And "File picker" "dialogue" should exist
@_file_upload
Scenario Outline: Insert and update media in the TinyMCE editor
Given I click on "Browse repositories" "button"
When I upload "/lib/editor/tiny/tests/behat/fixtures/<fixturefile>" to the file picker for TinyMCE
Then "Media details" "dialogue" should exist
And "Media title" "field" should exist in the "Media details" "dialogue"
And "Add custom thumbnail" "button" <thumbnailaction> in the "Media details" "dialogue"
And "Subtitles and captions" "link" should exist in the "Media details" "dialogue"
And the field "Media title" in the "Media details" "dialogue" matches value "<fixturetitle>"
And the field "Show controls" in the "Media details" "dialogue" matches value "1"
And the field "Autoplay" in the "Media details" "dialogue" matches value "0"
And the field "Muted" in the "Media details" "dialogue" matches value "0"
And the field "Loop" in the "Media details" "dialogue" matches value "0"
And <originalsizeverify>
And <customsizeverify1>
And I click on "Delete media" "button" in the "Media details" "dialogue"
And "Delete media" "dialogue" should exist
And I click on "Delete" "button" in the "Delete media" "dialogue"
And "Insert media" "dialogue" should exist
And I click on "Browse repositories" "button"
And I upload "/lib/editor/tiny/tests/behat/fixtures/<fixturefile>" to the file picker for TinyMCE
And I click on "Overwrite" "button"
And I set the field "Media title" to "<newfixturetitle>"
And I set the field "Autoplay" to "1"
And I set the field "Muted" to "1"
And I set the field "Loop" to "1"
And <customsizestep>
And <customsizeaction>
And I click on "Subtitles and captions" "link" in the "Media details" "dialogue"
And I click on "Browse repositories..." "button" in the "Media details" "dialogue"
And I upload "/lib/editor/tiny/tests/behat/fixtures/<subtitlefile>" to the file picker for TinyMCE
And I set the field "Language" in the "Media details" "dialogue" to "<subtitlelangcode>"
And I set the field "Label" in the "Media details" "dialogue" to "<subtitletitle>"
And I click on "Save" "button" in the "Media details" "dialogue"
And I switch to the "Description" TinyMCE editor iframe
And "//*[contains(@data-id, 'id_description_editor')]//<mediatype>[@title='<newfixturetitle>' and @autoplay='autoplay' and @loop='loop' and @muted='true' and @controls='controls']" "xpath_element" should exist
And "//*[contains(@data-id, 'id_description_editor')]//<mediatype>//source[contains(@src, '<fixturefile>')]" "xpath_element" should exist
And "//*[contains(@data-id, 'id_description_editor')]//<mediatype>//track[contains(@src, '<subtitlefile>') and @kind='subtitles' and contains(@srclang, '<subtitlelang>') and @label='<subtitletitle>']" "xpath_element" should exist
And I switch to the main frame
And I select the "video" element in position "1" of the "Description" TinyMCE editor
And I click on the "Multimedia" button for the "Description" TinyMCE editor
And the field "Media title" in the "Media details" "dialogue" matches value "<newfixturetitle>"
And the field "Show controls" in the "Media details" "dialogue" matches value "1"
And the field "Autoplay" in the "Media details" "dialogue" matches value "1"
And the field "Muted" in the "Media details" "dialogue" matches value "1"
And the field "Loop" in the "Media details" "dialogue" matches value "1"
And <customsizeverify2>
And <customsizeverify3>
And I click on "Subtitles and captions" "link" in the "Media details" "dialogue"
And the field "Subtitle track URL" in the "Media details" "dialogue" does not match value ""
And the field "Language" in the "Media details" "dialogue" matches value "<subtitlelangcode>"
And the field "Label" in the "Media details" "dialogue" matches value "<subtitletitle>"
Examples:
| mediatype | fixturefile | fixturetitle | newfixturetitle | subtitlefile | subtitletitle | subtitlelangcode | subtitlelang | thumbnailaction | originalsizeverify | customsizeverify1 | customsizeverify2 | customsizeverify3 | customsizestep | customsizeaction |
| video | moodle-logo.mp4 | moodle-logo | Moodle LMS Logo | subtitle-sample.vtt | Subtitle sample for video | en | English | should exist | the field "Original size" in the "Media details" "dialogue" matches value "1" | the field "Custom size" in the "Media details" "dialogue" matches value "0" | the field "Custom size" in the "Media details" "dialogue" matches value "1" | the field "Width" in the "Media details" "dialogue" matches value "300" | I click on "Custom size" "radio" in the "Media details" "dialogue" | I set the field "Width" in the "Media details" "dialogue" to "300" |
| audio | audio-sample.mp3 | audio-sample | Sample Audio File | subtitle-sample.vtt | Subtitle sample for audio | fr | French | should not exist | "Original size" "field" should not exist in the "Media details" "dialogue" | "Custom size" "field" should not exist in the "Media details" "dialogue" | "Custom size" "field" should not exist in the "Media details" "dialogue" | "Width" "field" should not exist in the "Media details" "dialogue" | "Original size" "field" should not exist in the "Media details" "dialogue" | "Custom size" "field" should not exist in the "Media details" "dialogue" |
@_file_upload
Scenario: Add custom thumbnail to a video in TinyMCE editor
Given I click on "Browse repositories" "button" in the "Insert media" "dialogue"
And I upload "/lib/editor/tiny/tests/behat/fixtures/moodle-logo.mp4" to the file picker for TinyMCE
When I click on "Add custom thumbnail" "button" in the "Media details" "dialogue"
Then "Insert media thumbnail" "dialogue" should exist
And I click on "Browse repositories" "button" in the "Insert media thumbnail" "dialogue"
And I upload "lib/editor/tiny/tests/behat/fixtures/moodle-logo.png" to the file picker for TinyMCE
And "Media thumbnail" "dialogue" should exist
And "tiny-media-thumbnail-preview" "region" should exist in the "Media thumbnail" "dialogue"
And I click on "Delete media thumbnail" "button" in the "Media thumbnail" "dialogue"
And "Delete media thumbnail" "dialogue" should exist
And I click on "Delete" "button" in the "Delete media thumbnail" "dialogue"
And I click on "Browse repositories" "button" in the "Insert media thumbnail" "dialogue"
And I upload "lib/editor/tiny/tests/behat/fixtures/moodle-logo.png" to the file picker for TinyMCE
And I click on "Overwrite" "button" in the "File exists" "dialogue"
And I click on "Next" "button" in the "Media thumbnail" "dialogue"
But "Add custom thumbnail" "button" should not exist in the "Media details" "dialogue"
And "Change thumbnail" "button" should exist in the "Media details" "dialogue"
And I click on "Delete thumbnail" "button" in the "Media details" "dialogue"
And I click on "Delete" "button" in the "Delete thumbnail" "dialogue"
And "Media details" "dialogue" should exist
And "Change thumbnail" "button" should not exist in the "Media details" "dialogue"
And "Delete thumbnail" "button" should not exist in the "Media details" "dialogue"
And I click on "Add custom thumbnail" "button" in the "Media details" "dialogue"
And "Insert media thumbnail" "dialogue" should exist
And I click on "Browse repositories" "button" in the "Insert media thumbnail" "dialogue"
And I upload "lib/editor/tiny/tests/behat/fixtures/moodle-logo.png" to the file picker for TinyMCE
And I click on "Overwrite" "button" in the "File exists" "dialogue"
And I click on "Next" "button" in the "Media thumbnail" "dialogue"
And I click on "Save" "button" in the "Media details" "dialogue"
And I switch to the "Description" TinyMCE editor iframe
And "//*[contains(@data-id, 'id_description_editor')]//video[contains(@poster, 'moodle-logo.png')]" "xpath_element" should exist
Scenario: Embed external video link - External video service
Given the "mediaplugin" filter is "on"
And I enable "youtube" "media" plugin
And I disable "videojs" "media" plugin
And I log in as "admin"
And I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
When I set the field "Or add via URL" to "https://www.youtube.com/watch?v=JeimE8Wz6e4"
And I click on "Add" "button" in the "Insert media" "dialogue"
Then "Media details" "dialogue" should exist
And "Media title" "field" should exist in the "Media details" "dialogue"
And "Show controls" "field" should not exist in the "Media details" "dialogue"
And "Autoplay" "field" should not exist in the "Media details" "dialogue"
And "Muted" "field" should not exist in the "Media details" "dialogue"
And "Loop" "field" should not exist in the "Media details" "dialogue"
And the field "Media title" in the "Media details" "dialogue" matches value "https://www.youtube.com/watch?v=JeimE8Wz6e4"
And I set the field "Media title" to "Hey, that is pretty good!"
And I click on "Save" "button" in the "Media details" "dialogue"
And I switch to the "Description" TinyMCE editor iframe
And "//*[contains(@data-id, 'id_description_editor')]//a[@class='external-media-provider' and @href='https://www.youtube.com/watch?v=JeimE8Wz6e4' and normalize-space(text())='Hey, that is pretty good!']" "xpath_element" should exist
And I switch to the main frame
And I select the "a" element in position "0" of the "Description" TinyMCE editor
And I click on the "Multimedia" button for the "Description" TinyMCE editor
And the field "Media title" in the "Media details" "dialogue" matches value "Hey, that is pretty good!"
And I click on "Cancel" "button" in the "Media details" "dialogue"
And I press "Update profile"
And "//span[contains(@class, 'mediaplugin_youtube')]//iframe[@title='Hey, that is pretty good!']" "xpath_element" should exist
lib/editor/tiny/plugins/media/tests/behat/video.feature
-199
View File
@@ -1,199 +0,0 @@
@editor @editor_tiny @tiny_media @javascript
Feature: Use the TinyMCE editor to upload a video
In order to work with videos
As a user
I need to be able to upload and manipulate videos
Scenario: Clicking on the Video button in the TinyMCE editor opens the video dialog
Given I log in as "admin"
And I open my profile in edit mode
When I click on the "Multimedia" button for the "Description" TinyMCE editor
Then "Insert media" "dialogue" should exist
Scenario: Browsing repositories in the TinyMCE editor shows the FilePicker
Given I log in as "admin"
And I open my profile in edit mode
When I click on the "Multimedia" button for the "Description" TinyMCE editor
And I click on "Browse repositories" "button" in the "Insert media" "dialogue"
Then "File picker" "dialogue" should exist
@_file_upload
Scenario: Browsing repositories in the TinyMCE editor shows the FilePicker and upload video file
Given I log in as "admin"
When I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
And I click on "Browse repositories" "button"
And I upload "/lib/editor/tiny/tests/behat/fixtures/moodle-logo.mp4" to the file picker for TinyMCE
And I click on "Save" "button"
Then I select the "video" element in position "1" of the "Description" TinyMCE editor
@_file_upload
# The following scenario covers:
# 1. Preview uploaded video.
# 2. Delete previewed video.
Scenario: Preview video before embedding it into TinyMCE editor
Given I log in as "admin"
When I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
Then "Insert media" "dialogue" should exist
And I click on "Browse repositories" "button" in the "Insert media" "dialogue"
And "File picker" "dialogue" should exist
And I upload "/lib/editor/tiny/tests/behat/fixtures/moodle-logo.mp4" to the file picker for TinyMCE
# Preview inserted video.
And "Media details" "dialogue" should exist
And "tiny-insert-media" "region" should not exist in the "Media details" "dialogue"
And "tiny-media-details-body" "region" should exist in the "Media details" "dialogue"
And the field "Media title" in the "Media details" "dialogue" matches value "moodle-logo"
# Delete media preview button.
And "Delete media" "button" should exist in the "Media details" "dialogue"
# Only video has add custom thumbnail button.
And "Add custom thumbnail" "button" should exist in the "Media details" "dialogue"
# Media controls.
And the field "Show controls" in the "Media details" "dialogue" matches value "1"
And the field "Autoplay" in the "Media details" "dialogue" matches value "0"
And the field "Muted" in the "Media details" "dialogue" matches value "0"
And the field "Loop" in the "Media details" "dialogue" matches value "0"
# Only video has size configuration.
And the field "Original size" in the "Media details" "dialogue" matches value "1"
And the field "Custom size" in the "Media details" "dialogue" matches value "0"
# Subtitles, captions, description, tracks and metadata button for video/audio.
And "Subtitles and captions" "link" should exist in the "Media details" "dialogue"
# Let's delete the previwed video.
And I click on "Delete media" "button" in the "Media details" "dialogue"
And "Delete media" "dialogue" should exist
And "Delete" "button" should exist in the "Delete media" "dialogue"
And I click on "Delete" "button" in the "Delete media" "dialogue"
And "Insert media" "dialogue" should exist
And "tiny-insert-media" "region" should exist
@_file_upload
# The following screnario covers:
# 1. Add video custom thumbnail.
# 2. Preview uploaded custom thumbnail.
# 3. Delete previewed thumbnail.
# 4. Delete added thumbnail.
Scenario: Add custom thumbnail from local storage to a video
Given I log in as "admin"
When I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
Then "Insert media" "dialogue" should exist
And I click on "Browse repositories" "button" in the "Insert media" "dialogue"
And "File picker" "dialogue" should exist
And I upload "/lib/editor/tiny/tests/behat/fixtures/moodle-logo.mp4" to the file picker for TinyMCE
And "Media details" "dialogue" should exist
And "tiny-insert-media" "region" should not exist in the "Media details" "dialogue"
And "tiny-media-details-body" "region" should exist in the "Media details" "dialogue"
# Add custom thumbnail.
And "Add custom thumbnail" "button" should exist in the "Media details" "dialogue"
And I click on "Add custom thumbnail" "button" in the "Media details" "dialogue"
And "Insert media thumbnail" "dialogue" should exist
# And "tiny-insert-media" "region" should exist in the "Insert media thumbnail" "dialogue"
And I click on "Browse repositories" "button" in the "Insert media thumbnail" "dialogue"
And "File picker" "dialogue" should exist
And I upload "lib/editor/tiny/tests/behat/fixtures/moodle-logo.png" to the file picker for TinyMCE
# Delete previewed thumbnail.
And "Media thumbnail" "dialogue" should exist
And "tiny-media-thumbnail-preview" "region" should exist in the "Media thumbnail" "dialogue"
And "Delete media thumbnail" "button" should exist in the "Media thumbnail" "dialogue"
And I click on "Delete media thumbnail" "button" in the "Media thumbnail" "dialogue"
And "Delete media thumbnail" "dialogue" should exist
And "Delete" "button" should exist in the "Delete media thumbnail" "dialogue"
And I click on "Delete" "button" in the "Delete media thumbnail" "dialogue"
# Add back the same thumbnail link again.
And "Insert media thumbnail" "dialogue" should exist
# And "tiny-insert-media" "region" should exist in the "Insert media thumbnail" "dialogue"
And I click on "Browse repositories" "button" in the "Insert media thumbnail" "dialogue"
And "File picker" "dialogue" should exist
And I upload "lib/editor/tiny/tests/behat/fixtures/moodle-logo.png" to the file picker for TinyMCE
# Same file upload will cause "File exists" dialogue to display.
And "File exists" "dialogue" should exist
And I click on "Overwrite" "button" in the "File exists" "dialogue"
And "Media thumbnail" "dialogue" should exist
And "tiny-media-thumbnail-preview-footer" "region" should exist in the "Media thumbnail" "dialogue"
And "Next" "button" should exist in the "Media thumbnail" "dialogue"
And I click on "Next" "button" in the "Media thumbnail" "dialogue"
And "Media details" "dialogue" should exist
And "tiny-insert-media" "region" should not exist in the "Media details" "dialogue"
And "tiny-media-details-body" "region" should exist in the "Media details" "dialogue"
# Now "Add custom thumbnail" button should not exist.
And "Add custom thumbnail" "button" should not exist in the "Media details" "dialogue"
# And Change and Delete thumbnail buttons now exist.
And "Change thumbnail" "button" should exist in the "Media details" "dialogue"
And "Delete thumbnail" "button" should exist in the "Media details" "dialogue"
# Delete added thumbnail.
And I click on "Delete thumbnail" "button" in the "Media details" "dialogue"
And "Delete thumbnail" "dialogue" should exist
And "Delete" "button" should exist in the "Delete thumbnail" "dialogue"
And I click on "Delete" "button" in the "Delete thumbnail" "dialogue"
And "Media details" "dialogue" should exist
And "tiny-insert-media" "region" should not exist in the "Media details" "dialogue"
And "tiny-media-details-body" "region" should exist in the "Media details" "dialogue"
# After the added thumbnail is deleted, both Change and Delete thumbnial buttons should not exist anymore.
And "Change thumbnail" "button" should not exist in the "Media details" "dialogue"
And "Delete thumbnail" "button" should not exist in the "Media details" "dialogue"
# After the added thumbnail is deleted, "Add custom thubmnail" should exist again.
And "Add custom thumbnail" "button" should exist in the "Media details" "dialogue"
@_file_upload
Scenario: Add subtitles to video before embedding it into TinyMCE editor
Given I log in as "admin"
When I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
Then "Insert media" "dialogue" should exist
And I click on "Browse repositories" "button" in the "Insert media" "dialogue"
And "File picker" "dialogue" should exist
And I upload "/lib/editor/tiny/tests/behat/fixtures/moodle-logo.mp4" to the file picker for TinyMCE
And "Media details" "dialogue" should exist
And "tiny-insert-media" "region" should not exist in the "Media details" "dialogue"
And "tiny-media-details-body" "region" should exist in the "Media details" "dialogue"
# Add media subtitles.
And I click on "Subtitles and captions" "link" in the "Media details" "dialogue"
And I click on "Browse repositories..." "button" in the "Media details" "dialogue"
And "File picker" "dialogue" should exist
And I upload "/lib/editor/tiny/tests/behat/fixtures/subtitle-sample.vtt" to the file picker for TinyMCE
And "File picker" "dialogue" should not exist
And I set the field "Language" in the "Media details" "dialogue" to "en"
And I set the field "Label" in the "Media details" "dialogue" to "Subtitle sample"
And I click on "Save" "button" in the "Media details" "dialogue"
And I select the "video" element in position "1" of the "Description" TinyMCE editor
And I click on the "Multimedia" button for the "Description" TinyMCE editor
And "Media details" "dialogue" should exist
And I click on "Subtitles and captions" "link" in the "Media details" "dialogue"
And the field "Subtitle track URL" in the "Media details" "dialogue" does not match value ""
And the field "Language" in the "Media details" "dialogue" matches value "en"
And the field "Label" in the "Media details" "dialogue" matches value "Subtitle sample"
@_file_upload
Scenario: Insert and update video in the TinyMCE editor
Given I log in as "admin"
When I open my profile in edit mode
And I click on the "Multimedia" button for the "Description" TinyMCE editor
Then "Insert media" "dialogue" should exist
And I click on "Browse repositories" "button"
And "File picker" "dialogue" should exist
And I upload "/lib/editor/tiny/tests/behat/fixtures/moodle-logo.mp4" to the file picker for TinyMCE
And "Media details" "dialogue" should exist
And I click on "Save" "button" in the "Media details" "dialogue"
And I select the "video" element in position "1" of the "Description" TinyMCE editor
And I click on the "Multimedia" button for the "Description" TinyMCE editor
And "Media details" "dialogue" should exist
And "tiny-insert-media" "region" should not exist in the "Media details" "dialogue"
And "tiny-media-details-body" "region" should exist in the "Media details" "dialogue"
And I set the field "Media title" in the "Media details" "dialogue" to "Test title"
And I click on "Autoplay" "checkbox" in the "Media details" "dialogue"
And I click on "Muted" "checkbox" in the "Media details" "dialogue"
And I click on "Loop" "checkbox" in the "Media details" "dialogue"
And the field "Original size" in the "Media details" "dialogue" matches value "1"
And the field "Custom size" in the "Media details" "dialogue" matches value "0"
And I click on "Custom size" "radio" in the "Media details" "dialogue"
And I set the field "Width" in the "Media details" "dialogue" to "300"
And I click on "Save" "button" in the "Media details" "dialogue"
And I select the "video" element in position "1" of the "Description" TinyMCE editor
And I click on the "Multimedia" button for the "Description" TinyMCE editor
And "Media details" "dialogue" should exist
And the field "Media title" in the "Media details" "dialogue" matches value "Test title"
And the field "Autoplay" in the "Media details" "dialogue" matches value "1"
And the field "Muted" in the "Media details" "dialogue" matches value "1"
And the field "Loop" in the "Media details" "dialogue" matches value "1"
And the field "Custom size" in the "Media details" "dialogue" matches value "1"
And the field "Width" in the "Media details" "dialogue" matches value "300"