Merge remote-tracking branch 'origin/MC-5372-Collage-doesnt-work-correctly' into cms-team-1-delivery

Author: Hwashiang Yu

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/OverlayActionGroup.xml

@@ -505,6 +505,16 @@
         <data key="paddingBottom">10</data>
         <data key="paddingLeft">10</data>
     </entity>
+    <entity name="PageBuilderPaddingPropertyOverlayDefault" type="pagebuilder_padding_property">
+        <data key="name">Margins and Padding</data>
+        <data key="section">advanced</data>
+        <data key="fieldName">margins_and_padding</data>
+        <data key="value">30</data>
+        <data key="paddingTop">30</data>
+        <data key="paddingRight">30</data>
+        <data key="paddingBottom">30</data>
+        <data key="paddingLeft">30</data>
+    </entity>
     <!-- Margins & Padding -->
     <entity name="PageBuilderAdvancedMarginsAndPaddingDefaultProperty" type="pagebuilder_advanced_margins_and_padding_property">
         <data key="name">Margins and Padding</data>

app/code/Magento/PageBuilder/Test/Mftf/Data/AdvancedData.xml

@@ -68,6 +68,13 @@
         <data key="cmsPageLinkName" unique="suffix">cms-page-link-</data>
         <data key="value">Good Night!</data>
     </entity>
+    <entity name="PageBuilderBannerMessagePropertyLong" type="pagebuilder_banner_message_property">
+        <data key="name">Message Text</data>
+        <data key="section">contents</data>
+        <data key="role">textarea</data>
+        <data key="fieldName">message</data>
+        <data key="value">This is a really long message that will wrap when it is placed in a small container.</data>
+    </entity>
     <!-- Background Color -->
     <entity name="PageBuilderBannerBackgroundColor_Empty" type="pagebuilder_banner_background_color_property">
         <data key="name">Background Color</data>
@@ -150,6 +157,12 @@
         <data key="fieldName">button_text</data>
         <data key="value">Editable</data>
     </entity>
+    <entity name="PageBuilderBannerButtonTextPropertyLong" type="pagebuilder_banner_button_text_property">
+        <data key="name">Button Text</data>
+        <data key="section">contents</data>
+        <data key="fieldName">button_text</data>
+        <data key="value">Long button text that will wrap in a small container</data>
+    </entity>
     <entity name="PageBuilderBannerButtonTextProperty_Html" type="pagebuilder_banner_button_text_property">
         <data key="name">Button Text</data>
         <data key="section">contents</data>

app/code/Magento/PageBuilder/Test/Mftf/Data/BannerData.xml

@@ -13,6 +13,7 @@
         <element name="baseJS" type="button" selector="document.querySelectorAll('[data-role=banner] div.pagebuilder-banner-wrapper')[{{arg1}} - 1]" parameterized="true"/>
         <element name="hidden" type="button" selector="(//div[@data-role='banner'])[{{arg1}}][contains(@style, 'display: none')]" parameterized="true"/>
         <element name="notHidden" type="button" selector="(//div[@data-role='banner'])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
+        <element name="elementJS" type="button" selector="document.querySelectorAll('[data-role=banner]')[{{arg1}} - 1]" parameterized="true"/>
         <element name="wrapperCSS" type="button" selector="[data-role=banner] [data-element=wrapper]"/>
         <element name="wrapperJS" type="button" selector="document.querySelectorAll('[data-role=banner] div.pagebuilder-banner-wrapper')[{{arg1}} - 1]" parameterized="true"/>
         <element name="overlay" type="button" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='overlay']" parameterized="true"/>
@@ -44,6 +45,7 @@
         <element name="linkUrl" type="button" selector="(//div[@data-role='banner'])[{{arg1}}]/a[@data-element='link'][contains(@href,'{{arg2}}')]" parameterized="true"/>
         <element name="openInNewTab" type="button" selector="(//div[@data-role='banner'])[{{arg1}}]/a[@data-element='link'][contains(@target,'_blank')]" parameterized="true"/>
         <element name="button" type="button" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='wrapper']//button" parameterized="true"/>
