Skip to content

Commit a836e8e

Browse files
anthoulaanthoula
committed
MC-4116: Update slider to use new background images logic
- add poster position test - add common overlay class to preview template
1 parent ad83e35 commit a836e8e

File tree

3 files changed

+117
-3
lines changed

3 files changed

+117
-3
lines changed

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

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,49 @@
1010
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
1111
<!-- Collage Appearances -->
1212
<!-- Checks the position of the overlay with small padding value. This action group may not work with large padding values -->
13+
<actionGroup name="validateOverlayPositionPoster">
14+
<arguments>
15+
<argument name="page"/>
16+
<argument name="index" defaultValue="1" type="string"/>
17+
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
18+
</arguments>
19+
<!-- Validate top edge of overlay -->
20+
<comment userInput="Validate top edge of overlay" stepKey="commentValidateTopEdgeOfOverlayWithPadding"/>
21+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().top" stepKey="wrapperTopPosition"/>
22+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().top" stepKey="overlayTopPosition"/>
23+
<executeJS function="return Math.round(({$overlayTopPosition}/{$wrapperTopPosition})*100)/100" stepKey="overlayTopRatio"/>
24+
<assertEquals stepKey="assertOverlayTopRatio">
25+
<expectedResult type="int">1</expectedResult>
26+
<actualResult type="variable">overlayTopRatio</actualResult>
27+
</assertEquals>
28+
<!-- Validate right edge of overlay -->
29+
<comment userInput="Validate right edge of overlay" stepKey="commentValidateRightEdgeOfOverlay"/>
30+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().right" stepKey="wrapperRightPosition"/>
31+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().right" stepKey="overlayRightPosition"/>
32+
<executeJS function="return Math.round(({$wrapperRightPosition}/{$overlayRightPosition})*100)/100" stepKey="overlayRightRatio"/>
33+
<assertEquals stepKey="assertOverlayRightRatio">
34+
<expectedResult type="int">1</expectedResult>
35+
<actualResult type="variable">overlayRightRatio</actualResult>
36+
</assertEquals>
37+
<!-- Validate bottom edge of overlay -->
38+
<comment userInput="Validate bottom edge of overlay" stepKey="commentValidateBottomEdgeOfOverlay"/>
39+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().bottom" stepKey="wrapperBottomPosition"/>
40+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().bottom" stepKey="overlayBottomPosition"/>
41+
<executeJS function="return Math.round(({$wrapperBottomPosition}/{$overlayBottomPosition})*100)/100" stepKey="overlayBottomRatio"/>
42+
<assertEquals stepKey="assertOverlayBottomRatio">
43+
<expectedResult type="int">1</expectedResult>
44+
<actualResult type="variable">overlayBottomRatio</actualResult>
45+
</assertEquals>
46+
<!-- Validate left edge of overlay -->
47+
<comment userInput="Validate left edge of overlay" stepKey="commentValidateLeftEdgeOfOverlay"/>
48+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().left" stepKey="wrapperLeftPosition"/>
49+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().left" stepKey="overlayLeftPosition"/>
50+
<executeJS function="return Math.round(({$wrapperLeftPosition}/{$overlayLeftPosition})*100)/100" stepKey="overlayLeftRatio"/>
51+
<assertEquals stepKey="assertOverlayLeftRatio">
52+
<expectedResult type="int">1</expectedResult>
53+
<actualResult type="variable">overlayLeftRatio</actualResult>
54+
</assertEquals>
55+
</actionGroup>
1356
<actionGroup name="validateOverlayPositionCollageLeft">
1457
<arguments>
1558
<argument name="page"/>
@@ -119,9 +162,9 @@
119162
</assertEquals>
120163
<!-- Validate bottom edge of overlay is within parent -->
121164
<comment userInput="Validate bottom edge of overlay is within parent" stepKey="commentValidateBottomEdgeOfOverlayIsWithinParent"/>
122-
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().bottom" stepKey="wrapperBottomPosition"/>
165+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().bottom-{{padding.paddingBottom}}" stepKey="wrapperBottomPositionNoPadding"/>
123166
<assertLessThanOrEqual stepKey="assertOverlayBottomIsWithinParent">
124-
<expectedResult type="variable">wrapperBottomPosition</expectedResult>
167+
<expectedResult type="variable">wrapperBottomPositionNoPadding</expectedResult>
125168
<actualResult type="variable">overlayBottomPosition</actualResult>
126169
</assertLessThanOrEqual>
127170
</actionGroup>

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -646,6 +646,77 @@
646646
<wait time="3" stepKey="waitArbitraryTimeForPotentialNavigationToOccurStorefrontMobile2" />
647647
<seeCurrentUrlEquals url="{{ExternalLink.googleUrl}}" stepKey="seeThatUrlIsChangedToMobileWysiwygLinkUrlStorefront" />
648648
</test>
649+
<test name="SlideItemPosterOverlayPosition">
650+
<annotations>
651+
<features value="PageBuilder"/>
652+
<stories value="Slider"/>
653+
<title value="Poster - Check poster overlay position is correct"/>
654+
<description value="Check poster overlay is correct"/>
655+
<severity value="CRITICAL"/>
656+
<useCaseId value="MC-4116"/>
657+
<testCaseId value="MC-5033"/>
658+
<group value="pagebuilder"/>
659+
<group value="pagebuilder-slide"/>
660+
<group value="pagebuilder-slideItemPoster"/>
661+
</annotations>
662+
<before>
663+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
664+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
665+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
666+
</before>
667+
<after>
668+
<actionGroup ref="logout" stepKey="logout"/>
669+
</after>
670+
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
671+
<argument name="contentType" value="PageBuilderSliderContentType"/>
672+
</actionGroup>
673+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
674+
<argument name="group" value="PageBuilderSliderContentType"/>
675+
</actionGroup>
676+
<actionGroup ref="dragContentTypeToStageAndExpectEditPanel" stepKey="dragSliderIntoStage">
677+
<argument name="contentType" value="PageBuilderSliderContentType"/>
678+
</actionGroup>
679+
<!-- Fill Out Edit Panel -->
680+
<comment userInput="Fill Out Edit Panel" stepKey="commentFillEditPanel"/>
681+
<actionGroup ref="chooseVisualSelectOption" stepKey="enterAppearanceProperty">
682+
<argument name="property" value="PageBuilderAppearance_Poster"/>
683+
</actionGroup>
684+
<actionGroup ref="addTextToTinyMCE" stepKey="addTextToTinyMCE">
685+
<argument name="property" value="PageBuilderSlideItemContent_Slide1"/>
686+
<argument name="section" value="SlideOnConfigurationPanel"/>
687+
</actionGroup>
688+
<actionGroup ref="selectSlideOutPanelField" stepKey="selectShowOverlay">
689+
<argument name="property" value="PageBuilderSlideItemShowOverlay_Always"/>
690+
</actionGroup>
691+
<actionGroup ref="fillSlideOutPanelField" stepKey="enterOverlayColor">
692+
<argument name="property" value="PageBuilderSlideItemOverlayColor_FF0000"/>
693+
</actionGroup>
694+
<actionGroup ref="fillSlideOutPanelField" stepKey="enterOverlayTransparency">
695+
<argument name="property" value="PageBuilderSlideItemOverlayTransparency_70"/>
696+
</actionGroup>
697+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
698+
<click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unFocusEditor"/>
699+
<!-- Validate Stage -->
700+
<comment userInput="Validate Stage" stepKey="commentValidateStage"/>
701+
<actionGroup ref="validateOverlayPositionPoster" stepKey="validateOverlayPositionStage">
702+
<argument name="page" value="SlideOnBackend"/>
703+
</actionGroup>
704+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
705+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
706+
<!-- Validate Stage After Save -->
707+
<comment userInput="Validate Stage After Save" stepKey="commentValidateStageAfterSave"/>
708+
<actionGroup ref="validateOverlayPositionPoster" stepKey="validateOverlayPositionStageAfterSave">
709+
<argument name="page" value="SlideOnBackend"/>
710+
</actionGroup>
711+
<!-- Validate Storefront -->
712+
<comment userInput="Validate Storefront" stepKey="commentValidateStorefront"/>
713+
<actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
714+
<argument name="contentType" value="PageBuilderSliderContentType"/>
715+
</actionGroup>
716+
<actionGroup ref="validateOverlayPositionPoster" stepKey="validateOverlayPositionStorefront">
717+
<argument name="page" value="SlideOnFrontend"/>
718+
</actionGroup>
719+
</test>
649720
<test name="SliderItemPosterButtonsCanBeEditedInline">
650721
<annotations>
651722
<features value="PageBuilder"/>

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div class="pagebuilder-slide-wrapper"
1313
ko-style="Object.assign(data.main.style(), data.wrapper.styleNoReset())"
1414
event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
15-
<div class="pagebuilder-poster-overlay"
15+
<div class="pagebuilder-overlay pagebuilder-poster-overlay"
1616
attr="data.overlay.attributes"
1717
ko-style="data.overlay.style"
1818
css="data.overlay.css"

0 commit comments

Comments
 (0)