Skip to content

Commit 476ef8e

Browse files
dhorytskyidhorytskyi
authored
Merge pull request #348 from adobe-commerce-tier-4/Tier4-PR-2024-08-05
[Support Tier-4 mrosmeteniuc] 08-05-2024 Regular delivery of bugfixes and improvements
2 parents 23ef146 + b673e0e commit 476ef8e

File tree

10 files changed

+256
-8
lines changed

10 files changed

+256
-8
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/StageActionGroup/UploadNewBackgroundImageToContentTypeFromStageActionGroup.xml

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright 2024 Adobe
5+
* All Rights Reserved.
6+
*/
7+
-->
8+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
10+
<actionGroup name="UploadNewBackgroundImageToContentTypeFromStageActionGroup">
11+
<annotations>
12+
<description>Loads background image from Stage</description>
13+
</annotations>
14+
<arguments>
15+
<argument name="backgroundImage" defaultValue="PageBuilderImageProperty_JPG"/>
16+
<argument name="section"/>
17+
<argument name="index" defaultValue="1" type="string"/>
18+
</arguments>
19+
<attachFile userInput="{{backgroundImage.value}}" selector="{{section.uploadNewImageInputWithUploaderId(index)}}" stepKey="attachBackgroundImageFromLocalToStage"/>
20+
<waitForPageLoad stepKey="waitForLoadingMaskToDisappear"/>
21+
<executeJS function="return window.getComputedStyle(document.evaluate('{{section.backgroundPath(index)}}', document.body).iterateNext()).backgroundImage" stepKey="backgroundImageRawValue"/>
22+
<!-- Return the string value of background-image -->
23+
<executeJS function="return '{{backgroundImage.value}}' ? '{$backgroundImageRawValue}'.match(/(?&lt;=(url\((&quot;|\'))).+(?=(&quot;|\')\))/)[0] : ''" stepKey="backgroundImageValue"/>
24+
<!-- Convert all characters in string variables to regex friendly strings -->
25+
<executeJS function="return '{{backgroundImage.path}}'.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\\\^\\$\|]/g, '\\\\$&amp;')" stepKey="regexFilePath"/>
26+
<executeJS function="return '{{backgroundImage.value}}' ? !!'{$backgroundImageValue}'.match(/.*\/(pub\/|\/)?media.*{$regexFilePath}\/{{backgroundImage.fileName}}(_\d+)?\.{{backgroundImage.extension}}/)[0] : '{$backgroundImageRawValue}' === 'none'" stepKey="actualImageResult"/>
27+
<assertTrue stepKey="assertBackgroundImageContainsFileInformation">
28+
<actualResult type="variable">actualImageResult</actualResult>
29+
</assertTrue>
30+
</actionGroup>
31+
</actionGroups>

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/StageActionGroup/UploadNewImageToContentTypeFromStageActionGroup.xml

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright 2024 Adobe
5+
* All Rights Reserved.
6+
*/
7+
-->
8+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
10+
<actionGroup name="UploadNewImageToContentTypeFromStageActionGroup">
11+
<arguments>
12+
<argument name="property"/>
13+
<argument name="section" defaultValue="PageBuilderStage"/>
14+
<argument name="index" defaultValue="1" type="string"/>
15+
</arguments>
16+
<attachFile userInput="{{property.value}}" selector="{{section.uploadNewImageInputWithUploaderId(index)}}" stepKey="attachImageFromLocalToStage"/>
17+
<waitForPageLoad stepKey="waitForLoadingMaskToDisappear"/>
18+
<waitForElementVisible selector="{{section.imageSourceByIndex(index, property.fileName)}}" stepKey="waitForMainImageSource1"/>
19+
</actionGroup>
20+
</actionGroups>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBannerSection/BannerOnBackendSection.xml

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
<element name="bannerTitleAttribute" type="text" selector="(//div[@data-content-type='banner'])[{{arg1}}]//div[@title='{{arg2}}']" parameterized="true"/>
2828
<element name="uploadImageInput" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//input[@name='background_image']"/>
2929
<element name="uploadImageInputWithUploaderId" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//div[@upload-area-id='background_image']//div[contains(@class,'uppy-Root')]//input[contains(@class,'uppy-Dashboard-input')]"/>
30+
<element name="uploadNewImageInputWithUploaderId" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//span[@upload-area-id='background_image']//div[contains(@class,'uppy-Root')]//input[contains(@class,'uppy-Dashboard-input')]"/>
3031
<element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{bannerIndex}}]//*[contains(@class, 'magento-variable') and contains(@class, 'magento-placeholder')]" parameterized="true"/>
3132
<element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{bannerIndex}}]//*[contains(@class, 'magento-placeholder') and contains(@class, 'magento-widget')]" parameterized="true"/>
3233
<element name="tinymce" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{bannerIndex}}]//div[contains(@class, 'inline-wysiwyg')]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderImageSection/ImageOnStageWithoutImageUploadedSection.xml

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<element name="uploadImageBtn" type="button" selector="//div[@class='pagebuilder-image-uploader-container']//label[text()='Upload Image']"/>
2424
<element name="uploadImageInput" type="button" selector="(//div[contains(@class,'pagebuilder-image-uploader-container')])[{{arg1}}]//input[@name='image']" parameterized="true"/>
2525
<element name="uploadImageInputWithUploaderId" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//div[@upload-area-id='image']//div[contains(@class,'uppy-Root')]//input[contains(@class,'uppy-Dashboard-input')]"/>
26+
<element name="uploadNewImageInputWithUploaderId" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//span[@upload-area-id='image']//div[contains(@class,'uppy-Root')]//input[contains(@class,'uppy-Dashboard-input')]"/>
2627
<!-- Advanced Configuration -->
2728
<element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-image')])[{{arg1}}]//figure[contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
2829
<element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-image')])[{{arg1}}]//figure[not(contains(@style,'text-align:'))]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection/SlideOnBackendSection.xml

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<element name="optionsMenuTitle" type="button" selector="(//div[contains(@class,'navigation-dot')])[{{navigationDotIndex}}]//li[contains(@class,'pagebuilder-options-link')]//div[contains(@class,'option-title')]" parameterized="true"/>
2929
<element name="uploadImageInput" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//input[@name='background_image']"/>
3030
<element name="uploadImageInputWithUploaderId" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//div[@upload-area-id='background_image']//div[contains(@class,'uppy-Root')]//input[contains(@class,'uppy-Dashboard-input')]"/>
31+
<element name="uploadNewImageInputWithUploaderId" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//span[@upload-area-id='background_image']//div[contains(@class,'uppy-Root')]//input[contains(@class,'uppy-Dashboard-input')]"/>
3132
<element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{slideIndex}}]//*[contains(@class, 'magento-variable') and contains(@class, 'magento-placeholder')]" parameterized="true"/>
3233
<element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{slideIndex}}]//*[contains(@class, 'magento-placeholder') and contains(@class, 'magento-widget')]" parameterized="true"/>
3334
<element name="tinymce" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{slideIndex}}]//div[contains(@class, 'inline-wysiwyg')]" parameterized="true"/>

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

