Skip to content

Commit 869d832

Browse files
anthoulaanthoula
committed
MC-5079: Add Box Sizing to Storefront Styles (Border & Height Storefront Issues)
- add box sizing for video, since max-width can be set by user
1 parent a0f4188 commit 869d832

File tree

3 files changed

+90
-0
lines changed

3 files changed

+90
-0
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,21 @@
6161
<actualResult type="variable">actualContentHeight</actualResult>
6262
</assertGreaterThan>
6363
</actionGroup>
64+
<!-- Validate Max Width -->
65+
<actionGroup name="validateContentTypeWidthEqualToMaxWidth">
66+
<arguments>
67+
<argument name="content" type="string"/>
68+
<argument name="index" defaultValue="1" type="string"/>
69+
<argument name="border" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
70+
<argument name="width" defaultValue="PageBuilderVideoWidth_500"/>
71+
<argument name="padding" defaultValue="PageBuilderPaddingPropertyDefault"/>
72+
<argument name="pixelBuffer" defaultValue="5" type="string"/>
73+
</arguments>
74+
<executeJS function="return document.querySelectorAll('{{content}}')[{{index}}-1].getBoundingClientRect().width-{{padding.paddingLeft}}-{{padding.paddingRight}}-({{border.value}}*2)" stepKey="actualContentWidth"/>
75+
<executeJS function="return Math.round(Math.abs({$actualContentWidth}-{{width.value}}))" stepKey="contentTypeWidthDifference"/>
76+
<assertLessThanOrEqual stepKey="assertContentWidthDifference">
77+
<expectedResult type="int">{{pixelBuffer}}</expectedResult>
78+
<actualResult type="variable">contentTypeWidthDifference</actualResult>
79+
</assertLessThanOrEqual>
80+
</actionGroup>
6481
</actionGroups>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
<element name="padding" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
3636
</section>
3737
<section name="VideoOnStorefront">
38+
<element name="wrapperCSS" type="text" selector="[data-role=video] [data-element=wrapper]"/>
3839
<!-- Empty Video -->
3940
<element name="empty" type="text" selector="//div[@data-role='video'][count(iframe)=0]"/>
4041
<!-- General Configuration -->

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderVideoTest.xml

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -563,6 +563,78 @@
563563
<argument name="index" value="1"/>
564564
</actionGroup>
565565
</test>
566+
<test name="VideoWithBordersAndPaddingEqualToMaxWidth">
567+
<annotations>
568+
<features value="PageBuilder"/>
569+
<stories value="Video"/>
570+
<title value="Video width with borders and padding is equal to max-width"/>
571+
<description value="A user can see Video width with borders and padding is equal to max-width"/>
572+
<severity value="MAJOR"/>
573+
<useCaseId value="MC-5079"/>
574+
<testCaseId value="MC-5974"/>
575+
<group value="pagebuilder"/>
576+
<group value="pagebuilder-video"/>
577+
</annotations>
578+
<before>
579+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
580+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
581+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
582+
</before>
583+
<after>
584+
<actionGroup ref="logout" stepKey="logout"/>
585+
</after>
586+
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
587+
<argument name="contentType" value="PageBuilderVideoContentType"/>
588+
</actionGroup>
589+
<!-- Configure content type -->
590+
<comment userInput="Configure content type" stepKey="commentConfigureContentType"/>
591+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandGroup">
592+
<argument name="group" value="PageBuilderVideoContentType"/>
593+
</actionGroup>
594+
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
595+
<argument name="contentType" value="PageBuilderVideoContentType"/>
596+
</actionGroup>
597+
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditPanel">
598+
<argument name="contentType" value="PageBuilderVideoContentType"/>
599+
</actionGroup>
600+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterVideoUrlProperty">
601+
<argument name="property" value="PageBuilderVideoUrl_YouTube"/>
602+
</actionGroup>
603+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterWidthProperty">
604+
<argument name="property" value="PageBuilderVideoWidth_500"/>
605+
</actionGroup>
606+
<actionGroup ref="selectSlideOutPanelField" stepKey="enterBorder">
607+
<argument name="property" value="PageBuilderAdvancedBorderPropertySolid"/>
608+
</actionGroup>
609+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterBorderColor">
610+
<argument name="property" value="PageBuilderAdvancedBorderColorProperty_green"/>
611+
</actionGroup>
612+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterBorderWidth">
613+
<argument name="property" value="PageBuilderAdvancedBorderWidthProperty10"/>
614+
</actionGroup>
615+
<actionGroup ref="fillSlideOutPanelFieldPadding" stepKey="enterPadding">
616+
<argument name="property" value="PageBuilderPaddingProperty10"/>
617+
</actionGroup>
618+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
619+
<!-- Validate width on stage before save -->
620+
<comment userInput="Validate width on stage before save" stepKey="commentValidateWidthOnStageBeforeSave"/>
621+
<actionGroup ref="validateContentTypeWidthEqualToMaxWidth" stepKey="validateContentTypeWidthBeforeSave">
622+
<argument name="content" value="{{VideoOnStorefront.wrapperCSS}}"/>
623+
</actionGroup>
624+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
625+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
626+
<!-- Validate width on stage after save -->
627+
<comment userInput="Validate width on stage after save" stepKey="commentValidateWidthOnStageAfterSave"/>
628+
<actionGroup ref="validateContentTypeWidthEqualToMaxWidth" stepKey="validateContentTypeWidthAfterSave">
629+
<argument name="content" value="{{VideoOnStorefront.wrapperCSS}}"/>
630+
</actionGroup>
631+
<actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
632+
<argument name="contentType" value="PageBuilderVideoContentType"/>
633+
</actionGroup>
634+
<actionGroup ref="validateContentTypeWidthEqualToMaxWidth" stepKey="validateContentTypeWidthStorefront">
635+
<argument name="content" value="{{VideoOnStorefront.wrapperCSS}}"/>
636+
</actionGroup>
637+
</test>
566638
<test name="VideoValidateURL">
567639
<annotations>
568640
<features value="PageBuilder"/>

0 commit comments

Comments
 (0)