+        <element name="buttonJS" type="text" selector="document.querySelectorAll('.pagebuilder-banner-button')[{{arg1}}-1]" parameterized="true"/>
         <element name="showButton" type="button" selector="(//div[@data-role='banner'])[{{arg1}}][@data-show-button='{{arg2}}']" parameterized="true"/>
         <element name="buttonType" type="button" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='wrapper']//button[contains(@class,'{{arg2}}')]" parameterized="true"/>
         <element name="buttonText" type="button" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='wrapper']//button[.='{{arg2}}']" parameterized="true"/>
@@ -71,6 +73,7 @@
         <element name="base" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and contains(@class,'pagebuilder-content-type')])[{{arg1}}]" parameterized="true"/>
         <element name="hidden" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and contains(@class,'pagebuilder-content-type')])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and contains(@class, 'pagebuilder-content-type-hidden')]" parameterized="true"/>
         <element name="notHidden" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and contains(@class,'pagebuilder-content-type')])[{{arg1}}]/parent::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]" parameterized="true"/>
+        <element name="elementJS" type="button" selector="document.querySelectorAll('[data-role=banner]')[{{arg1}} - 1]" parameterized="true"/>
         <element name="wrapperCSS" type="button" selector="[data-role=banner] [data-element=wrapper]"/>
         <element name="wrapperJS" type="button" selector="document.querySelectorAll('[data-role=banner] div.pagebuilder-banner-wrapper')[{{arg1}} - 1]" parameterized="true"/>
         <element name="overlay" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-banner')])[{{arg1}}]//div[@data-element='overlay']" parameterized="true"/>
@@ -103,6 +106,7 @@
         <element name="noMessageContent" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='content'][.='Edit Banner Text'][not(*)]" parameterized="true"/>
         <element name="messageContentText" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg1}}]/div//div[contains(@class, 'pagebuilder-banner-text-content')]//*[contains(.,'{{arg2}}') and contains(@class, 'inline-wysiwyg')]" parameterized="true"/>
         <element name="button" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//a[@data-element='button']" parameterized="true"/>
+        <element name="buttonJS" type="text" selector="document.querySelectorAll('.pagebuilder-banner-button')[{{arg1}}-1]" parameterized="true"/>
         <element name="showButton" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}][@data-show-button='{{arg2}}']" parameterized="true"/>
         <element name="buttonType" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//a[contains(@class,'{{arg2}}')]" parameterized="true"/>
         <element name="buttonText" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//a//span[.='{{arg2}}']" parameterized="true"/>

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

@@ -69,6 +69,7 @@
         <element name="all" type="text" selector="div[data-role=slide]"/>
         <element name="base" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]" parameterized="true"/>
         <element name="baseJS" type="button" selector="document.querySelectorAll('[data-role=slide] div.pagebuilder-slide-wrapper')[{{arg1}} - 1]" parameterized="true"/>
+        <element name="elementJS" type="button" selector="document.querySelectorAll('[data-role=slide]')[{{arg1}} - 1]" parameterized="true"/>
         <element name="wrapperJS" type="button" selector="document.querySelectorAll('[data-role=slide] div.pagebuilder-slide-wrapper')[{{arg1}} - 1]" parameterized="true"/>
         <element name="wrapperCSS" type="button" selector="[data-role=slide] .pagebuilder-slide-wrapper"/>
         <element name="overlayJS" type="button" selector="document.querySelectorAll('[data-role=slide] div.pagebuilder-overlay')[{{arg1}} - 1]" parameterized="true"/>
@@ -100,6 +101,7 @@
         <element name="linkUrl" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]/a[@data-element='link'][contains(@href,'{{arg2}}')]" parameterized="true"/>
         <element name="openInNewTab" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]/a[@data-element='link'][contains(@target,'_blank')]" parameterized="true"/>
         <element name="button" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper']//button[@data-element='button']" parameterized="true"/>
