Skip to content

Commit cd86f30

Browse files
omiroshnichenkoomiroshnichenko
authored
Merge pull request #379 from magento-obsessive-owls/PB-95
[Owls] Video background for Row
2 parents 3880851 + c79d25c commit cd86f30

File tree

50 files changed

+7410
-58
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+7410
-58
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/BackgroundConfigurationActionGroup.xml

Lines changed: 287 additions & 0 deletions
Large diffs are not rendered by default.

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/EditFormActionGroup.xml

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -385,6 +385,28 @@
385385
</arguments>
386386
<dontSeeElementInDOM selector="{{EditPanelForm.panelFieldNoAfterLabelText(property.fieldName)}}" stepKey="dontSeeElementInDOM"/>
387387
</actionGroup>
388+
<actionGroup name="validateSlideOutPanelFieldHelperText">
389+
<annotations>
390+
<description>Validates the helper text for a field on the edit panel form.</description>
391+
</annotations>
392+
<arguments>
393+
<argument name="property"/>
394+
</arguments>
395+
<waitForElement time="2" selector="{{EditPanelForm.panelFieldHelperText(property.section, property.fieldName)}}" stepKey="waitForElement"/>
396+
<see userInput="{{property.helperText}}" selector="{{EditPanelForm.panelFieldHelperText(property.section, property.fieldName)}}" stepKey="seeHelperText"/>
397+
</actionGroup>
398+
<actionGroup name="validateSlideOutPanelFieldTooltip">
399+
<annotations>
400+
<description>Validates the tooltip for a field on the edit panel form.</description>
401+
</annotations>
402+
<arguments>
403+
<argument name="property"/>
404+
</arguments>
405+
<waitForElement time="2" selector="{{EditPanelForm.panelFieldTooltip(property.section, property.fieldName)}}" stepKey="waitForTooltip"/>
406+
<moveMouseOver selector="{{EditPanelForm.panelFieldTooltip(property.section, property.fieldName)}}" stepKey="mouseOverTooltip"/>
407+
<waitForElementVisible selector="{{EditPanelForm.panelFieldTooltipContent(property.section, property.fieldName)}}" stepKey="waitForTooltipContentVisible"/>
408+
<see userInput="{{property.tooltipText}}" selector="{{EditPanelForm.panelFieldTooltipContent(property.section, property.fieldName)}}" stepKey="seeTooltipContent"/>
409+
</actionGroup>
388410
<actionGroup name="validateSlideOutPanelFieldNotPresent">
389411
<arguments>
390412
<argument name="property"/>

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/EditFormImageUploadActionGroup.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
</arguments>
1919
<attachFile userInput="{{property.value}}" selector='{{EditPanelForm.panelFieldControl(property.section, property.fieldName)}}' stepKey="attachBackgroundImageFile"/>
2020
<waitForLoadingMaskToDisappear stepKey="waitForLoading"/>
21-
<waitForElementVisible selector="{{EditPanelForm.backgroundImagePreview}}" stepKey="waitForImageUpload"/>
21+
<waitForElementVisible selector="{{EditPanelForm.editFormUploadedImage(property.section, property.fieldName)}}" stepKey="waitForImageUpload"/>
2222
</actionGroup>
2323
<actionGroup name="attachFileSlideOutPropertyGeneral">
2424
<annotations>
@@ -44,7 +44,7 @@
4444
<waitForElementVisible selector="{{EditPanelForm.invalidUploadOkBtn}}" stepKey="waitForInvalidUploadBtn"/>
4545
<click selector="{{EditPanelForm.invalidUploadOkBtn}}" stepKey="clickInvalidUploadBtn"/>
4646
<waitForElementNotVisible selector="{{EditPanelForm.invalidUploadTitle}}" stepKey="waitForModalGone"/>
47-
<dontSeeElementInDOM selector="{{EditPanelForm.backgroundImagePreview}}" stepKey="dontSeeImage"/>
47+
<dontSeeElementInDOM selector="{{EditPanelForm.editFormUploadedImage(property.section, property.fieldName)}}" stepKey="dontSeeImage"/>
4848
</actionGroup>
4949
<actionGroup name="clickSelectFromGallerySlideOut">
5050
<arguments>

