Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…page-builder into develop
  • Loading branch information
mage-os-ci committed Sep 30, 2024
2 parents 3f00477 + 975aee1 commit 229200e
Show file tree
Hide file tree
Showing 18 changed files with 265 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,7 @@ public function getConfig(\Magento\Framework\DataObject $config): \Magento\Frame
'link',
'charmap',
'media',
'noneditable',
'table',
'paste',
'code',
'help',
'table',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright 2024 Adobe
* All Rights Reserved.
*/
-->
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
<actionGroup name="UploadNewBackgroundImageToContentTypeFromStageActionGroup">
<annotations>
<description>Loads background image from Stage</description>
</annotations>
<arguments>
<argument name="backgroundImage" defaultValue="PageBuilderImageProperty_JPG"/>
<argument name="section"/>
<argument name="index" defaultValue="1" type="string"/>
</arguments>
<attachFile userInput="{{backgroundImage.value}}" selector="{{section.uploadNewImageInputWithUploaderId(index)}}" stepKey="attachBackgroundImageFromLocalToStage"/>
<waitForPageLoad stepKey="waitForLoadingMaskToDisappear"/>
<executeJS function="return window.getComputedStyle(document.evaluate('{{section.backgroundPath(index)}}', document.body).iterateNext()).backgroundImage" stepKey="backgroundImageRawValue"/>
<!-- Return the string value of background-image -->
<executeJS function="return '{{backgroundImage.value}}' ? '{$backgroundImageRawValue}'.match(/(?&lt;=(url\((&quot;|\'))).+(?=(&quot;|\')\))/)[0] : ''" stepKey="backgroundImageValue"/>
<!-- Convert all characters in string variables to regex friendly strings -->
<executeJS function="return '{{backgroundImage.path}}'.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\\\^\\$\|]/g, '\\\\$&amp;')" stepKey="regexFilePath"/>
<executeJS function="return '{{backgroundImage.value}}' ? !!'{$backgroundImageValue}'.match(/.*\/(pub\/|\/)?media.*{$regexFilePath}\/{{backgroundImage.fileName}}(_\d+)?\.{{backgroundImage.extension}}/)[0] : '{$backgroundImageRawValue}' === 'none'" stepKey="actualImageResult"/>
<assertTrue stepKey="assertBackgroundImageContainsFileInformation">
<actualResult type="variable">actualImageResult</actualResult>
</assertTrue>
</actionGroup>
</actionGroups>
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright 2024 Adobe
* All Rights Reserved.
*/
-->
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
<actionGroup name="UploadNewImageToContentTypeFromStageActionGroup">
<arguments>
<argument name="property"/>
<argument name="section" defaultValue="PageBuilderStage"/>
<argument name="index" defaultValue="1" type="string"/>
</arguments>
<attachFile userInput="{{property.value}}" selector="{{section.uploadNewImageInputWithUploaderId(index)}}" stepKey="attachImageFromLocalToStage"/>
<waitForPageLoad stepKey="waitForLoadingMaskToDisappear"/>
<waitForElementVisible selector="{{section.imageSourceByIndex(index, property.fileName)}}" stepKey="waitForMainImageSource1"/>
</actionGroup>
</actionGroups>
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
<element name="bannerTitleAttribute" type="text" selector="(//div[@data-content-type='banner'])[{{arg1}}]//div[@title='{{arg2}}']" parameterized="true"/>
<element name="uploadImageInput" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//input[@name='background_image']"/>
<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')]"/>
<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')]"/>
<element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{bannerIndex}}]//*[contains(@class, 'magento-variable') and contains(@class, 'magento-placeholder')]" parameterized="true"/>
<element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{bannerIndex}}]//*[contains(@class, 'magento-placeholder') and contains(@class, 'magento-widget')]" parameterized="true"/>
<element name="tinymce" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{bannerIndex}}]//div[contains(@class, 'inline-wysiwyg')]" parameterized="true"/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
<element name="uploadImageBtn" type="button" selector="//div[@class='pagebuilder-image-uploader-container']//label[text()='Upload Image']"/>
<element name="uploadImageInput" type="button" selector="(//div[contains(@class,'pagebuilder-image-uploader-container')])[{{arg1}}]//input[@name='image']" parameterized="true"/>
<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')]"/>
<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')]"/>
<!-- Advanced Configuration -->
<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"/>
<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"/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
<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"/>
<element name="uploadImageInput" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//input[@name='background_image']"/>
<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')]"/>
<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')]"/>
<element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{slideIndex}}]//*[contains(@class, 'magento-variable') and contains(@class, 'magento-placeholder')]" parameterized="true"/>
<element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{slideIndex}}]//*[contains(@class, 'magento-placeholder') and contains(@class, 'magento-widget')]" parameterized="true"/>
<element name="tinymce" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{slideIndex}}]//div[contains(@class, 'inline-wysiwyg')]" parameterized="true"/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
<element name="computedWidthOnStage" type="text" selector="return parseInt(window.getComputedStyle(document.querySelectorAll('.pagebuilder-{{arg1}}')[{{arg2}}-1]).width)" parameterized="true"/>
<element name="uploadImageInput" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//input[@name='background_image']"/>
<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')]"/>
<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')]"/>
<element name="onHoverUploadImageButton" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-{{arg1}}')])[{{arg2}}]//label[text()='Upload Image']" parameterized="true"/>
<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"/>
<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"/>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright 2024 Adobe
* All Rights Reserved.
*/
-->
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
<test name="ImageAddToImageBannerSliderAndReplaceTest">
<annotations>
<features value="PageBuilder"/>
<stories value="Image"/>
<title value="Add Missing Image Upload functionality to all media components that support image upload in PageBuilder"/>
<description value="Add Missing Upload Image button for new Media Image, Banner and Slider and allow replacement of image in PageBuilder."/>
<severity value="AVERAGE"/>
<useCaseId value="ACP2E-3122"/>
<testCaseId value="AC-12646"/>
<group value="pagebuilder"/>
<group value="pagebuilder-image"/>
<group value="cloud"/>
</annotations>
<before>
<actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>
<actionGroup ref="CliMediaGalleryEnhancedEnableActionGroup" stepKey="enableOldMediaGallery">
<argument name="enabled" value="0"/>
</actionGroup>
<createData entity="_defaultCmsPage" stepKey="createCMSPage"/>
</before>
<after>
<actionGroup ref="CliMediaGalleryEnhancedEnableActionGroup" stepKey="disableOldMediaGallery">
<argument name="enabled" value="0"/>
</actionGroup>
<deleteData createDataKey="createCMSPage" stepKey="deleteCMSPage" />
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
</after>