+1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
<element name="computedWidthOnStage" type="text" selector="return parseInt(window.getComputedStyle(document.querySelectorAll('.pagebuilder-{{arg1}}')[{{arg2}}-1]).width)" parameterized="true"/>
4949
<element name="uploadImageInput" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//input[@name='background_image']"/>
5050
<element name="uploadImageInputWithUploaderId" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//div[@upload-area-id='background_image']//div[contains(@class,'uppy-Root')]//input[contains(@class,'uppy-Dashboard-input')]"/>
51+
<element name="uploadNewImageInputWithUploaderId" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//span[@upload-area-id='background_image']//div[contains(@class,'uppy-Root')]//input[contains(@class,'uppy-Dashboard-input')]"/>
5152
<element name="onHoverUploadImageButton" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-{{arg1}}')])[{{arg2}}]//label[text()='Upload Image']" parameterized="true"/>
5253
<element name="onHoverSelectFromGalleryButton" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-{{arg1}}')])[{{arg2}}]//ul[contains(@class,'pagebuilder-options-links')]//label[text()='Select from Gallery']" parameterized="true"/>
5354
<element name="inlineWYSIWYGEditor" type="text" selector="(//div[@data-content-type='{{arg1}}'])[{{arg2}}]//div[contains(@class,'inline-wysiwyg')]|(//div[@data-content-type='{{arg1}}' and contains(@class,'inline-wysiwyg')])[{{arg2}}]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderImageTest/ImageAddToImageBannerSliderAndReplaceTest.xml

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright 2024 Adobe
5+
* All Rights Reserved.
6+
*/
7+
-->
8+
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
10+
<test name="ImageAddToImageBannerSliderAndReplaceTest">
11+
<annotations>
12+
<features value="PageBuilder"/>
13+
<stories value="Image"/>
14+
<title value="Add Missing Image Upload functionality to all media components that support image upload in PageBuilder"/>
15+
<description value="Add Missing Upload Image button for new Media Image, Banner and Slider and allow replacement of image in PageBuilder."/>
16+
<severity value="AVERAGE"/>
17+
<useCaseId value="ACP2E-3122"/>
18+
<testCaseId value="AC-12646"/>
19+
<group value="pagebuilder"/>
20+
<group value="pagebuilder-image"/>
21+
<group value="cloud"/>
22+
</annotations>
23+
<before>
24+
<actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>
25+
<actionGroup ref="CliMediaGalleryEnhancedEnableActionGroup" stepKey="enableOldMediaGallery">
26+
<argument name="enabled" value="0"/>
27+
</actionGroup>
28+
<createData entity="_defaultCmsPage" stepKey="createCMSPage"/>
29+
</before>
30+
<after>
31+
<actionGroup ref="CliMediaGalleryEnhancedEnableActionGroup" stepKey="disableOldMediaGallery">
32+
<argument name="enabled" value="0"/>
33+
</actionGroup>
34+
<deleteData createDataKey="createCMSPage" stepKey="deleteCMSPage" />
35+
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
36+
</after>
37+
38+
<!-- Go to CMS Page in Admin -->
39+
<actionGroup ref="NavigateToCreatedCMSPageActionGroup" stepKey="navigateToCreatedCMSPage1">
40+
<argument name="CMSPage" value="$$createCMSPage$$"/>
41+
</actionGroup>
42+
43+
<!-- Switch to PageBuilder stage -->
44+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
45+
46+
<!-- Add a row to PageBuilder stage with image -->
47+
<actionGroup ref="dragContentTypeToStage" stepKey="dragRowToRootContainer">
48+
<argument name="contentType" value="PageBuilderRowContentType"/>
49+
<argument name="containerTargetType" value="PageBuilderRootContainerContentType"/>
50+
</actionGroup>
51+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection">
52+
<argument name="contentType" value="PageBuilderImageContentType"/>
53+
</actionGroup>
54+
<actionGroup ref="dragContentTypeToStage" stepKey="dragImageIntoStage">
55+
<argument name="contentType" value="PageBuilderImageContentType"/>
56+
</actionGroup>
57+
58+
<!-- Attach image to PageBuilder stage -->
59+
<comment userInput="Upload image from stage" stepKey="uploadImageFromStage"/>
60+
<actionGroup ref="uploadImageToContentTypeFromStage" stepKey="addImageToStage">
61+
<argument name="property" value="PageBuilderBackgroundImage_JPG"/>
62+
<argument name="section" value="ImageOnStageWithoutImageUploaded"/>
63+
</actionGroup>
64+
65+
<!-- Reattach image to PageBuilder stage -->
66+
<comment userInput="Reattach image from stage" stepKey="uploadImageFromStage2"/>
67+
<actionGroup ref="UploadNewImageToContentTypeFromStageActionGroup" stepKey="addImageToStage2">
68+
<argument name="property" value="PageBuilderBackgroundImage_JPG"/>
69+
<argument name="section" value="ImageOnStageWithoutImageUploaded"/>
70+
</actionGroup>
71+
72+
<!-- Remove Image Content -->
73+
<comment userInput="Remove Image Content" stepKey="commentRemoveImageContent"/>
74+
<actionGroup ref="removeContentTypeFromStage" stepKey="removeImageContentTypeFromStage">
75+
<argument name="contentType" value="PageBuilderImageContentType"/>
76+
</actionGroup>
77+
78+
<!-- Add Banner -->
79+
<comment userInput="Add Banner" stepKey="commentAddBanner"/>
80+
<actionGroup ref="dragContentTypeToStage" stepKey="dragBannerIntoStage">
81+
<argument name="contentType" value="PageBuilderBannerContentType"/>
82+
</actionGroup>
83+
84+
<!-- Verify On Hover Upload Button Work-->
85+
<comment userInput="Verify On Hover Upload Buttons Work" stepKey="commentVerifyButtonsOnBanner"/>
86+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenuOnBanner">
87+
<argument name="contentType" value="PageBuilderBannerContentType"/>
88+
</actionGroup>
89+
90+
<!-- Attach image to Banner in PageBuilder stage -->
91+
<comment userInput="Attach image to Banner in PageBuilder stage" stepKey="commentAttachImageToBanner"/>
92+
<actionGroup ref="UploadNewBackgroundImageToContentTypeFromStageActionGroup" stepKey="addImageToBannerFromStage">
93+
<argument name="backgroundImage" value="PageBuilderBackgroundImage_JPG"/>
94+
<argument name="section" value="BannerOnBackend"/>
95+
</actionGroup>
96+
97+
<!-- Reattach image to Banner in PageBuilder stage -->
98+
<comment userInput="Reattach image to Banner in PageBuilder stage" stepKey="commentReattachImageToBanner"/>
99+
<actionGroup ref="UploadNewBackgroundImageToContentTypeFromStageActionGroup" stepKey="addNewImageToBannerFromStage">
100+
<argument name="backgroundImage" value="PageBuilderBackgroundImage_JPG"/>
101+
<argument name="section" value="BannerOnBackend"/>
102+
</actionGroup>
103+
104+
<!-- Remove Banner Content -->
105+
<comment userInput="Remove Banner Content" stepKey="commentRemoveBannerContent"/>
106+
<actionGroup ref="removeContentTypeFromStage" stepKey="removeBannerContentTypeFromStage">
107+
<argument name="contentType" value="PageBuilderBannerContentType"/>
108+
</actionGroup>
109+
110+
<!-- Add Slider -->
111+
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
112+
<argument name="contentType" value="PageBuilderSliderContentType"/>
113+
</actionGroup>
114+
<actionGroup ref="dragContentTypeToStage" stepKey="dragSliderIntoStage">
115+
<argument name="contentType" value="PageBuilderSliderContentType"/>
116+
</actionGroup>
117+
118+
<!-- Verify On Hover Upload Button Work-->
119+
<comment userInput="Verify On Hover Upload Buttons Work" stepKey="commentVerifyButtonsOnSlider"/>
120+
<click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unFocusSlider"/>
121+
<actionGroup ref="verifyUploadImageButtons" stepKey="verifyUploadImageButtons">
122+
<argument name="contentType" value="PageBuilderSliderContentType"/>
123+
</actionGroup>
124+
125+
<!-- Attach image to Slider in PageBuilder stage -->
126+
<actionGroup ref="UploadNewBackgroundImageToContentTypeFromStageActionGroup" stepKey="addNewImageToSliderFromStage">
127+
<argument name="backgroundImage" value="PageBuilderBackgroundImage_JPG"/>
128+
<argument name="section" value="SlideOnBackend"/>
129+
</actionGroup>
130+
131+
<!-- Remove Slider Content -->
132+
<comment userInput="Remove Slider Content" stepKey="commentRemoveSliderContent"/>
133+
<actionGroup ref="removeContentTypeFromStage" stepKey="removeSliderContentTypeFromStage">
134+
<argument name="contentType" value="PageBuilderSliderContentType"/>
135+
</actionGroup>
136+
</test>
137+
</tests>