‎app/code/Magento/PageBuilder/Test/Mftf/Data/BackgroundFormData.xml

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<data key="section">background</data>
1515
<data key="fieldName">background_color</data>
1616
<data key="value"/>
17+
<data key="rgba">rgba(0, 0, 0, 0)</data>
1718
<data key="colorSwatchColor">rgba(0, 0, 0, 0)</data>
1819
<data key="colorWheelDefault">rgb(255, 0, 0)</data>
1920
<data key="placeholderText">No Color</data>
@@ -434,4 +435,170 @@
434435
<data key="fieldName">background_attachment</data>
435436
<data key="value">fixed</data>
436437
</entity>
438+
<!-- Video: Video Url -->
439+
<entity name="PageBuilderVideoBackgroundUrl_Empty" type="pagebuilder_video_background_url">
440+
<data key="name">Video URL</data>
441+
<data key="section">background</data>
442+
<data key="fieldName">video_source</data>
443+
<data key="value"/>
444+
<data key="tooltipText">Video URLs can be links to videos on YouTube or Vimeo, or HTTP(S) links to files with valid video extensions (we recommend .mp4)</data>
445+
<data key="errorMessage">This is a required field.</data>
446+
</entity>
447+
<entity name="PageBuilderVideoBackgroundUrl_YouTube_Embedded" type="pagebuilder_video_background_url">
448+
<data key="name">Video URL</data>
449+
<data key="section">background</data>
450+
<data key="fieldName">video_source</data>
451+
<data key="value">https://www.youtube.com/embed/slOtnjsbff0</data>
452+
<data key="renderedValue">https://www.youtube.com/embed/slOtnjsbff0</data>
453+
</entity>
454+
<entity name="PageBuilderVideoBackgroundUrl_YouTube_NonEmbedded" type="pagebuilder_video_background_url">
455+
<data key="name">Video URL</data>
456+
<data key="section">background</data>
457+
<data key="fieldName">video_source</data>
458+
<data key="value">https://www.youtube.com/watch?v=slOtnjsbff0</data>
459+
<data key="renderedValue">https://www.youtube.com/embed/slOtnjsbff0</data>
460+
</entity>
461+
<entity name="PageBuilderVideoBackgroundUrl_YouTube_Insecure" type="pagebuilder_video_background_url">
462+
<data key="name">Video URL</data>
463+
<data key="section">background</data>
464+
<data key="fieldName">video_source</data>
465+
<data key="value">http://www.youtube.com/watch?v=slOtnjsbff0</data>
466+
<data key="renderedValue">https://www.youtube.com/embed/slOtnjsbff0</data>
467+
</entity>
468+
<entity name="PageBuilderVideoBackgroundUrl_Vimeo_Embedded" type="pagebuilder_video_background_url">
469+
<data key="name">Video URL</data>
470+
<data key="section">background</data>
471+
<data key="fieldName">video_source</data>
472+
<data key="value">https://player.vimeo.com/video/2393127</data>
473+
<data key="renderedValue">https://player.vimeo.com/video/2393127</data>
474+
</entity>
475+
<entity name="PageBuilderVideoBackgroundUrl_Vimeo_NonEmbedded" type="pagebuilder_video_background_url">
476+
<data key="name">Video URL</data>
477+
<data key="section">background</data>
478+
<data key="fieldName">video_source</data>
479+
<data key="value">https://vimeo.com/2393127</data>
480+
<data key="renderedValue">https://player.vimeo.com/video/2393127</data>
481+
</entity>
482+
<entity name="PageBuilderVideoBackgroundUrl_Vimeo_Insecure" type="pagebuilder_video_background_url">
483+
<data key="name">Video URL</data>
484+
<data key="section">background</data>
485+
<data key="fieldName">video_source</data>
486+
<data key="value">http://vimeo.com/2393127</data>
487+
<data key="renderedValue">https://player.vimeo.com/video/2393127</data>
488+
</entity>
489+
<entity name="PageBuilderVideoBackgroundUrl_Mp4_URL" type="pagebuilder_video_background_url">
490+
<data key="name">Video URL</data>
491+
<data key="section">background</data>
492+
<data key="fieldName">video_source</data>
493+
<data key="value">https://obsessive-owls.s3.us-east-2.amazonaws.com/MFTF/avocado.mp4</data>
494+
<data key="renderedValue">https://obsessive-owls.s3.us-east-2.amazonaws.com/MFTF/avocado.mp4</data>
495+
</entity>
496+
<entity name="PageBuilderVideoBackgroundUrl_Mp4_URL_Insecure" type="pagebuilder_video_background_url">
497+
<data key="name">Video URL</data>
498+
<data key="section">background</data>
499+
<data key="fieldName">video_source</data>
500+
<data key="value">http://obsessive-owls.s3.us-east-2.amazonaws.com/MFTF/avocado.mp4</data>
501+
<data key="renderedValue">http://obsessive-owls.s3.us-east-2.amazonaws.com/MFTF/avocado.mp4</data>
502+
<data key="width">320px</data>
503+
<data key="height">320px</data>
504+
</entity>
505+
<entity name="PageBuilderVideoBackgroundUrl_Invalid_Text" type="pagebuilder_video_background_url">
506+
<data key="name">Video URL</data>
507+
<data key="section">background</data>
508+
<data key="fieldName">video_source</data>
509+
<data key="value">Test</data>
510+
<data key="errorMessage">Please enter a valid video URL. Valid URLs have a video file extension (.mp4, .webm, .ogv) or links to videos on YouTube or Vimeo.</data>
511+
</entity>
512+
<entity name="PageBuilderVideoBackgroundUrl_Invalid_VideoDoesNotExit" type="pagebuilder_video_background_url">
513+
<data key="name">Video URL</data>
514+
<data key="section">background</data>
515+
<data key="fieldName">video_source</data>
516+
<data key="value">https://www.youtube.com/watch?v=doesnotexist</data>
517+
</entity>
518+
<!-- Video: Overlay Color -->
519+
<entity name="PageBuilderVideoBackgroundOverlayColor_Empty" type="pagebuilder_video_background_overlay_color">
520+
<data key="name">Overlay Color</data>
521+
<data key="section">background</data>
522+
<data key="fieldName">video_overlay_color</data>
523+
<data key="value"/>
524+
<data key="rgba">rgba(0, 0, 0, 0)</data>
525+
<data key="colorSwatchColor">rgba(0, 0, 0, 0)</data>
526+
<data key="colorWheelDefault">rgb(255, 0, 0)</data>
527+
<data key="placeholderText">No Color</data>
528+
</entity>
529+
<entity name="PageBuilderVideoBackgroundOverlayColor_Hex_Grey" type="pagebuilder_video_background_overlay_color">
530+
<data key="name">Overlay Color</data>
531+
<data key="section">background</data>
532+
<data key="fieldName">video_overlay_color</data>
533+
<data key="value">rgba(204, 204, 204, 0.25)</data>
534+
<data key="rgba">rgba(204, 204, 204, 0.25)</data>
535+
</entity>
536+
<!-- Video: Infinite Loop -->
537+
<entity name="PageBuilderVideoBackgroundInfiniteLoop_Enabled" type="pagebuilder_video_background_infinite_loop">
538+
<data key="name">Infinite Loop</data>
539+
<data key="section">background</data>
540+
<data key="fieldName">video_loop</data>
541+
<data key="value">true</data>
542+
</entity>
543+
<entity name="PageBuilderVideoBackgroundInfiniteLoop_Disabled" type="pagebuilder_video_background_infinite_loop">
544+
<data key="name">Infinite Loop</data>
545+
<data key="section">background</data>
546+
<data key="fieldName">video_loop</data>
547+
<data key="value">false</data>
548+
</entity>
549+
<!-- Video: Lazy Load -->
550+
<entity name="PageBuilderVideoBackgroundLazyLoad_Enabled" type="pagebuilder_video_background_lazy_load">
551+
<data key="name">Lazy Load</data>
552+
<data key="section">background</data>
553+
<data key="fieldName">video_lazy_load</data>
554+
<data key="value">true</data>
555+
<data key="helperText">Preload video only when it is visible on the screen.</data>
556+
</entity>
557+
<entity name="PageBuilderVideoBackgroundLazyLoad_Disabled" type="pagebuilder_video_background_lazy_load">
558+
<data key="name">Lazy Load</data>
559+
<data key="section">background</data>
560+
<data key="fieldName">video_lazy_load</data>
561+
<data key="value">false</data>
562+
</entity>
563+
<!-- Video: Play Only When Visible -->
564+
<entity name="PageBuilderVideoBackgroundPlayOnlyWhenVisible_Enabled" type="pagebuilder_video_background_play_only_visible">
565+
<data key="name">Play Only When Visible</data>
566+
<data key="section">background</data>
567+
<data key="fieldName">video_play_only_visible</data>
568+
<data key="value">true</data>
569+
<data key="helperText">Video will play only when it is visible on the screen.</data>
570+
</entity>
571+
<entity name="PageBuilderVideoBackgroundPlayOnlyWhenVisible_Disabled" type="pagebuilder_video_background_play_only_visible">
572+
<data key="name">Play Only When Visible</data>
573+
<data key="section">background</data>
574+
<data key="fieldName">video_play_only_visible</data>
575+
<data key="value">false</data>
576+
</entity>
577+
<!-- Video: Fallback Image -->
578+
<entity name="PageBuilderVideoBackgroundFallbackImage_Empty" type="pagebuilder_video_background_fallback_image">
579+
<data key="name">Fallback Image</data>
580+
<data key="section">background</data>
581+
<data key="fieldName">video_fallback_image</data>
582+
<data key="value"/>
583+
<data key="helperText">Maximum file size: 2 MB. Allowed file types: JPG, GIF, PNG.</data>
584+
<data key="tooltipText">Fallback images appear on the screen before a video loads. When the video loads, it replaces the fallback image. If the video does not load for some reason, the fallback image remains on the screen in place of the video.</data>
585+
</entity>
586+
<entity name="PageBuilderVideoBackgroundFallbackImage_JPG" type="pagebuilder_video_background_fallback_image">
587+
<data key="name">Background Image</data>
588+
<data key="section">background</data>
589+
<data key="fieldName">video_fallback_image</data>
590+
<data key="value">magento.jpg</data>
591+
<data key="fileName">magento</data>
592+
<data key="extension">jpg</data>
593+
<data key="path">wysiwyg</data>
594+
</entity>
595+
<entity name="PageBuilderVideoBackgroundFallbackImage_GIF" type="pagebuilder_video_background_fallback_image">
596+
<data key="name">Background Image</data>
597+
<data key="section">background</data>
598+
<data key="fieldName">video_fallback_image</data>
599+
<data key="value">m-logo.gif</data>
600+
<data key="fileName">m-logo</data>
601+
<data key="extension">gif</data>
602+
<data key="path">wysiwyg</data>
603+
</entity>
437604
</entities>

