Skip to content

Commit da486ac

Browse files
cspruiellcspruiell
committed
MC-5372: Collage Center/Left/Right doesn't work correct in a container smaller than 100% width
 - add automation tests
1 parent 9e44888 commit da486ac

14 files changed

+598
-0
lines changed

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
9+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
10+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
11+
<actionGroup name="validateBannerOverlayAndButtonPoster">
12+
<arguments>
13+
<argument name="column"/>
14+
<argument name="banner"/>
15+
<argument name="bannerBorderWidth" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
16+
<argument name="diffThreshold" defaultValue="0" type="string"/>
17+
</arguments>
18+
<executeJS function="return document.querySelector('{{column.columnX('1')}}').clientWidth" stepKey="columnWidth"/>
19+
<executeJS function="return parseInt({{banner.bannerJS('1')}}.getBoundingClientRect().width)" stepKey="bannerWidth"/>
20+
<executeJS function="return parseInt({$columnWidth} - {{PageBuilderPaddingPropertyColumnDefault.paddingLeft}} - {{PageBuilderPaddingPropertyColumnDefault.paddingRight}})" stepKey="expectedBannerWidth"/>
21+
<executeJS function="return Math.abs({$expectedBannerWidth} - {$bannerWidth})" stepKey="bannerDiff"/>
22+
<!-- We will allow a 2px offset to account for rounding and any additional threshold that is passed in as an argument -->
23+
<executeJS function="return parseInt({{diffThreshold}} + 2)" stepKey="acceptableOffset"/>
24+
<assertLessThanOrEqual stepKey="assertBannerWidthEqualsColumnWidthLessColumnPaddingAndColumnBorderWidth">
25+
<expectedResult type="variable">acceptableOffset</expectedResult>
26+
<actualResult type="variable">bannerDiff</actualResult>
27+
</assertLessThanOrEqual>
28+
<executeJS function="return parseInt({{banner.overlayJS('1')}}.getBoundingClientRect().width)" stepKey="overlayWidth"/>
29+
<executeJS function="return parseInt({$bannerWidth} - {{PageBuilderPaddingPropertyDefault.paddingLeft}} - {{PageBuilderPaddingPropertyDefault.paddingRight}} - ({{bannerBorderWidth.value}} * 2))" stepKey="expectedOverlayWidth"/>
30+
<executeJS function="return Math.abs({$expectedOverlayWidth} - {$overlayWidth})" stepKey="overlayDiff"/>
31+
<assertLessThanOrEqual stepKey="assertOverlayWidthEqualsBannerWidthLessBannerPaddingAndBannerBorderWidth">
32+
<expectedResult type="variable">acceptableOffset</expectedResult>
33+
<actualResult type="variable">overlayDiff</actualResult>
34+
</assertLessThanOrEqual>
35+
<executeJS function="return parseInt({{banner.contentJS('1')}}.getBoundingClientRect().width)" stepKey="contentWidth"/>
36+
<executeJS function="return parseInt({$overlayWidth} - {{PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide.paddingLeft}} - {{PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide.paddingRight}})" stepKey="expectedContentWidth"/>
37+
<executeJS function="return Math.abs({$expectedContentWidth} - {$contentWidth})" stepKey="contentDiff"/>
38+
<assertLessThanOrEqual stepKey="assertContentWidthEqualsOverlayWidthLessPadding">
39+
<expectedResult type="variable">acceptableOffset</expectedResult>
40+
<actualResult type="variable">contentDiff</actualResult>
41+
</assertLessThanOrEqual>
42+
<executeJS function="return parseInt({{banner.buttonJS('1')}}.getBoundingClientRect().width)" stepKey="buttonWidth"/>
43+
<!-- wysiwyg content may shrink smaller, but buttons will never be smaller than 36px (17px padding + 1px border) -->
44+
<executeJS function="return Math.max(36, {$expectedContentWidth})" stepKey="expectedButtonWidth"/>
45+
<executeJS function="return Math.abs({$expectedButtonWidth} - {$buttonWidth})" stepKey="buttonDiff"/>
46+
<assertLessThanOrEqual stepKey="assertButtonWidthEqualsOverlayWidthLessPadding">
47+
<expectedResult type="variable">acceptableOffset</expectedResult>
48+
<actualResult type="variable">buttonDiff</actualResult>
49+
</assertLessThanOrEqual>
50+
</actionGroup>
51+
<actionGroup name="validateBannerOverlayAndButtonCollage">
52+
<arguments>
53+
<argument name="column"/>
54+
<argument name="banner"/>
55+
<argument name="bannerBorderWidth" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
56+
<argument name="diffThreshold" defaultValue="0" type="string"/>
57+
</arguments>
58+
<executeJS function="return document.querySelector('{{column.columnX('1')}}').clientWidth" stepKey="columnWidth"/>
59+
<executeJS function="return parseInt({{banner.bannerJS('1')}}.getBoundingClientRect().width)" stepKey="bannerWidth"/>
60+
<executeJS function="return parseInt({$columnWidth} - {{PageBuilderPaddingPropertyColumnDefault.paddingLeft}} - {{PageBuilderPaddingPropertyColumnDefault.paddingRight}})" stepKey="expectedBannerWidth"/>
61+
<executeJS function="return Math.abs({$expectedBannerWidth} - {$bannerWidth})" stepKey="bannerDiff"/>
62+
<!-- We will allow a 2px offset to account for rounding and any additional threshold that is passed in as an argument -->
63+
<executeJS function="return parseInt({{diffThreshold}} + 2)" stepKey="acceptableOffset"/>
64+
<assertLessThanOrEqual stepKey="assertBannerWidthEqualsColumnWidthLessColumnPaddingAndColumnBorderWidth">
65+
<expectedResult type="variable">acceptableOffset</expectedResult>
66+
<actualResult type="variable">bannerDiff</actualResult>
67+
</assertLessThanOrEqual>
68+
<executeJS function="return parseInt({{banner.overlayJS('1')}}.getBoundingClientRect().width)" stepKey="overlayWidth"/>
69+
<executeJS function="return parseInt({$bannerWidth} - {{PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide.paddingLeft}} - {{PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide.paddingRight}} - ({{bannerBorderWidth.value}} * 2))" stepKey="expectedOverlayWidth"/>
70+
<executeJS function="return Math.abs({$expectedOverlayWidth} - {$overlayWidth})" stepKey="overlayDiff"/>
71+
<assertLessThanOrEqual stepKey="assertOverlayWidthEqualsBannerWidthLessBannerPaddingAndBannerBorderWidth">
72+
<expectedResult type="variable">acceptableOffset</expectedResult>
73+
<actualResult type="variable">overlayDiff</actualResult>
74+
</assertLessThanOrEqual>
75+
<executeJS function="return parseInt({{banner.contentJS('1')}}.getBoundingClientRect().width)" stepKey="contentWidth"/>
76+
<executeJS function="return parseInt({$overlayWidth} - {{PageBuilderPaddingPropertyOverlayDefault.paddingLeft}} - {{PageBuilderPaddingPropertyOverlayDefault.paddingRight}})" stepKey="expectedContentWidth"/>
77+
<executeJS function="return Math.abs({$expectedContentWidth} - {$contentWidth})" stepKey="contentDiff"/>
78+
<assertLessThanOrEqual stepKey="assertContentWidthEqualsOverlayWidthLessPadding">
79+
<expectedResult type="variable">acceptableOffset</expectedResult>
80+
<actualResult type="variable">contentDiff</actualResult>
81+
</assertLessThanOrEqual>
82+
<executeJS function="return parseInt({{banner.buttonJS('1')}}.getBoundingClientRect().width)" stepKey="buttonWidth"/>
83+
<!-- wysiwyg content may shrink smaller, but buttons will never be smaller than 36px (17px padding + 1px border) -->
84+
<executeJS function="return Math.max(36, {$expectedContentWidth})" stepKey="expectedButtonWidth"/>
85+
<executeJS function="return Math.abs({$expectedButtonWidth} - {$buttonWidth})" stepKey="buttonDiff"/>
86+
<assertLessThanOrEqual stepKey="assertButtonWidthEqualsOverlayWidthLessPadding">
87+
<expectedResult type="variable">acceptableOffset</expectedResult>
88+
<actualResult type="variable">buttonDiff</actualResult>
89+
</assertLessThanOrEqual>
90+
</actionGroup>
91+
</actionGroups>

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,84 @@
4646
<actionGroup name="inlineEditWYSIWYGFromStageForSlideCollageAppearancesInSmallColumns" extends="inlineEditWYSIWYGFromStage">
4747
<click selector="{{SlideOnBackend.base(index)}}" stepKey="focusOnEditorArea"/>
4848
</actionGroup>
49+
<actionGroup name="validateSlideOverlayAndButtonPoster">
50+
<arguments>
51+
<argument name="column"/>
52+
<argument name="slide"/>
53+
<argument name="slideBorderWidth" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
54+
<argument name="diffThreshold" defaultValue="0" type="string"/>
55+
</arguments>
56+
<executeJS function="return document.querySelector('{{column.columnX('1')}}').clientWidth" stepKey="columnWidth"/>
57+
<executeJS function="return parseInt({{slide.slideJS('1')}}.getBoundingClientRect().width)" stepKey="slideWidth"/>
58+
<executeJS function="return parseInt({$columnWidth} - {{PageBuilderPaddingPropertyColumnDefault.paddingLeft}} - {{PageBuilderPaddingPropertyColumnDefault.paddingRight}})" stepKey="expectedSlideWidth"/>
59+
<executeJS function="return Math.abs({$expectedSlideWidth} - {$slideWidth})" stepKey="slideDiff"/>
60+
<!-- We will allow a 2px offset to account for rounding and any additional threshold that is passed in as an argument -->
61+
<executeJS function="return parseInt({{diffThreshold}} + 2)" stepKey="acceptableOffset"/>
62+
<assertLessThanOrEqual stepKey="assertSlideWidthEqualsColumnWidthLessColumnPaddingAndColumnBorderWidth">
63+
<expectedResult type="variable">acceptableOffset</expectedResult>
64+
<actualResult type="variable">slideDiff</actualResult>
65+
</assertLessThanOrEqual>
66+
<executeJS function="return parseInt({{slide.overlayJS('1')}}.getBoundingClientRect().width)" stepKey="overlayWidth"/>
67+
<executeJS function="return parseInt({$slideWidth} - {{PageBuilderPaddingPropertyDefault.paddingLeft}} - {{PageBuilderPaddingPropertyDefault.paddingRight}} - ({{slideBorderWidth.value}} * 2))" stepKey="expectedOverlayWidth"/>
68+
<executeJS function="return Math.abs({$expectedOverlayWidth} - {$overlayWidth})" stepKey="overlayDiff"/>
69+
<assertLessThanOrEqual stepKey="assertOverlayWidthEqualsSlideWidthLessSlidePaddingAndSlideBorderWidth">
70+
<expectedResult type="variable">acceptableOffset</expectedResult>
71+
<actualResult type="variable">overlayDiff</actualResult>
72+
</assertLessThanOrEqual>
73+
<executeJS function="return parseInt({{slide.contentJS('1')}}.getBoundingClientRect().width)" stepKey="contentWidth"/>
74+
<executeJS function="return parseInt({$overlayWidth} - {{PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide.paddingLeft}} - {{PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide.paddingRight}})" stepKey="expectedContentWidth"/>
75+
<executeJS function="return Math.abs({$expectedContentWidth} - {$contentWidth})" stepKey="contentDiff"/>
76+
<assertLessThanOrEqual stepKey="assertContentWidthEqualsOverlayWidthLessPadding">
77+
<expectedResult type="variable">acceptableOffset</expectedResult>
78+
<actualResult type="variable">contentDiff</actualResult>
79+
</assertLessThanOrEqual>
80+
<executeJS function="return parseInt({{slide.buttonJS('1')}}.getBoundingClientRect().width)" stepKey="buttonWidth"/>
81+
<!-- wysiwyg content may shrink smaller, but buttons will never be smaller than 36px (17px padding + 1px border) -->
82+
<executeJS function="return Math.max(36, {$expectedContentWidth})" stepKey="expectedButtonWidth"/>
83+
<executeJS function="return Math.abs({$expectedButtonWidth} - {$buttonWidth})" stepKey="buttonDiff"/>
84+
<assertLessThanOrEqual stepKey="assertButtonWidthEqualsOverlayWidthLessPadding">
85+
<expectedResult type="variable">acceptableOffset</expectedResult>
86+
<actualResult type="variable">buttonDiff</actualResult>
87+
</assertLessThanOrEqual>
88+
</actionGroup>
89+
<actionGroup name="validateSlideOverlayAndButtonCollage">
90+
<arguments>
91+
<argument name="column"/>
92+
<argument name="slide"/>
93+
<argument name="slideBorderWidth" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
94+
<argument name="diffThreshold" defaultValue="0" type="string"/>
95+
</arguments>
96+
<executeJS function="return document.querySelector('{{column.columnX('1')}}').clientWidth" stepKey="columnWidth"/>
97+
<executeJS function="return parseInt({{slide.slideJS('1')}}.getBoundingClientRect().width)" stepKey="slideWidth"/>
98+
<executeJS function="return parseInt({$columnWidth} - {{PageBuilderPaddingPropertyColumnDefault.paddingLeft}} - {{PageBuilderPaddingPropertyColumnDefault.paddingRight}})" stepKey="expectedSlideWidth"/>
99+
<executeJS function="return Math.abs({$expectedSlideWidth} - {$slideWidth})" stepKey="slideDiff"/>
100+
<!-- We will allow a 2px offset to account for rounding and any additional threshold that is passed in as an argument -->
101+
<executeJS function="return parseInt({{diffThreshold}} + 2)" stepKey="acceptableOffset"/>
102+
<assertLessThanOrEqual stepKey="assertSlideWidthEqualsColumnWidthLessColumnPaddingAndColumnBorderWidth">
103+
<expectedResult type="variable">acceptableOffset</expectedResult>
104+
<actualResult type="variable">slideDiff</actualResult>
105+
</assertLessThanOrEqual>
106+
<executeJS function="return parseInt({{slide.overlayJS('1')}}.getBoundingClientRect().width)" stepKey="overlayWidth"/>
107+
<executeJS function="return parseInt({$slideWidth} - {{PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide.paddingLeft}} - {{PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide.paddingRight}} - ({{slideBorderWidth.value}} * 2))" stepKey="expectedOverlayWidth"/>
108+
<executeJS function="return Math.abs({$expectedOverlayWidth} - {$overlayWidth})" stepKey="overlayDiff"/>
109+
<assertLessThanOrEqual stepKey="assertOverlayWidthEqualsSlideWidthLessSlidePaddingAndSlideBorderWidth">
110+
<expectedResult type="variable">acceptableOffset</expectedResult>
111+
<actualResult type="variable">overlayDiff</actualResult>
112+
</assertLessThanOrEqual>
113+
<executeJS function="return parseInt({{slide.contentJS('1')}}.getBoundingClientRect().width)" stepKey="contentWidth"/>
114+
<executeJS function="return parseInt({$overlayWidth} - {{PageBuilderPaddingPropertyOverlayDefault.paddingLeft}} - {{PageBuilderPaddingPropertyOverlayDefault.paddingRight}})" stepKey="expectedContentWidth"/>
115+
<executeJS function="return Math.abs({$expectedContentWidth} - {$contentWidth})" stepKey="contentDiff"/>
116+
<assertLessThanOrEqual stepKey="assertContentWidthEqualsOverlayWidthLessPadding">
117+
<expectedResult type="variable">acceptableOffset</expectedResult>
118+
<actualResult type="variable">contentDiff</actualResult>
119+
</assertLessThanOrEqual>
120+
<executeJS function="return parseInt({{slide.buttonJS('1')}}.getBoundingClientRect().width)" stepKey="buttonWidth"/>
121+
<!-- wysiwyg content may shrink smaller, but buttons will never be smaller than 36px (17px padding + 1px border) -->
122+
<executeJS function="return Math.max(36, {$expectedContentWidth})" stepKey="expectedButtonWidth"/>
123+
<executeJS function="return Math.abs({$expectedButtonWidth} - {$buttonWidth})" stepKey="buttonDiff"/>
124+
<assertLessThanOrEqual stepKey="assertButtonWidthEqualsOverlayWidthLessPadding">
125+
<expectedResult type="variable">acceptableOffset</expectedResult>
126+
<actualResult type="variable">buttonDiff</actualResult>
127+
</assertLessThanOrEqual>
128+
</actionGroup>
49129
</actionGroups>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -505,6 +505,26 @@
505505
<data key="paddingBottom">10</data>
506506
<data key="paddingLeft">10</data>
507507
</entity>
508+
<entity name="PageBuilderPaddingPropertyColumnDefault" type="pagebuilder_padding_property">
509+
<data key="name">Margins and Padding</data>
510+
<data key="section">advanced</data>
511+
<data key="fieldName">margins_and_padding</data>
512+
<data key="value">10</data>
513+
<data key="paddingTop">10</data>
514+
<data key="paddingRight">10</data>
515+
<data key="paddingBottom">10</data>
516+
<data key="paddingLeft">10</data>
517+
</entity>
518+
<entity name="PageBuilderPaddingPropertyOverlayDefault" type="pagebuilder_padding_property">
519+
<data key="name">Margins and Padding</data>
520+
<data key="section">advanced</data>
521+
<data key="fieldName">margins_and_padding</data>
522+
<data key="value">30</data>
523+
<data key="paddingTop">30</data>
524+
<data key="paddingRight">30</data>
525+
<data key="paddingBottom">30</data>
526+
<data key="paddingLeft">30</data>
527+
</entity>
508528
<!-- Margins & Padding -->
509529
<entity name="PageBuilderAdvancedMarginsAndPaddingDefaultProperty" type="pagebuilder_advanced_margins_and_padding_property">
510530
<data key="name">Margins and Padding</data>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,13 @@
6868
<data key="cmsPageLinkName" unique="suffix">cms-page-link-</data>
6969
<data key="value">Good Night!</data>
7070
</entity>
71+
<entity name="PageBuilderBannerMessagePropertyLong" type="pagebuilder_banner_message_property">
72+
<data key="name">Message Text</data>
73+
<data key="section">contents</data>
74+
<data key="role">textarea</data>
75+
<data key="fieldName">message</data>
76+
<data key="value">This is a really long message that will wrap when it is placed in a small container.</data>
77+
</entity>
7178
<!-- Background Color -->
7279
<entity name="PageBuilderBannerBackgroundColor_Empty" type="pagebuilder_banner_background_color_property">
7380
<data key="name">Background Color</data>
@@ -150,6 +157,12 @@
150157
<data key="fieldName">button_text</data>
151158
<data key="value">Editable</data>
152159
</entity>
160+
<entity name="PageBuilderBannerButtonTextPropertyLong" type="pagebuilder_banner_button_text_property">
161+
<data key="name">Button Text</data>
162+
<data key="section">contents</data>
163+
<data key="fieldName">button_text</data>
164+
<data key="value">Long button text that will wrap in a small container</data>
165+
</entity>
153166
<entity name="PageBuilderBannerButtonTextProperty_Html" type="pagebuilder_banner_button_text_property">
154167
<data key="name">Button Text</data>
155168
<data key="section">contents</data>

0 commit comments

Comments
 (0)