+        <element name="buttonJS" type="text" selector="document.querySelectorAll('.pagebuilder-slide-button')[{{arg1}}-1]" parameterized="true"/>
         <element name="noButton" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper'][not(descendant::*[@data-element='button'])]" parameterized="true"/>
         <element name="showButton" type="button" selector="(//div[@data-role='slide'])[{{arg1}}][@data-show-button='{{arg2}}']" parameterized="true"/>
         <element name="buttonType" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper']//button[@data-element='button'][contains(@class,'{{arg2}}')]" parameterized="true"/>
@@ -127,6 +129,7 @@
         <element name="all" type="button" selector=".pagebuilder-slide"/>
         <element name="base" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]" parameterized="true"/>
         <element name="emptySlide" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='content'][contains(@class,'pagebuilder-empty-slide') and text()='Edit Slide Text']" parameterized="true"/>
+        <element name="elementJS" type="button" selector="document.querySelectorAll('[data-role=slide]')[{{arg1}} - 1]" parameterized="true"/>
         <element name="wrapperJS" type="button" selector="document.querySelectorAll('[data-role=slider] div.pagebuilder-slide-wrapper')[{{arg1}} - 1]" parameterized="true"/>
         <element name="wrapperCSS" type="button" selector="[data-role=slider] .pagebuilder-slide-wrapper"/>
         <element name="overlayJS" type="button" selector="document.querySelectorAll('[data-role=slider] div.pagebuilder-overlay')[{{arg1}} - 1]" parameterized="true"/>
@@ -161,6 +164,7 @@
         <element name="messageContent" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='content']//p[text()='{{arg2}}']" parameterized="true"/>
         <element name="noMessageContent" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='content'][.='Edit Slide Text'][not(*)]" parameterized="true"/>
         <element name="button" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//a[@data-element='button']" parameterized="true"/>
+        <element name="buttonJS" type="text" selector="document.querySelectorAll('.pagebuilder-slide-button')[{{arg1}}-1]" parameterized="true"/>
         <element name="noButton" type="button" selector="(//div[@data-role='slide'])[{{arg1}}][not(descendant::*[@data-element='button'])]" parameterized="true"/>
         <element name="showButton" type="button" selector="(//div[@data-role='slide'])[{{arg1}}][@data-show-button='{{arg2}}']" parameterized="true"/>
         <element name="buttonType" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//a[@data-element='button'][contains(@class,'{{arg2}}')]" parameterized="true"/>

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

@@ -1341,4 +1341,33 @@
             <actualResult type="variable">$overlayBorderRadiusStorefront2</actualResult>
         </assertEquals>
     </test>
+    <test name="BannerOverlayAndButtonDoNotGoOutsideContainerOnCollageCenterAppearance" extends="BannerOverlayAndButtonDoNotGoOutsideContainerOnPosterAppearance">
+        <annotations>
+            <features value="PageBuilder"/>
+            <stories value="Banner"/>
+            <title value="Collage Center - Banner Overlay and Button do not go outside container on collage center appearance"/>
+            <description value="User should be able to place a banner with Collage Center appearance inside a narrow column without the contents spilling outside of the column."/>
+            <severity value="MAJOR"/>
+            <useCaseId value="MC-5372"/>
+            <testCaseId value="MC-5933"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-banner"/>
+            <group value="pagebuilder-bannerCollageCenter"/>
+        </annotations>
+        <actionGroup ref="chooseVisualSelectOption" stepKey="enterAppearanceProperty">
+            <argument name="property" value="PageBuilderAppearance_CollageCentered"/>
+        </actionGroup>
+        <actionGroup ref="validateOverlayAndButtonCollage" stepKey="validateBannerOnStage">
+            <argument name="column" value="ColumnOnBackend"/>
+            <argument name="element" value="BannerOnBackend"/>
+            <argument name="elementBorderWidth" value="PageBuilderAdvancedBorderWidthProperty10"/>
+            <argument name="diffThreshold" value="2"/>
+        </actionGroup>
+        <actionGroup ref="validateOverlayAndButtonCollage" stepKey="validateBannerOnStorefront">
+            <argument name="column" value="ColumnOnFrontend"/>
+            <argument name="element" value="BannerOnFrontend"/>
+            <argument name="elementBorderWidth" value="PageBuilderAdvancedBorderWidthProperty10"/>
+            <argument name="diffThreshold" value="0"/>
+        </actionGroup>
+    </test>
 </tests>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBannerCollageCenterAppearanceTest.xml

@@ -1344,4 +1344,33 @@
             <actualResult type="variable">$overlayBorderRadiusStorefront2</actualResult>
         </assertEquals>
     </test>
+    <test name="BannerOverlayAndButtonDoNotGoOutsideContainerOnCollageLeftAppearance" extends="BannerOverlayAndButtonDoNotGoOutsideContainerOnPosterAppearance">
+        <annotations>
+            <features value="PageBuilder"/>
+            <stories value="Banner"/>
+            <title value="Collage Left - Banner Overlay and Button do not go outside container on collage left appearance"/>
+            <description value="User should be able to place a banner with Collage Left appearance inside a narrow column without the contents spilling outside of the column."/>
+            <severity value="MAJOR"/>
+            <useCaseId value="MC-5372"/>
+            <testCaseId value="MC-5818"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-banner"/>
+            <group value="pagebuilder-bannerCollageLeft"/>
+        </annotations>
+        <actionGroup ref="chooseVisualSelectOption" stepKey="enterAppearanceProperty">
+            <argument name="property" value="PageBuilderAppearance_CollageLeft"/>
+        </actionGroup>
+        <actionGroup ref="validateOverlayAndButtonCollage" stepKey="validateBannerOnStage">
+            <argument name="column" value="ColumnOnBackend"/>
+            <argument name="element" value="BannerOnBackend"/>
+            <argument name="elementBorderWidth" value="PageBuilderAdvancedBorderWidthProperty10"/>
+            <argument name="diffThreshold" value="2"/>
+        </actionGroup>
+        <actionGroup ref="validateOverlayAndButtonCollage" stepKey="validateBannerOnStorefront">
+            <argument name="column" value="ColumnOnFrontend"/>
+            <argument name="element" value="BannerOnFrontend"/>
+            <argument name="elementBorderWidth" value="PageBuilderAdvancedBorderWidthProperty10"/>
+            <argument name="diffThreshold" value="0"/>
+        </actionGroup>
+    </test>
 </tests>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBannerCollageLeftAppearanceTest.xml

@@ -1245,4 +1245,33 @@
             <actualResult type="variable">$overlayBorderRadiusStorefront2</actualResult>
         </assertEquals>
     </test>
+    <test name="BannerOverlayAndButtonDoNotGoOutsideContainerOnCollageRightAppearance" extends="BannerOverlayAndButtonDoNotGoOutsideContainerOnPosterAppearance">
+        <annotations>
+            <features value="PageBuilder"/>
+            <stories value="Banner"/>
+            <title value="Collage Right - Banner Overlay and Button do not go outside container on collage right appearance"/>
+            <description value="User should be able to place a banner with Collage Right appearance inside a narrow column without the contents spilling outside of the column."/>
+            <severity value="MAJOR"/>
+            <useCaseId value="MC-5372"/>
+            <testCaseId value="MC-5934"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-banner"/>
+            <group value="pagebuilder-bannerCollageRight"/>
+        </annotations>
+        <actionGroup ref="chooseVisualSelectOption" stepKey="enterAppearanceProperty">
+            <argument name="property" value="PageBuilderAppearance_CollageRight"/>
+        </actionGroup>
+        <actionGroup ref="validateOverlayAndButtonCollage" stepKey="validateBannerOnStage">
+            <argument name="column" value="ColumnOnBackend"/>
+            <argument name="element" value="BannerOnBackend"/>
+            <argument name="elementBorderWidth" value="PageBuilderAdvancedBorderWidthProperty10"/>
+            <argument name="diffThreshold" value="2"/>
+        </actionGroup>
+        <actionGroup ref="validateOverlayAndButtonCollage" stepKey="validateBannerOnStorefront">
+            <argument name="column" value="ColumnOnFrontend"/>
+            <argument name="element" value="BannerOnFrontend"/>
+            <argument name="elementBorderWidth" value="PageBuilderAdvancedBorderWidthProperty10"/>
+            <argument name="diffThreshold" value="0"/>
+        </actionGroup>
+    </test>
 </tests>