‎app/code/Magento/PageBuilder/view/adminhtml/requirejs-config.js

+3
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ var config = {
4141
},
4242
'Magento_PageBuilder/js/content-type/row/appearance/default/widget': {
4343
'Magento_PageBuilder/js/content-type/row/appearance/default/widget-mixin': true
44+
},
45+
'Magento_Ui/js/form/element/file-uploader': {
46+
'Magento_PageBuilder/js/form/element/file-uploader': true
4447
}
4548
}
4649
}

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/file-uploader.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* Copyright 2024 Adobe
3+
* All Rights Reserved.
4+
*/
5+
6+
define([
7+
'jquery'
8+
], function ($) {
9+
'use strict';
10+
11+
return function (Element) {
12+
return Element.extend({
13+
14+
/**
15+
* {@inheritDoc}
16+
*/
17+
replaceInputTypeFile: function (fileInput) {
18+
let fileId = fileInput.id, fileName = fileInput.name, fileClass = fileInput.className,
19+
spanElement = '<span id=\'' + fileId + fileClass + '\' ></span>';
20+
21+
$('#' + fileId).closest('.file-uploader-area').attr('upload-area-id', fileName);
22+
$('#' + fileId + fileClass).closest('.file-uploader-area').attr('upload-area-id', fileName);
23+
24+
$(fileInput).replaceWith(spanElement);
25+
26+
$('#' + fileId).closest('.file-uploader-area').find('.file-uploader-button:first').on('click', function () {
27+
$(this).closest('.file-uploader-area').find('.uppy-Dashboard-browse').trigger('click');
28+
});
29+
30+
$('#' + fileId + fileClass).closest('.file-uploader-area').find('.action-upload-image').on('click', function () {
31+
$(this).closest('.file-uploader-area').find('.uppy-Dashboard-browse').trigger('click');
32+
});
33+
},
34+
});
35+
};
36+
});

0 commit comments

Comments
 (0)