Skip to content

Commit 5160b49

Browse files
davemacaulaydavemacaulay
authored
Merge pull request #101 from magento-obsessive-owls/MC-914-row-vertical-align
[Team 1] Content Vertical Alignment inside a Container for Row
2 parents bf872ae + 762b4a0 commit 5160b49

File tree

20 files changed

+726
-77
lines changed

20 files changed

+726
-77
lines changed

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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="../../../../../../../dev/tests/acceptance/vendor/magento/magento2-functional-testing-framework/src/Magento/FunctionalTestingFramework/Test/etc/actionGroupSchema.xsd">
11+
<!-- Validate All Layout Styles -->
12+
<actionGroup name="validateLayoutStylesWithAllUpdated">
13+
<arguments>
14+
<argument name="page"/>
15+
<argument name="index" defaultValue="1" type="string"/>
16+
<argument name="minHeight" defaultValue="PageBuilderMinHeightProperty_Empty"/>
17+
<argument name="verticalAlignContainer" defaultValue="PageBuilderVerticalAlignmentPropertyCenter"/>
18+
</arguments>
19+
<waitForElementVisible selector="{{page.base(index)}}" stepKey="waitForRow"/>
20+
<waitForElementVisible selector="{{page.minHeight(index, minHeight.value)}}" stepKey="waitForMinHeight"/>
21+
<waitForElementVisible selector="{{page.verticalAlignContainer(index, verticalAlignContainer.value)}}" stepKey="waitForVerticalAlignContainer"/>
22+
</actionGroup>
23+
</actionGroups>

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

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -52,24 +52,6 @@
5252
<data key="value">190</data>
5353
<data key="valueWithPadding">210</data>
5454
</entity>
55-
<entity name="PageBuilderAppearanceMinHeightProperty" type="pagebuilder_column_min_height_property">
56-
<data key="name">Minimum Height</data>
57-
<data key="section">layout</data>
58-
<data key="fieldName">min_height</data>
59-
<data key="value">500</data>
60-
</entity>
61-
<entity name="PageBuilderAppearanceMinHeightProperty_300" type="pagebuilder_column_min_height_property">
62-
<data key="name">Minimum Height</data>
63-
<data key="section">layout</data>
64-
<data key="fieldName">min_height</data>
65-
<data key="value">300</data>
66-
</entity>
67-
<entity name="PageBuilderAppearanceMinHeightProperty_200" type="pagebuilder_column_min_height_property">
68-
<data key="name">Minimum Height</data>
69-
<data key="section">layout</data>
70-
<data key="fieldName">min_height</data>
71-
<data key="value">200</data>
72-
</entity>
7355
<!-- Background Color -->
7456
<entity name="PageBuilderBackgroundColorProperty" type="pagebuilder_column_background_color_property">
7557
<data key="name">Background Color</data>
@@ -170,9 +152,6 @@
170152
<data key="minHeight300">min-height: 300px</data>
171153
<data key="padding">padding: 5px</data>
172154
<data key="textAlignment">text-align: center</data>
173-
<data key="verticalAlignmentBottom">justify-content: flex-end</data>
174-
<data key="verticalAlignmentCenter">justify-content: center</data>
175-
<data key="verticalAlignmentTop">justify-content: flex-start</data>
176155
<data key="widthOneTwelfth">width: 8.33333%</data>
177156
<data key="widthOneSixth">width: 16.6667%</data>
178157
<data key="widthOneThird">width: 33.3333%</data>

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,71 @@
88