<!-- Go to CMS Page in Admin -->
<actionGroup ref="NavigateToCreatedCMSPageActionGroup" stepKey="navigateToCreatedCMSPage1">
<argument name="CMSPage" value="$$createCMSPage$$"/>
</actionGroup>

<!-- Switch to PageBuilder stage -->
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>

<!-- Add a row to PageBuilder stage with image -->
<actionGroup ref="dragContentTypeToStage" stepKey="dragRowToRootContainer">
<argument name="contentType" value="PageBuilderRowContentType"/>
<argument name="containerTargetType" value="PageBuilderRootContainerContentType"/>
</actionGroup>
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection">
<argument name="contentType" value="PageBuilderImageContentType"/>
</actionGroup>
<actionGroup ref="dragContentTypeToStage" stepKey="dragImageIntoStage">
<argument name="contentType" value="PageBuilderImageContentType"/>
</actionGroup>

<!-- Attach image to PageBuilder stage -->
<comment userInput="Upload image from stage" stepKey="uploadImageFromStage"/>
<actionGroup ref="uploadImageToContentTypeFromStage" stepKey="addImageToStage">
<argument name="property" value="PageBuilderBackgroundImage_JPG"/>
<argument name="section" value="ImageOnStageWithoutImageUploaded"/>
</actionGroup>

<!-- Reattach image to PageBuilder stage -->
<comment userInput="Reattach image from stage" stepKey="uploadImageFromStage2"/>
<actionGroup ref="UploadNewImageToContentTypeFromStageActionGroup" stepKey="addImageToStage2">
<argument name="property" value="PageBuilderBackgroundImage_JPG"/>
<argument name="section" value="ImageOnStageWithoutImageUploaded"/>
</actionGroup>

<!-- Remove Image Content -->
<comment userInput="Remove Image Content" stepKey="commentRemoveImageContent"/>
<actionGroup ref="removeContentTypeFromStage" stepKey="removeImageContentTypeFromStage">
<argument name="contentType" value="PageBuilderImageContentType"/>
</actionGroup>

<!-- Add Banner -->
<comment userInput="Add Banner" stepKey="commentAddBanner"/>
<actionGroup ref="dragContentTypeToStage" stepKey="dragBannerIntoStage">
<argument name="contentType" value="PageBuilderBannerContentType"/>
</actionGroup>

<!-- Verify On Hover Upload Button Work-->
<comment userInput="Verify On Hover Upload Buttons Work" stepKey="commentVerifyButtonsOnBanner"/>
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenuOnBanner">
<argument name="contentType" value="PageBuilderBannerContentType"/>
</actionGroup>

