MC-4280: Row Vertical Alignment Doesn't Work Inside Block & Dynamic Block

- assert content position is aligned to the bottom

Author: anthoula

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

@@ -36,4 +36,25 @@
         <seeElement selector="{{BlockOnStage.title(index,block.title)}}" stepKey="seeOptionMenuTitle"/>
         <see selector="{{BlockOnStage.content(index)}}" userInput="{{block.content}}" stepKey="seeBlockContentOnStage"/>
     </actionGroup>
+    <actionGroup name="verifyVerticalAlignmentBottomInBlock">
+        <arguments>
+            <argument name="block" defaultValue="BlockOnStorefront"/>
+            <argument name="container" defaultValue="RowOnStorefront"/>
+            <argument name="content" defaultValue="HtmlOnStorefront"/>
+            <argument name="padding" defaultValue="PageBuilderPaddingPropertyDefault"/>
+        </arguments>
+        <executeJS function="return document.querySelectorAll('{{block.baseCSS}} {{container.baseCSS}}')[0].clientHeight;" stepKey="containerHeight"/>
+        <executeJS function="return {$containerHeight}-{{padding.paddingTop}}-{{padding.paddingBottom}}" stepKey="minusPadding"/>
+        <assertEquals stepKey="assertRowHeightEqualsMinHeight">
+            <expectedResult type="int">{{PageBuilderMinHeightProperty_500.value}}</expectedResult>
+            <actualResult type="variable">minusPadding</actualResult>
+        </assertEquals>
+        <executeJS function="return document.querySelectorAll('{{block.baseCSS}} {{container.baseCSS}}')[0].getBoundingClientRect().bottom - 10" stepKey="rowBottomPositionMinusPadding"/>
+        <executeJS function="return document.querySelectorAll('{{block.baseCSS}} {{content.baseCSS}}')[0].getBoundingClientRect().bottom" stepKey="contentBottomPosition"/>
+        <executeJS function="return Math.round(({$rowBottomPositionMinusPadding}/{$contentBottomPosition})*100)/100" stepKey="bottomPositionRatio"/>
+        <assertEquals stepKey="assertBottomPositionRatio">
+            <expectedResult type="int">1</expectedResult>
+            <actualResult type="variable">bottomPositionRatio</actualResult>
+        </assertEquals>
+    </actionGroup>
 </actionGroups>

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

@@ -46,6 +46,7 @@
         <element name="ancestor" type="text" selector="[ancestor::div[@data-role='block']]"/>
         <element name="html" type="text" selector="(//div[@data-role='html'])[{{arg1}}]//a[contains(@class,'pagebuilder-button-primary')]" parameterized="true"/>
         <element name="base" type="text" selector="(//div[@data-role='block'])[{{arg1}}]" parameterized="true"/>
+        <element name="baseCSS" type="text" selector="[data-role=block]"/>
         <element name="hidden" type="text" selector="(//div[@data-role='block'])[{{arg1}}][contains(@style, 'display: none')]" parameterized="true"/>
         <element name="notHidden" type="text" selector="(//div[@data-role='block'])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
         <element name="hr" type="button" selector="(//div[@data-role='block'])[{{arg1}}]/hr" parameterized="true"/>

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

@@ -28,6 +28,7 @@
     </section>
     <section name="HtmlOnStorefront">
         <element name="base" type="text" selector="(//div[@data-role='html'])[{{arg1}}]" parameterized="true"/>
+        <element name="baseCSS" type="text" selector="[data-role=html]"/>
         <element name="hidden" type="text" selector="(//div[@data-role='html'])[{{arg1}}][contains(@style, 'display: none')]" parameterized="true"/>
         <element name="notHidden" type="text" selector="(//div[@data-role='html'])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
         <element name="html" type="text" selector="(//div[@data-role='html'])[{{arg1}}]{{arg2}}" parameterized="true"/>

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

@@ -73,6 +73,7 @@
     </section>
     <section name="RowOnStorefront">
         <element name="base" type="text" selector="(//div[@data-role='row'])[{{arg1}}]/div" parameterized="true"/>
+        <element name="baseCSS" type="text" selector="[data-role=row]"/>
         <element name="baseJS" type="text" selector="document.querySelectorAll('[data-role=row] > div')[{{arg1}} - 1]" parameterized="true"/>
         <element name="hidden" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style, 'display: none')]" parameterized="true"/>
         <element name="notHidden" type="text" selector="(//div[@data-role='row'])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>

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

@@ -1166,18 +1166,23 @@
         <comment userInput="Verify min height and vertical alignment on stage before save" stepKey="commentVerifyMinHeightAndVerticalAlignmentOnStageBeforeSave"/>
         <seeElement selector="({{RowOnStorefront.rowStyle('1', PageBuilderMinHeightProperty_500.style)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeRowMinHeightBeforeSave"/>
         <seeElement selector="({{RowOnStorefront.rowStyle('1', PageBuilderVerticalAlignmentPropertyBottom.style)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeRowVerticalAlignmentBottomBeforeSave"/>
+        <actionGroup ref="verifyVerticalAlignmentBottomInBlock" stepKey="verifyBottomAlignmentBeforeSave"/>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
         <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStageAfterSave"/>
         <!-- Verify Vertical Alignment On Stage - After Save -->
         <comment userInput="Verify min height and vertical alignment on stage after save" stepKey="commentVerifyMinHeightAndVerticalAlignmentOnStageAfterSave"/>
         <seeElement selector="({{RowOnStorefront.rowStyle('1', PageBuilderMinHeightProperty_500.style)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeRowMinHeightAfterSave"/>
         <seeElement selector="({{RowOnStorefront.rowStyle('1', PageBuilderVerticalAlignmentPropertyBottom.style)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeRowVerticalAlignmentBottomAfterSave"/>
+        <actionGroup ref="verifyVerticalAlignmentBottomInBlock" stepKey="verifyBottomAlignmentAfterSave"/>
         <!-- Verify Min Height and Vertical Alignment In Storefront -->
         <comment userInput="Verify min height and vertical alignment in storefront" stepKey="commentVerifyMinHeightAndVerticalAlignmentInStorefront"/>
         <actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
             <argument name="contentType" value="PageBuilderBlockContentType"/>
         </actionGroup>
         <seeElement selector="({{RowOnStorefront.rowStyle('1', PageBuilderMinHeightProperty_500.style)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeRowMinHeightStorefront"/>
         <seeElement selector="({{RowOnStorefront.rowStyle('1', PageBuilderVerticalAlignmentPropertyBottom.style)}}{{BlockOnStorefront.ancestor}})[1]" stepKey="seeRowVerticalAlignmentBottomStorefront"/>
+        <actionGroup ref="verifyVerticalAlignmentBottomInBlock" stepKey="verifyBottomAlignmentStorefront">
+            <argument name="padding" value="PageBuilderPaddingProperty10"/>
+        </actionGroup>
     </test>
 </tests>