99
<entities xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
1010
xsi:noNamespaceSchemaLocation="../../../../../../../dev/tests/acceptance/vendor/magento/magento2-functional-testing-framework/src/Magento/FunctionalTestingFramework/DataGenerator/etc/dataProfileSchema.xsd">
11+
<!-- Min Height -->
12+
<entity name="PageBuilderMinHeightProperty_Empty" type="pagebuilder_min_height_property">
13+
<data key="name">Minimum Height</data>
14+
<data key="section">layout</data>
15+
<data key="fieldName">min_height</data>
16+
<data key="value"/>
17+
</entity>
18+
<entity name="PageBuilderMinHeightProperty_500" type="pagebuilder_min_height_property">
19+
<data key="name">Minimum Height</data>
20+
<data key="section">layout</data>
21+
<data key="fieldName">min_height</data>
22+
<data key="value">500</data>
23+
<data key="style">min-height: 500px</data>
24+
</entity>
25+
<entity name="PageBuilderMinHeightProperty_300" type="pagebuilder_min_height_property">
26+
<data key="name">Minimum Height</data>
27+
<data key="section">layout</data>
28+
<data key="fieldName">min_height</data>
29+
<data key="value">300</data>
30+
<data key="style">min-height: 300px</data>
31+
</entity>
32+
<entity name="PageBuilderMinHeightProperty_200" type="pagebuilder_min_height_property">
33+
<data key="name">Minimum Height</data>
34+
<data key="section">layout</data>
35+
<data key="fieldName">min_height</data>
36+
<data key="value">200</data>
37+
<data key="style">min-height: 200px</data>
38+
</entity>
39+
<entity name="PageBuilderMinHeightProperty_NonNumeric" type="pagebuilder_min_height_property">
40+
<data key="name">Minimum Height</data>
41+
<data key="section">layout</data>
42+
<data key="fieldName">min_height</data>
43+
<data key="value">a</data>
44+
<data key="errorMessage">Please enter a valid number in this field.</data>
45+
</entity>
46+
<entity name="PageBuilderMinHeightProperty_Negative1" type="pagebuilder_min_height_property">
47+
<data key="name">Minimum Height</data>
48+
<data key="section">layout</data>
49+
<data key="fieldName">min_height</data>
50+
<data key="value">-1</data>
51+
<data key="errorMessage">Please enter a value greater than or equal to 0.</data>
52+
</entity>
1153
<!-- Vertical Alignment -->
1254
<entity name="PageBuilderVerticalAlignmentPropertyTop" type="pagebuilder_vertical_alignment_property">
1355
<data key="name">Vertical alignment</data>
1456
<data key="section">layout</data>
1557
<data key="fieldName">justify_content</data>
1658
<data key="value">flex-start</data>
1759
<data key="optionsList">[Top, Center, Bottom]</data>
60+
<data key="style">justify-content: flex-start</data>
1861
</entity>
1962
<entity name="PageBuilderVerticalAlignmentPropertyCenter" type="pagebuilder_vertical_alignment_property">
2063
<data key="name">Vertical alignment</data>
2164
<data key="section">layout</data>
2265
<data key="fieldName">justify_content</data>
2366
<data key="value">center</data>
2467
<data key="optionsList">[Top, Center, Bottom]</data>
68+
<data key="style">justify-content: center</data>
2569
</entity>
2670
<entity name="PageBuilderVerticalAlignmentPropertyBottom" type="pagebuilder_vertical_alignment_property">
2771
<data key="name">Vertical alignment</data>
2872
<data key="section">layout</data>
2973
<data key="fieldName">justify_content</data>
3074
<data key="value">flex-end</data>
3175
<data key="optionsList">[Top, Center, Bottom]</data>
76+
<data key="style">justify-content: flex-end</data>
3277
</entity>
3378
</entities>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
<element name="baseCss" type="text" selector="div.pagebuilder-content-type.pagebuilder-row"/>
2828
<element name="empty" type="button" selector="(//div[contains(@class,'empty-container')]//div[contains(@class,'element-children') and contains(@class,'row-container')])[{{arg1}}]" parameterized="true"/>
2929
<element name="displayLabel" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}]//div[contains(@class,'pagebuilder-display-label')]" parameterized="true"/>
30+
<element name="rowChildrenStyle" type="text" selector="(//div[contains(@class, 'pagebuilder-row')])[{{arg1}}]//div[contains(@class, 'element-children') and contains(@class, 'row-container')][contains(@style, '{{arg2}}')]" parameterized="true"/>
3031
<!-- Background Configuration -->
3132
<element name="backgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
3233
<element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true"/>
@@ -41,6 +42,9 @@
4142
<element name="parallaxState" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][@data-enable-parallax='{{arg2}}']" parameterized="true"/>
4243
<element name="parallaxSpeed" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][@data-parallax-speed='{{arg2}}']" parameterized="true"/>
4344
<element name="parallaxBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@data-jarallax-original-styles,'background-image: url(') and contains(@data-jarallax-original-styles,'{{arg2}}') and contains(@data-jarallax-original-styles,'{{arg3}}&quot;);')]" parameterized="true"/>
45+
<!-- Layout Configuration -->
46+
<element name="minHeight" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'min-height: {{arg2}}px;')]" parameterized="true"/>
47+
<element name="verticalAlignContainer" type="button" selector="(//div[contains(@class, 'pagebuilder-row')])[{{arg1}}]//div[contains(@class, 'element-children') and contains(@class, 'row-container')][contains(@style,'justify-content: {{arg2}};')]" parameterized="true"/>
4448
<!-- Advanced Configuration -->
4549
<element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
4650
<element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][not(contains(@style,'text-align:'))]" parameterized="true"/>
@@ -57,6 +61,7 @@
5761
<section name="RowOnStorefront">
5862
<element name="base" type="text" selector="(//div[@data-role='row'])[{{arg1}}]" parameterized="true"/>
5963
<element name="computedWidth" type="text" selector="parseInt(window.getComputedStyle(document.querySelector('[data-role=row]')).width)"/>
64+
<element name="rowStyle" type="button" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style, '{{arg2}}')]" parameterized="true"/>
6065
<!-- Background Configuration -->
6166
<element name="backgroundColor" type="button" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
6267
<element name="noBackgroundColor" type="button" selector="(//div[@data-role='row'])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true"/>
@@ -71,6 +76,9 @@
7176
<element name="parallaxState" type="button" selector="(//div[@data-role='row'])[{{arg1}}][@data-enable-parallax='{{arg2}}']" parameterized="true"/>
7277
<element name="parallaxSpeed" type="button" selector="(//div[@data-role='row'])[{{arg1}}][@data-parallax-speed='{{arg2}}']" parameterized="true"/>
7378
<element name="parallaxBackgroundImage" type="button" selector='(//div[@data-role="row"])[{{arg1}}][contains(@data-jarallax-original-styles,"background-image: url(&apos;") and contains(@data-jarallax-original-styles,"{{arg2}}") and contains(@data-jarallax-original-styles,"{{arg3}}&apos;);")]' parameterized="true"/>
79+
<!-- Layout Configuration -->
80+
<element name="minHeight" type="button" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style, 'min-height: {{arg2}}px;')]" parameterized="true"/>
81+
<element name="verticalAlignContainer" type="button" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style, 'justify-content: {{arg2}};')]" parameterized="true"/>
7482
<!-- Advanced Configuration -->
7583
<element name="alignment" type="text" selector="(//div[@data-role='row'])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
7684
<element name="noAlignment" type="text" selector="(//div[@data-role='row'])[{{arg1}}][not(contains(@style,'text-align:'))]" parameterized="true"/>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,14 +84,14 @@
8484
<argument name="contentType" value="PageBuilderColumnContentType"/>
8585
</actionGroup>
8686
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterMinHeightProperty">
87-
<argument name="property" value="PageBuilderAppearanceMinHeightProperty"/>
87+
<argument name="property" value="PageBuilderMinHeightProperty_500"/>
8888
</actionGroup>
8989
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
9090
<comment userInput="Validate Column Height On Stage With Custom Min Height Matches Expected" stepKey="commentValidateColumnHeight"/>
9191
<actionGroup ref="validateContentTypeHeightOnStage" stepKey="assertInitialColumnHeightMatchesExpected">
9292
<argument name="contentType" value="PageBuilderColumnContentType"/>
9393
<argument name="index" value="1"/>
94-
<argument name="containerDefaultHeight" value="PageBuilderAppearanceMinHeightProperty"/>
94+
<argument name="containerDefaultHeight" value="PageBuilderMinHeightProperty_500"/>
9595
<argument name="expectedPaddingTop" value="PageBuilderPaddingProperty10"/>
9696
<argument name="expectedPaddingBottom" value="PageBuilderPaddingProperty10"/>
9797
</actionGroup>
@@ -153,12 +153,12 @@
153153
<argument name="contentType" value="PageBuilderColumnContentType"/>
154154
</actionGroup>
155155
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterMinHeightProperty">
156-
<argument name="property" value="PageBuilderAppearanceMinHeightProperty_200"/>
156+
<argument name="property" value="PageBuilderMinHeightProperty_200"/>
157157
</actionGroup>
158158
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
159159
<comment userInput="Validate Column Height On Stage With Custom Min Height Matches Expected" stepKey="commentValidateColumnHeight"/>
160160
<executeJS function="{{PageBuilderStage.computedHeightOnStage(PageBuilderColumnContentType.role,'1')}}" stepKey="actualStageContentTypeHeight"/>
161-
<executeJS function="return Math.round({{PageBuilderAppearanceMinHeightProperty_200.value}} + {{PageBuilderPaddingProperty10.paddingTop}} + {{PageBuilderPaddingProperty10.paddingBottom}})" stepKey="expectedColumnHeight"/>
161+
<executeJS function="return Math.round({{PageBuilderMinHeightProperty_200.value}} + {{PageBuilderPaddingProperty10.paddingTop}} + {{PageBuilderPaddingProperty10.paddingBottom}})" stepKey="expectedColumnHeight"/>
162162
<assertEquals stepKey="assertHeightOnStageMatchesExpected">
163163
<expectedResult type="variable">actualStageContentTypeHeight</expectedResult>
164164
<actualResult type="variable">expectedColumnHeight</actualResult>

0 commit comments

Comments
 (0)