<!-- Attach image to Banner in PageBuilder stage -->
<comment userInput="Attach image to Banner in PageBuilder stage" stepKey="commentAttachImageToBanner"/>
<actionGroup ref="UploadNewBackgroundImageToContentTypeFromStageActionGroup" stepKey="addImageToBannerFromStage">
<argument name="backgroundImage" value="PageBuilderBackgroundImage_JPG"/>
<argument name="section" value="BannerOnBackend"/>
</actionGroup>

<!-- Reattach image to Banner in PageBuilder stage -->
<comment userInput="Reattach image to Banner in PageBuilder stage" stepKey="commentReattachImageToBanner"/>
<actionGroup ref="UploadNewBackgroundImageToContentTypeFromStageActionGroup" stepKey="addNewImageToBannerFromStage">
<argument name="backgroundImage" value="PageBuilderBackgroundImage_JPG"/>
<argument name="section" value="BannerOnBackend"/>
</actionGroup>

<!-- Remove Banner Content -->
<comment userInput="Remove Banner Content" stepKey="commentRemoveBannerContent"/>
<actionGroup ref="removeContentTypeFromStage" stepKey="removeBannerContentTypeFromStage">
<argument name="contentType" value="PageBuilderBannerContentType"/>
</actionGroup>

<!-- Add Slider -->
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
<argument name="contentType" value="PageBuilderSliderContentType"/>
</actionGroup>
<actionGroup ref="dragContentTypeToStage" stepKey="dragSliderIntoStage">
<argument name="contentType" value="PageBuilderSliderContentType"/>
</actionGroup>

<!-- Verify On Hover Upload Button Work-->
<comment userInput="Verify On Hover Upload Buttons Work" stepKey="commentVerifyButtonsOnSlider"/>
<click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unFocusSlider"/>
<actionGroup ref="verifyUploadImageButtons" stepKey="verifyUploadImageButtons">
<argument name="contentType" value="PageBuilderSliderContentType"/>
</actionGroup>

<!-- Attach image to Slider in PageBuilder stage -->
<actionGroup ref="UploadNewBackgroundImageToContentTypeFromStageActionGroup" stepKey="addNewImageToSliderFromStage">
<argument name="backgroundImage" value="PageBuilderBackgroundImage_JPG"/>
<argument name="section" value="SlideOnBackend"/>
</actionGroup>

<!-- Remove Slider Content -->
<comment userInput="Remove Slider Content" stepKey="commentRemoveSliderContent"/>
<actionGroup ref="removeContentTypeFromStage" stepKey="removeSliderContentTypeFromStage">
<argument name="contentType" value="PageBuilderSliderContentType"/>
</actionGroup>
</test>
</tests>
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ public function testFilter(string $input, string $output): void
/**
* @return array
*/
public function filterProvider(): array
public static function filterProvider(): array
{
return [
[
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ function ($length) {
/**
* @return array[]
*/
public function getValueDataProvider(): array
public static function getValueDataProvider(): array
{
return [
[
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ public function testGetConfig(array $config, array $expectedConfig): void
/**
* @return array
*/
public function configProvider(): array
public static function configProvider(): array
{
return [
[
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ public function testAfterLogin(bool $isUseSecretKey): void
/**
* @return array
*/
public function afterLoginDataProvider(): array
public static function afterLoginDataProvider(): array
{
return [
[false],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@ var config = {
},
'Magento_PageBuilder/js/content-type/row/appearance/default/widget': {
'Magento_PageBuilder/js/content-type/row/appearance/default/widget-mixin': true
},
'Magento_Ui/js/form/element/file-uploader': {
'Magento_PageBuilder/js/form/element/file-uploader': true
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/**
* Copyright 2024 Adobe
* All Rights Reserved.
*/

define([
'jquery'
], function ($) {
'use strict';

return function (Element) {
return Element.extend({

/**
* {@inheritDoc}
*/
replaceInputTypeFile: function (fileInput) {
let fileId = fileInput.id, fileName = fileInput.name, fileClass = fileInput.className,
spanElement = '<span id=\'' + fileId + fileClass + '\' ></span>';

$('#' + fileId).closest('.file-uploader-area').attr('upload-area-id', fileName);
$('#' + fileId + fileClass).closest('.file-uploader-area').attr('upload-area-id', fileName);

$(fileInput).replaceWith(spanElement);

$('#' + fileId).closest('.file-uploader-area').find('.file-uploader-button:first').on('click', function () {
$(this).closest('.file-uploader-area').find('.uppy-Dashboard-browse').trigger('click');
});

$('#' + fileId + fileClass).closest('.file-uploader-area').find('.action-upload-image').on('click', function () {
$(this).closest('.file-uploader-area').find('.uppy-Dashboard-browse').trigger('click');
});
},
});
};
});
Loading

0 comments on commit 229200e

Please sign in to comment.