Skip to content

Commit 6634cdf

Browse files
anthoulaanthoula
committed
MC-4117: Update banner to use new background images logic
- add new tests to check for overlay position
1 parent 9f45236 commit 6634cdf

File tree

4 files changed

+198
-9
lines changed

4 files changed

+198
-9
lines changed

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

Lines changed: 105 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,118 @@
88

99
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
1010
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
11-
<actionGroup name="validateOverlayPositionLeft">
11+
<!-- Collage Appearances -->
12+
<actionGroup name="validateOverlayPositionCollageLeft">
1213
<arguments>
1314
<argument name="page"/>
1415
<argument name="index" defaultValue="1" type="string"/>
16+
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
1517
</arguments>
16-
<!-- Validate overlay position is left -->
17-
<comment userInput="Validate overlay position is left" stepKey="commentValidateOverlayPositionIsLeft"/>
18+
<!-- Validate right edge of overlay -->
19+
<comment userInput="Validate right edge of overlay" stepKey="commentValidateRightEdgeOfOverlay"/>
1820
<executeJS function="return {{page.wrapperJS('1')}}.getBoundingClientRect().right-{{page.wrapperJS('1')}}.getBoundingClientRect().width/2" stepKey="wrapperRightPositionMinusWidth50Percent"/>
1921
<executeJS function="return {{page.overlayJS('1')}}.getBoundingClientRect().right" stepKey="overlayRightPosition"/>
20-
<executeJS function="return Math.round(({$wrapperRightPositionMinusWidth50Percent}/{$overlayRightPosition})*100)/100" stepKey="overlayRatio"/>
21-
<assertEquals stepKey="assertOverlayRatioIsCorrect">
22+
<executeJS function="return Math.round(({$wrapperRightPositionMinusWidth50Percent}/{$overlayRightPosition})*100)/100" stepKey="overlayRightRatio"/>
23+
<assertEquals stepKey="assertOverlayRightRatio">
2224
<expectedResult type="int">1</expectedResult>
23-
<actualResult type="variable">overlayRatio</actualResult>
25+
<actualResult type="variable">overlayRightRatio</actualResult>
2426
</assertEquals>
27+
<!-- Validate left edge of overlay -->
28+
<comment userInput="Validate left edge of overlay" stepKey="commentValidateLeftEdgeOfOverlay"/>
29+
<executeJS function="return {{page.wrapperJS('1')}}.getBoundingClientRect().left" stepKey="wrapperLeftPosition"/>
30+
<executeJS function="return {{page.overlayJS('1')}}.getBoundingClientRect().left" stepKey="overlayLeftPosition"/>
31+
<executeJS function="return Math.round(({$overlayLeftPosition}-{$wrapperLeftPosition})*100)/100" stepKey="overlayPadding"/>
32+
<assertEquals stepKey="assertOverlayIsEqualToPadding">
33+
<expectedResult type="int">{{padding.value}}</expectedResult>
34+
<actualResult type="variable">overlayPadding</actualResult>
35+
</assertEquals>
36+
</actionGroup>
37+
<actionGroup name="validateOverlayPositionCollageRight">
38+
<arguments>
39+
<argument name="page"/>
40+
<argument name="index" defaultValue="1" type="string"/>
41+
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
42+
</arguments>
43+
<!-- Validate right edge of overlay -->
44+
<comment userInput="Validate right edge of overlay" stepKey="commentValidateRightEdgeOfOverlay"/>
45+
<executeJS function="return {{page.wrapperJS('1')}}.getBoundingClientRect().right" stepKey="wrapperRightPosition"/>
46+
<executeJS function="return {{page.overlayJS('1')}}.getBoundingClientRect().right" stepKey="overlayRightPosition"/>
47+
<executeJS function="return Math.round(({$wrapperRightPosition}-{$overlayRightPosition})*100)/100" stepKey="overlayPadding"/>
48+
<assertEquals stepKey="assertOverlayIsEqualToPadding">
49+
<expectedResult type="int">{{padding.value}}</expectedResult>
50+
<actualResult type="variable">overlayPadding</actualResult>
51+
</assertEquals>
52+
<!-- Validate left edge of overlay -->
53+
<comment userInput="Validate left edge of overlay" stepKey="commentValidateLeftEdgeOfOverlay"/>
54+
<executeJS function="return {{page.wrapperJS('1')}}.getBoundingClientRect().right-{{page.wrapperJS('1')}}.getBoundingClientRect().width/2" stepKey="wrapperRightMinusWidthHalf"/>
55+
<executeJS function="return {{page.overlayJS('1')}}.getBoundingClientRect().left" stepKey="overlayLeftPosition"/>
56+
<executeJS function="return Math.round(({$wrapperRightMinusWidthHalf}/{$overlayLeftPosition})*100)/100" stepKey="overlayLeftRatio"/>
57+
<assertEquals stepKey="assertOverlayLeftRatio">
58+
<expectedResult type="int">1</expectedResult>
59+
<actualResult type="variable">overlayLeftRatio</actualResult>
60+
</assertEquals>
61+
</actionGroup>
62+
<actionGroup name="validateOverlayPositionCollageCenter">
63+
<arguments>
64+
<argument name="page"/>
65+
<argument name="index" defaultValue="1" type="string"/>
66+
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
67+
</arguments>
68+
<!-- Validate right edge of overlay -->
69+
<executeJS function="return ({{page.wrapperJS('1')}}.getBoundingClientRect().width+{{padding.value}}*2)*.25" stepKey="wrapperWidthMinusPadding25"/>
70+
<executeJS function="return {{page.wrapperJS('1')}}.getBoundingClientRect().right-{{page.overlayJS('1')}}.getBoundingClientRect().right" stepKey="overlayRightPosition"/>
71+
<executeJS function="return Math.round(({$wrapperWidthMinusPadding25}/{$overlayRightPosition})*100)/100" stepKey="overlayRightRatio"/>
72+
<assertEquals stepKey="assertOverlayRightRatio">
73+
<expectedResult type="int">1</expectedResult>
74+
<actualResult type="variable">overlayRightRatio</actualResult>
75+
</assertEquals>
76+
<!-- Validate left edge of overlay -->
77+
<comment userInput="Validate left edge of overlay" stepKey="commentValidateLeftEdgeOfOverlay"/>
78+
<executeJS function="return {{page.overlayJS('1')}}.getBoundingClientRect().left-{{page.wrapperJS('1')}}.getBoundingClientRect().left" stepKey="overlayLeftPosition"/>
79+
<executeJS function="return Math.round(({$wrapperWidthMinusPadding25}/{$overlayLeftPosition})*100)/100" stepKey="overlayLeftRatio"/>
80+
<assertEquals stepKey="assertOverlayLeftRatio">
81+
<expectedResult type="int">1</expectedResult>
82+
<actualResult type="variable">overlayLeftRatio</actualResult>
83+
</assertEquals>
84+
</actionGroup>
85+
<!-- Overlay Position -->
86+
<actionGroup name="validateOverlayPositionTop">
87+
<arguments>
88+
<argument name="page"/>
89+
<argument name="index" defaultValue="1" type="string"/>
90+
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
91+
</arguments>
92+
<!-- Validate top edge of overlay with padding -->
93+
<comment userInput="Validate top edge of overlay with padding" stepKey="commentValidateTopEdgeOfOverlayWithPadding"/>
94+
<executeJS function="return {{page.wrapperJS('1')}}.getBoundingClientRect().top" stepKey="wrapperTopPosition"/>
95+
<executeJS function="return {{page.overlayJS('1')}}.getBoundingClientRect().top-{{padding.value}}" stepKey="overlayTopPositionWithPadding"/>
96+
<executeJS function="return Math.round(({$overlayTopPositionWithPadding}/{$wrapperTopPosition})*100)/100" stepKey="overlayTopRatio"/>
97+
<assertEquals stepKey="assertOverlayTopRatio">
98+
<expectedResult type="int">1</expectedResult>
99+
<actualResult type="variable">overlayTopRatio</actualResult>
100+
</assertEquals>
101+
</actionGroup>
102+
<actionGroup name="validateOverlayPositionBottom">
103+
<arguments>
104+
<argument name="page"/>
105+
<argument name="index" defaultValue="1" type="string"/>
106+
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
107+
</arguments>
108+
<!-- Bottom edge validation is skipped until MC-4116 -->
109+
<!-- Validate bottom edge of overlay -->
110+
<!--<comment userInput="Validate bottom edge of overlay" stepKey="commentValidateBottomEdgeOfOverlay"/>-->
111+
<!--<executeJS function="return {{page.wrapperJS('1')}}.getBoundingClientRect().top+{{padding.value}}+120" stepKey="wrapperTopPaddingContent"/>-->
112+
<executeJS function="return {{page.overlayJS('1')}}.getBoundingClientRect().bottom" stepKey="overlayBottomPosition"/>
113+
<!--<assertEquals stepKey="assertOverlayBottomRatio">-->
114+
<!--<expectedResult type="variable">wrapperTopPaddingContent</expectedResult>-->
115+
<!--<actualResult type="variable">overlayBottomPosition</actualResult>-->
116+
<!--</assertEquals>-->
117+
<!-- Validate bottom edge of overlay is within parent -->
118+
<comment userInput="Validate bottom edge of overlay is within parent" stepKey="commentValidateBottomEdgeOfOverlayIsWithinParent"/>
119+
<executeJS function="return {{page.wrapperJS('1')}}.getBoundingClientRect().bottom" stepKey="wrapperBottomPosition"/>
120+
<assertLessThanOrEqual stepKey="assertOverlayBottomIsWithinParent">
121+
<expectedResult type="variable">wrapperBottomPosition</expectedResult>
122+
<actualResult type="variable">overlayBottomPosition</actualResult>
123+
</assertLessThanOrEqual>
25124
</actionGroup>
26125
</actionGroups>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -707,6 +707,40 @@
707707
<seeElement selector="{{BannerOnFrontend.button('1')}}" stepKey="seeButtonOnHoverStorefrontMobile"/>
708708
<seeElement selector="{{BannerOnFrontend.overlayColorAndTransparency('1', PageBuilderBannerContentOverlayColorProperty.rgb, PageBuilderBannerOverlayTransparencyProperty.decimal)}}" stepKey="seeOverlayOnHoverStorefrontMobile"/>
709709
</test>
710+
<test name="BannerCollageCenterOverlayPosition" extends="BannerCollageLeftOverlayPosition">
711+
<annotations>
712+
<features value="PageBuilder"/>
713+
<stories value="Banner"/>
714+
<title value="Collage Center - Check collage center overlay position is correct"/>
715+
<description value="Check collage center overlay is correct"/>
716+
<severity value="CRITICAL"/>
717+
<useCaseId value="MC-4117"/>
718+
<testCaseId value="MC-4969"/>
719+
<group value="pagebuilder"/>
720+
<group value="pagebuilder-banner"/>
721+
<group value="pagebuilder-bannerCollageCenter"/>
722+
</annotations>
723+
<before>
724+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
725+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
726+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
727+
</before>
728+
<after>
729+
<actionGroup ref="logout" stepKey="logout"/>
730+
</after>
731+
<actionGroup ref="chooseVisualSelectOption" stepKey="enterAppearanceProperty">
732+
<argument name="property" value="PageBuilderBannerCollageCenteredProperty"/>
733+
</actionGroup>
734+
<actionGroup ref="validateOverlayPositionCollageCenter" stepKey="validateOverlayPositionStage">
735+
<argument name="page" value="BannerOnBackend"/>
736+
</actionGroup>
737+
<actionGroup ref="validateOverlayPositionCollageCenter" stepKey="validateOverlayPositionStageAfterSave">
738+
<argument name="page" value="BannerOnBackend"/>
739+
</actionGroup>
740+
<actionGroup ref="validateOverlayPositionCollageCenter" stepKey="validateOverlayPositionStorefront">
741+
<argument name="page" value="BannerOnFrontend"/>
742+
</actionGroup>
743+
</test>
710744
<test name="BannerCollageCenterButtonsCanBeEditedInline">
711745
<annotations>
712746
<features value="PageBuilder"/>

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

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -745,6 +745,10 @@
745745
<actionGroup ref="chooseVisualSelectOption" stepKey="enterAppearanceProperty">
746746
<argument name="property" value="PageBuilderBannerCollageLeftProperty"/>
747747
</actionGroup>
748+
<actionGroup ref="addTextToTinyMCE" stepKey="enterMessageText">
749+
<argument name="property" value="PageBuilderBannerMessageProperty"/>
750+
<argument name="section" value="BannerOnConfigurationPanel"/>
751+
</actionGroup>
748752
<actionGroup ref="selectSlideOutPanelField" stepKey="selectShowOverlay">
749753
<argument name="property" value="PageBuilderBannerShowContentOverlayAlwaysProperty"/>
750754
</actionGroup>
@@ -758,22 +762,40 @@
758762
<click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unFocusEditor"/>
759763
<!-- Validate Stage -->
760764
<comment userInput="Validate Stage" stepKey="commentValidateStage"/>
761-
<actionGroup ref="validateOverlayPositionLeft" stepKey="validateOverlayPositionStage">
765+
<actionGroup ref="validateOverlayPositionCollageLeft" stepKey="validateOverlayPositionStage">
766+
<argument name="page" value="BannerOnBackend"/>
767+
</actionGroup>
768+
<actionGroup ref="validateOverlayPositionTop" stepKey="validateOverlayPositionTopStage">
769+
<argument name="page" value="BannerOnBackend"/>
770+
</actionGroup>
771+
<actionGroup ref="validateOverlayPositionBottom" stepKey="validateOverlayPositionBottomStage">
762772
<argument name="page" value="BannerOnBackend"/>
763773
</actionGroup>
764774
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
765775
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
766776
<!-- Validate Stage After Save -->
767777
<comment userInput="Validate Stage After Save" stepKey="commentValidateStageAfterSave"/>
768-
<actionGroup ref="validateOverlayPositionLeft" stepKey="validateOverlayPositionAfterStage">
778+
<actionGroup ref="validateOverlayPositionCollageLeft" stepKey="validateOverlayPositionStageAfterSave">
779+
<argument name="page" value="BannerOnBackend"/>
780+
</actionGroup>
781+
<actionGroup ref="validateOverlayPositionTop" stepKey="validateOverlayPositionTopStageAfterSave">
782+
<argument name="page" value="BannerOnBackend"/>
783+
</actionGroup>
784+
<actionGroup ref="validateOverlayPositionBottom" stepKey="validateOverlayPositionBottomStageAfterSave">
769785
<argument name="page" value="BannerOnBackend"/>
770786
</actionGroup>
771787
<!-- Validate Storefront -->
772788
<comment userInput="Validate Storefront" stepKey="commentValidateStorefront"/>
773789
<actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
774790
<argument name="contentType" value="PageBuilderBannerContentType"/>
775791
</actionGroup>
776-
<actionGroup ref="validateOverlayPositionLeft" stepKey="validateOverlayPositionStorefront">
792+
<actionGroup ref="validateOverlayPositionCollageLeft" stepKey="validateOverlayPositionStorefront">
793+
<argument name="page" value="BannerOnFrontend"/>
794+
</actionGroup>
795+
<actionGroup ref="validateOverlayPositionTop" stepKey="validateOverlayPositionTopStorefront">
796+
<argument name="page" value="BannerOnFrontend"/>
797+
</actionGroup>
798+
<actionGroup ref="validateOverlayPositionBottom" stepKey="validateOverlayPositionBottomStorefront">
777799
<argument name="page" value="BannerOnFrontend"/>
778800
</actionGroup>
779801
</test>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -707,6 +707,40 @@
707707
<seeElement selector="{{BannerOnFrontend.button('1')}}" stepKey="seeButtonOnHoverStorefrontMobile"/>
708708
<seeElement selector="{{BannerOnFrontend.overlayColorAndTransparency('1', PageBuilderBannerContentOverlayColorProperty.rgb, PageBuilderBannerOverlayTransparencyProperty.decimal)}}" stepKey="seeOverlayOnHoverStorefrontMobile"/>
709709
</test>
710+
<test name="BannerCollageRightOverlayPosition" extends="BannerCollageLeftOverlayPosition">
711+
<annotations>
712+
<features value="PageBuilder"/>
713+
<stories value="Banner"/>
714+
<title value="Collage Right - Check collage right overlay position is correct"/>
715+
<description value="Check collage right overlay is correct"/>
716+
<severity value="CRITICAL"/>
717+
<useCaseId value="MC-4117"/>
718+
<testCaseId value="MC-4960"/>
719+
<group value="pagebuilder"/>
720+
<group value="pagebuilder-banner"/>
721+
<group value="pagebuilder-bannerCollageRight"/>
722+
</annotations>
723+
<before>
724+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
725+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
726+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
727+
</before>
728+
<after>
729+
<actionGroup ref="logout" stepKey="logout"/>
730+
</after>
731+
<actionGroup ref="chooseVisualSelectOption" stepKey="enterAppearanceProperty">
732+
<argument name="property" value="PageBuilderBannerCollageRightProperty"/>
733+
</actionGroup>
734+
<actionGroup ref="validateOverlayPositionCollageRight" stepKey="validateOverlayPositionStage">
735+
<argument name="page" value="BannerOnBackend"/>
736+
</actionGroup>
737+
<actionGroup ref="validateOverlayPositionCollageRight" stepKey="validateOverlayPositionStageAfterSave">
738+
<argument name="page" value="BannerOnBackend"/>
739+
</actionGroup>
740+
<actionGroup ref="validateOverlayPositionCollageRight" stepKey="validateOverlayPositionStorefront">
741+
<argument name="page" value="BannerOnFrontend"/>
742+
</actionGroup>
743+
</test>
710744
<test name="BannerCollageRightButtonsCanBeEditedInline">
711745
<annotations>
712746
<features value="PageBuilder"/>

0 commit comments

Comments
 (0)