Skip to content

Commit eb5015b

Browse files
cspruiellcspruiell
committed
MC-5372: Collage Center/Left/Right doesn't work correct in a container smaller than 100% width
 - parameterize arguments in action group - modify logic for position action groups
1 parent a0f5e27 commit eb5015b

File tree

1 file changed

+80
-43
lines changed

1 file changed

+80
-43
lines changed

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

Lines changed: 80 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,15 @@
5959
<argument name="page"/>
6060
<argument name="index" defaultValue="1" type="string"/>
6161
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
62+
<argument name="expectedOverlayWidth" defaultValue="540" type="string"/>
6263
</arguments>
63-
<!-- Validate right edge of overlay -->
64-
<comment userInput="Validate right edge of overlay" stepKey="commentValidateRightEdgeOfOverlay"/>
65-
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().right" stepKey="wrapperRightPosition"/>
66-
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().right" stepKey="overlayRightPosition"/>
67-
<executeJS function="return Math.round(({$wrapperRightPosition}-{$overlayRightPosition})*100)/100" stepKey="overlaySpaceRight"/>
68-
<assertGreaterThanOrEqual stepKey="assertOverlaySpaceRightGreaterThanOrEqualToRightPadding">
69-
<expectedResult type="int">{{padding.paddingRight}}</expectedResult>
70-
<actualResult type="variable">overlaySpaceRight</actualResult>
71-
</assertGreaterThanOrEqual>
64+
<!-- Validate width of overlay -->
65+
<comment userInput="Validate width of overlay" stepKey="commentValidateWidthOfOverlay"/>
66+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().width" stepKey="overlayWidth"/>
67+
<assertEquals stepKey="assertOverlayWidth">
68+
<expectedResult type="string">{{expectedOverlayWidth}}</expectedResult>
69+
<actualResult type="variable">overlayWidth</actualResult>
70+
</assertEquals>
7271
<!-- Validate left edge of overlay -->
7372
<comment userInput="Validate left edge of overlay" stepKey="commentValidateLeftEdgeOfOverlay"/>
7473
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().left" stepKey="wrapperLeftPosition"/>
@@ -85,6 +84,7 @@
8584
<argument name="page"/>
8685
<argument name="index" defaultValue="1" type="string"/>
8786
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
87+
<argument name="expectedOverlayWidth" defaultValue="540" type="string"/>
8888
</arguments>
8989
<!-- Validate right edge of overlay -->
9090
<comment userInput="Validate right edge of overlay" stepKey="commentValidateRightEdgeOfOverlay"/>
@@ -95,30 +95,39 @@
9595
<expectedResult type="int">{{padding.paddingRight}}</expectedResult>
9696
<actualResult type="variable">overlayPadding</actualResult>
9797
</assertEquals>
98-
<!-- Validate left edge of overlay -->
99-
<comment userInput="Validate left edge of overlay" stepKey="commentValidateLeftEdgeOfOverlay"/>
100-
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().left" stepKey="wrapperLeftPosition"/>
101-
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().left" stepKey="overlayLeftPosition"/>
102-
<executeJS function="return Math.round(({$overlayLeftPosition}-{$wrapperLeftPosition})*100)/100" stepKey="overlaySpaceLeft"/>
103-
<assertGreaterThanOrEqual stepKey="assertOverlaySpaceLeftGreaterThanOrEqualToLeftPadding">
104-
<expectedResult type="int">{{padding.paddingLeft}}</expectedResult>
105-
<actualResult type="variable">overlaySpaceLeft</actualResult>
106-
</assertGreaterThanOrEqual>
98+
<!-- Validate width of overlay -->
99+
<comment userInput="Validate width of overlay" stepKey="commentValidateWidthOfOverlay"/>
100+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().width" stepKey="overlayWidth"/>
101+
<assertEquals stepKey="assertOverlayWidth">
102+
<expectedResult type="string">{{expectedOverlayWidth}}</expectedResult>
103+
<actualResult type="variable">overlayWidth</actualResult>
104+
</assertEquals>
107105
</actionGroup>
108106
<!-- Checks the position of the overlay with small padding value. This action group may not work with large padding values -->
109107
<actionGroup name="validateOverlayPositionCollageCenter">
110108
<arguments>
111109
<argument name="page"/>
112110
<argument name="index" defaultValue="1" type="string"/>
113111
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
112+
<argument name="expectedOverlayWidth" defaultValue="540" type="string"/>
114113
</arguments>
115-
<!-- Validate right edge of overlay -->
114+
<!-- Validate width of overlay -->
115+
<comment userInput="Validate width of overlay" stepKey="commentValidateWidthOfOverlay"/>
116+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().width" stepKey="overlayWidth"/>
117+
<assertEquals stepKey="assertOverlayWidth">
118+
<expectedResult type="string">{{expectedOverlayWidth}}</expectedResult>
119+
<actualResult type="variable">overlayWidth</actualResult>
120+
</assertEquals>
121+
<!-- Validate center position of overlay -->
116122
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().right" stepKey="wrapperRightPosition"/>
123+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().width" stepKey="wrapperWidth"/>
124+
<executeJS function="return Math.round(({$wrapperRightPosition}-({$wrapperWidth}/2))*100)/100" stepKey="wrapperCenterPosition"/>
117125
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().right" stepKey="overlayRightPosition"/>
118-
<executeJS function="return Math.round(({$wrapperRightPosition}-{$overlayRightPosition})*100)/100" stepKey="overlaySpaceRight"/>
119-
<assertGreaterThanOrEqual stepKey="assertOverlaySpaceRightGreaterThanOrEqualToRightPadding">
120-
<expectedResult type="int">{{padding.paddingRight}}</expectedResult>
121-
<actualResult type="variable">overlaySpaceRight</actualResult>
126+
<executeJS function="return Math.round(({$overlayRightPosition}-({$overlayWidth}/2))*100)/100" stepKey="overlayCenterPosition"/>
127+
<executeJS function="return Math.round(({$wrapperCenterPosition}/{$overlayCenterPosition})*100)/100" stepKey="overlayCenterRatio"/>
128+
<assertGreaterThanOrEqual stepKey="assertOverlayCenterRatio">
129+
<expectedResult type="int">1</expectedResult>
130+
<actualResult type="variable">overlayCenterRatio</actualResult>
122131
</assertGreaterThanOrEqual>
123132
<!-- Validate left edge of overlay -->
124133
<comment userInput="Validate left edge of overlay" stepKey="commentValidateLeftEdgeOfOverlay"/>
@@ -173,35 +182,49 @@
173182
<actionGroup name="validateOverlayAndButtonPoster">
174183
<arguments>
175184
<argument name="column"/>
185+
<argument name="columnIndex" defaultValue="1" type="string"/>
186+
<argument name="columnBorderWidth" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
187+
<argument name="columnPadding" defaultValue="PageBuilderPaddingProperty10"/>
176188
<argument name="element"/>
189+
<argument name="elementIndex" defaultValue="1" type="string"/>
177190
<argument name="elementBorderWidth" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
191+
<argument name="elementPadding" defaultValue="PageBuilderPaddingPropertyDefault"/>
192+
<argument name="overlayPadding" defaultValue="PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide"/>
178193
<argument name="diffThreshold" defaultValue="0" type="string"/>
179194
</arguments>
180-
<executeJS function="return document.querySelector('{{column.columnX('1')}}').clientWidth" stepKey="columnWidth"/>
181-
<executeJS function="return parseInt({{element.elementJS('1')}}.getBoundingClientRect().width)" stepKey="elementWidth"/>
182-
<executeJS function="return parseInt({$columnWidth} - {{PageBuilderPaddingProperty10.paddingLeft}} - {{PageBuilderPaddingProperty10.paddingRight}})" stepKey="expectedElementWidth"/>
195+
<!-- Validate Element Width -->
196+
<comment userInput="Validate Element Width" stepKey="commentValidateElementWidth"/>
197+
<executeJS function="return document.querySelector('{{column.columnX(columnIndex)}}').clientWidth" stepKey="columnWidth"/>
198+
<executeJS function="return parseInt({{element.elementJS(elementIndex)}}.getBoundingClientRect().width)" stepKey="elementWidth"/>
199+
<executeJS function="return parseInt({$columnWidth} - {{columnPadding.paddingLeft}} - {{columnPadding.paddingRight}} - ({{columnBorderWidth.value}} * 2))" stepKey="expectedElementWidth"/>
183200
<executeJS function="return Math.abs({$expectedElementWidth} - {$elementWidth})" stepKey="elementDiff"/>
184201
<!-- We will allow a 2px offset to account for rounding and any additional threshold that is passed in as an argument -->
185202
<executeJS function="return parseInt({{diffThreshold}} + 2)" stepKey="acceptableOffset"/>
186-
<assertLessThanOrEqual stepKey="assertElementWidthEqualsColumnWidthLessColumnPaddingAndColumnBorderWidth">
203+
<assertLessThanOrEqual stepKey="assertElementWidthEqualsColumnWidthLessPaddingAndBorder">
187204
<expectedResult type="variable">acceptableOffset</expectedResult>
188205
<actualResult type="variable">elementDiff</actualResult>
189206
</assertLessThanOrEqual>
190-
<executeJS function="return parseInt({{element.overlayJS('1')}}.getBoundingClientRect().width)" stepKey="overlayWidth"/>
191-
<executeJS function="return parseInt({$elementWidth} - {{PageBuilderPaddingPropertyDefault.paddingLeft}} - {{PageBuilderPaddingPropertyDefault.paddingRight}} - ({{elementBorderWidth.value}} * 2))" stepKey="expectedOverlayWidth"/>
207+
<!-- Validate Overlay Width -->
208+
<comment userInput="Validate Overlay Width" stepKey="commentValidateOverlayWidth"/>
209+
<executeJS function="return parseInt({{element.overlayJS(elementIndex)}}.getBoundingClientRect().width)" stepKey="overlayWidth"/>
210+
<executeJS function="return parseInt({$elementWidth} - {{elementPadding.paddingLeft}} - {{elementPadding.paddingRight}} - ({{elementBorderWidth.value}} * 2))" stepKey="expectedOverlayWidth"/>
192211
<executeJS function="return Math.abs({$expectedOverlayWidth} - {$overlayWidth})" stepKey="overlayDiff"/>
193-
<assertLessThanOrEqual stepKey="assertOverlayWidthEqualsElementWidthLessElementPaddingAndElementBorderWidth">
212+
<assertLessThanOrEqual stepKey="assertOverlayWidthEqualsElementWidthLessPaddingAndBorder">
194213
<expectedResult type="variable">acceptableOffset</expectedResult>
195214
<actualResult type="variable">overlayDiff</actualResult>
196215
</assertLessThanOrEqual>
197-
<executeJS function="return parseInt({{element.contentJS('1')}}.getBoundingClientRect().width)" stepKey="contentWidth"/>
198-
<executeJS function="return parseInt({$overlayWidth} - {{PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide.paddingLeft}} - {{PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide.paddingRight}})" stepKey="expectedContentWidth"/>
216+
<!-- Validate Content Width -->
217+
<comment userInput="Validate Content Width" stepKey="commentValidateContentWidth"/>
218+
<executeJS function="return parseInt({{element.contentJS(elementIndex)}}.getBoundingClientRect().width)" stepKey="contentWidth"/>
219+
<executeJS function="return parseInt({$overlayWidth} - {{overlayPadding.paddingLeft}} - {{overlayPadding.paddingRight}})" stepKey="expectedContentWidth"/>
199220
<executeJS function="return Math.abs({$expectedContentWidth} - {$contentWidth})" stepKey="contentDiff"/>
200221
<assertLessThanOrEqual stepKey="assertContentWidthEqualsOverlayWidthLessPadding">
201222
<expectedResult type="variable">acceptableOffset</expectedResult>
202223
<actualResult type="variable">contentDiff</actualResult>
203224
</assertLessThanOrEqual>
204-
<executeJS function="return parseInt({{element.buttonJS('1')}}.getBoundingClientRect().width)" stepKey="buttonWidth"/>
225+
<!-- Validate Button Width -->
226+
<comment userInput="Validate Button Width" stepKey="commentValidateButtonWidth"/>
227+
<executeJS function="return parseInt({{element.buttonJS(elementIndex)}}.getBoundingClientRect().width)" stepKey="buttonWidth"/>
205228
<!-- wysiwyg content may shrink smaller, but buttons will never be smaller than 36px (17px padding + 1px border) -->
206229
<executeJS function="return Math.max(36, {$expectedContentWidth})" stepKey="expectedButtonWidth"/>
207230
<executeJS function="return Math.abs({$expectedButtonWidth} - {$buttonWidth})" stepKey="buttonDiff"/>
@@ -213,35 +236,49 @@
213236
<actionGroup name="validateOverlayAndButtonCollage">
214237
<arguments>
215238
<argument name="column"/>
239+
<argument name="columnIndex" defaultValue="1" type="string"/>
240+
<argument name="columnBorderWidth" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
241+
<argument name="columnPadding" defaultValue="PageBuilderPaddingProperty10"/>
216242
<argument name="element"/>
243+
<argument name="elementIndex" defaultValue="1" type="string"/>
217244
<argument name="elementBorderWidth" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
245+
<argument name="elementPadding" defaultValue="PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide"/>
246+
<argument name="overlayPadding" defaultValue="PageBuilderPaddingPropertyOverlayDefault"/>
218247
<argument name="diffThreshold" defaultValue="0" type="string"/>
219248
</arguments>
220-
<executeJS function="return document.querySelector('{{column.columnX('1')}}').clientWidth" stepKey="columnWidth"/>
221-
<executeJS function="return parseInt({{element.elementJS('1')}}.getBoundingClientRect().width)" stepKey="elementWidth"/>
222-
<executeJS function="return parseInt({$columnWidth} - {{PageBuilderPaddingProperty10.paddingLeft}} - {{PageBuilderPaddingProperty10.paddingRight}})" stepKey="expectedElementWidth"/>
249+
<!-- Validate Element Width -->
250+
<comment userInput="Validate Element Width" stepKey="commentValidateElementWidth"/>
251+
<executeJS function="return document.querySelector('{{column.columnX(columnIndex)}}').clientWidth" stepKey="columnWidth"/>
252+
<executeJS function="return parseInt({{element.elementJS(elementIndex)}}.getBoundingClientRect().width)" stepKey="elementWidth"/>
253+
<executeJS function="return parseInt({$columnWidth} - {{columnPadding.paddingLeft}} - {{columnPadding.paddingRight}} - ({{columnBorderWidth.value}} * 2))" stepKey="expectedElementWidth"/>
223254
<executeJS function="return Math.abs({$expectedElementWidth} - {$elementWidth})" stepKey="elementDiff"/>
224255
<!-- We will allow a 2px offset to account for rounding and any additional threshold that is passed in as an argument -->
225256
<executeJS function="return parseInt({{diffThreshold}} + 2)" stepKey="acceptableOffset"/>
226-
<assertLessThanOrEqual stepKey="assertElementWidthEqualsColumnWidthLessColumnPaddingAndColumnBorderWidth">
257+
<assertLessThanOrEqual stepKey="assertElementWidthEqualsColumnWidthLessPaddingAndBorder">
227258
<expectedResult type="variable">acceptableOffset</expectedResult>
228259
<actualResult type="variable">elementDiff</actualResult>
229260
</assertLessThanOrEqual>
230-
<executeJS function="return parseInt({{element.overlayJS('1')}}.getBoundingClientRect().width)" stepKey="overlayWidth"/>
231-
<executeJS function="return parseInt({$elementWidth} - {{PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide.paddingLeft}} - {{PageBuilderAdvancedMarginsAndPaddingPropertyDefaultSlide.paddingRight}} - ({{elementBorderWidth.value}} * 2))" stepKey="expectedOverlayWidth"/>
261+
<!-- Validate Overlay Width -->
262+
<comment userInput="Validate Overlay Width" stepKey="commentValidateOverlayWidth"/>
263+
<executeJS function="return parseInt({{element.overlayJS(elementIndex)}}.getBoundingClientRect().width)" stepKey="overlayWidth"/>
264+
<executeJS function="return parseInt({$elementWidth} - {{elementPadding.paddingLeft}} - {{elementPadding.paddingRight}} - ({{elementBorderWidth.value}} * 2))" stepKey="expectedOverlayWidth"/>
232265
<executeJS function="return Math.abs({$expectedOverlayWidth} - {$overlayWidth})" stepKey="overlayDiff"/>
233-
<assertLessThanOrEqual stepKey="assertOverlayWidthEqualsElementWidthLessElementPaddingAndElementBorderWidth">
266+
<assertLessThanOrEqual stepKey="assertOverlayWidthEqualsElementWidthLessPaddingAndBorder">
234267
<expectedResult type="variable">acceptableOffset</expectedResult>
235268
<actualResult type="variable">overlayDiff</actualResult>
236269
</assertLessThanOrEqual>
237-
<executeJS function="return parseInt({{element.contentJS('1')}}.getBoundingClientRect().width)" stepKey="contentWidth"/>
238-
<executeJS function="return parseInt({$overlayWidth} - {{PageBuilderPaddingPropertyOverlayDefault.paddingLeft}} - {{PageBuilderPaddingPropertyOverlayDefault.paddingRight}})" stepKey="expectedContentWidth"/>
270+
<!-- Validate Content Width -->
271+
<comment userInput="Validate Content Width" stepKey="commentValidateContentWidth"/>
272+
<executeJS function="return parseInt({{element.contentJS(elementIndex)}}.getBoundingClientRect().width)" stepKey="contentWidth"/>
273+
<executeJS function="return parseInt({$overlayWidth} - {{overlayPadding.paddingLeft}} - {{overlayPadding.paddingRight}})" stepKey="expectedContentWidth"/>
239274
<executeJS function="return Math.abs({$expectedContentWidth} - {$contentWidth})" stepKey="contentDiff"/>
240275
<assertLessThanOrEqual stepKey="assertContentWidthEqualsOverlayWidthLessPadding">
241276
<expectedResult type="variable">acceptableOffset</expectedResult>
242277
<actualResult type="variable">contentDiff</actualResult>
243278
</assertLessThanOrEqual>
244-
<executeJS function="return parseInt({{element.buttonJS('1')}}.getBoundingClientRect().width)" stepKey="buttonWidth"/>
279+
<!-- Validate Button Width -->
280+
<comment userInput="Validate Button Width" stepKey="commentValidateButtonWidth"/>
281+
<executeJS function="return parseInt({{element.buttonJS(elementIndex)}}.getBoundingClientRect().width)" stepKey="buttonWidth"/>
245282
<!-- wysiwyg content may shrink smaller, but buttons will never be smaller than 36px (17px padding + 1px border) -->
246283
<executeJS function="return Math.max(36, {$expectedContentWidth})" stepKey="expectedButtonWidth"/>
247284
<executeJS function="return Math.abs({$expectedButtonWidth} - {$buttonWidth})" stepKey="buttonDiff"/>

0 commit comments

Comments
 (0)