‎app/code/Magento/PageBuilder/Test/Mftf/Data/RowData.xml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,19 @@
5353
<data key="value">#ff0000</data>
5454
<data key="rgb">rgb(255, 0, 0)</data>
5555
</entity>
56+
<!-- Background Type -->
57+
<entity name="PageBuilderRowBackgroundType_Image" type="pagebuilder_row_background_type_property">
58+
<data key="name">Background Type</data>
59+
<data key="section">background</data>
60+
<data key="fieldName">background_type</data>
61+
<data key="value">image</data>
62+
</entity>
63+
<entity name="PageBuilderRowBackgroundType_Video" type="pagebuilder_row_background_type_property">
64+
<data key="name">Background Type</data>
65+
<data key="section">background</data>
66+
<data key="fieldName">background_type</data>
67+
<data key="value">video</data>
68+
</entity>
5669
<!-- Background Image -->
5770
<entity name="PageBuilderRowBackgroundImage_Default" type="pagebuilder_row_background_image_property">
5871
<data key="name">Background Image</data>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderEditFormSection.xml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,18 @@
3131
<element name="panelFieldNoPlaceholderText" type="input" selector='//div[@data-index="{{arg1}}"]/descendant::*[@name="{{arg2}}" and not(@placeholder)]' parameterized="true"/>
3232
<element name="panelFieldAfterLabelText" type="text" selector="//div[@data-index='{{arg1}}']//span[@data-bind='text: addafter' and .='{{arg2}}']" parameterized="true"/>
3333
<element name="panelFieldNoAfterLabelText" type="text" selector="//div[@data-index='{{arg1}}']//span[@data-bind='text: addafter']" parameterized="true"/>
34+
<element name="panelFieldHelperText" type="text" parameterized="true" selector="//aside//*[@data-index='{{section}}']/descendant::*[@name='{{field}}']/ancestor::*[contains(@class,'admin__field-control')]/descendant::*[contains(@class,'admin__field-note') or contains(@class,'image-upload-requirements')]"/>
35+
<element name="panelFieldTooltip" type="button" parameterized="true" selector="//aside//*[@data-index='{{section}}']/descendant::*[@name='{{field}}']/ancestor::*[contains(@class,'admin__field-control')]/descendant::a[contains(@class,'admin__field-tooltip-action')]"/>
36+
<element name="panelFieldTooltipContent" type="text" parameterized="true" selector="//aside//*[@data-index='{{section}}']/descendant::*[@name='{{field}}']/ancestor::*[contains(@class,'admin__field-control')]/descendant::*[contains(@class,'admin__field-tooltip-content')]"/>
3437
<element name="panelFieldValidationError" type="input" selector="//div[contains(@class,'_insert_form')]//div[@data-index='{{arg1}}']//div[@data-index='{{arg2}}' and contains(@class,'_error')]//div[contains(@class,'')]//*[@name='{{arg2}}' or contains(@class,'mce-tinymce')]" parameterized="true"/>
3538
<element name="panelFieldValidationErrorMessage" type="button" selector="//div[contains(@class,'_insert_form')]//div[@data-index='{{arg1}}']//div[contains(@class,'admin__field-control')]//*[@name='{{arg2}}' or contains(@class,'mce-tinymce')]//..//..//..//label[.='{{arg3}}']" parameterized="true"/>
3639
<element name="panelMultiSelectFieldControl" type="input" selector="aside [data-index='{{arg1}}'] [data-index='{{arg2}}'] [data-role='advanced-select']" parameterized="true"/>
3740
<element name="panelMultiSelectFieldControlInput" type="input" selector="aside [data-index='{{arg1}}'] [data-index='{{arg2}}'] .admin__action-multiselect-search" parameterized="true"/>
3841
<element name="panelMultiSelectFieldControlResult" type="input" selector="//aside//div[@data-index='{{arg1}}']//div[@data-index='{{arg2}}']//div[contains(@class,'action-menu-item')]//span[.='{{arg3}}']" parameterized="true"/>
3942
<element name="editFormAllRequiredFields" type="text" selector="aside.pagebuilder_modal_form_pagebuilder_modal_form_modal ._required:not([style*='display: none;'])"/>
40-
<element name="editFormUploadedImage" type="button" selector="//div[@data-index='{{arg1}}']/descendant::*[@name='{{arg2}}']//..//..//img" parameterized="true"/>
43+
<element name="editFormUploadedImage" type="button" selector="//div[@data-index='{{arg1}}']/descendant::*[@name='{{arg2}}']/ancestor::*[contains(@class,'admin__field-control')]//img[@class='preview-image']" parameterized="true"/>
4144
<element name="editFormNoUploadedImage" type="button" selector="//span[text()='{{arg1}}']//parent::label//following-sibling::div//p[text()='Browse to find or drag image here']" parameterized="true"/>
42-
<element name="editFormUploadedImageSource" type="button" selector="//div[@data-index='{{arg1}}']/descendant::*[@name='{{arg2}}']//..//..//img[contains(@src,'{{arg3}}') and contains(@src,'{{arg4}}')]" parameterized="true"/>
45+
<element name="editFormUploadedImageSource" type="button" selector="//div[@data-index='{{arg1}}']/descendant::*[@name='{{arg2}}']/ancestor::*[contains(@class,'admin__field-control')]//img[contains(@src,'{{arg3}}') and contains(@src,'{{arg4}}')]" parameterized="true"/>
4346
<element name="backgroundImagePreview" type="button" selector='//div[@data-index="background"]/descendant::img[@class="preview-image"]'/>
4447
<element name="selectFromGalleryBtn" type="button" selector="//aside//div[@data-index='{{arg1}}']/descendant::*[@name='{{arg2}}']//..//label[text()='Select from Gallery']" parameterized="true"/>
4548
<element name="invalidUploadTitle" type="text" selector="//aside[contains(@class,'modal-popup')]//header/h1[contains(.,'Attention')]"/>

0 commit comments

Comments
 (0)