Skip to content

Commit 9e78817

Browse files
author
Hwashiang Yu
committed
MC-4096: Product Content Type doesn't wrapped inside tiny Column
- Updated selectors to be more uniform - Updated test steps for comment and steps to resize column - Removed commented style
1 parent 9f948b0 commit 9e78817

File tree

3 files changed

+28
-28
lines changed

3 files changed

+28
-28
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<element name="productImageCSS" type="text" selector=".pagebuilder-products div[data-appearance=grid] ol li.product-item img.product-image-photo"/>
1818
<element name="productName" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//strong//a[@class='product-item-link' and @href and contains(.,'{{arg2}}')]" parameterized="true"/>
1919
<element name="productPrice" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//span[@class='price' and .='${{arg2}}']" parameterized="true"/>
20-
<element name="productPriceContainer" type="text" selector=".pagebuilder-products div[data-appearance=grid] ol li.product-item div.price-box "/>
20+
<element name="productPriceContainer" type="text" selector=".pagebuilder-products div[data-appearance=grid] ol li.product-item div.price-box"/>
2121
<element name="productAddToCart" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//button[contains(@class,'tocart') and @title='Add to Cart']" parameterized="true"/>
2222
<element name="productAddToWishList" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//a[contains(@class,'towishlist') and @title='Add to Wish List']" parameterized="true"/>
2323
<element name="productAddToCompare" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//a[contains(@class,'tocompare') and @title='Add to Compare']" parameterized="true"/>

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

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1094,7 +1094,6 @@
10941094
<dontSeeElementInDOM selector="{{ProductsOnStorefront.hidden('1')}}" stepKey="dontSeeHiddenElement"/>
10951095
<seeElement selector="{{ProductsOnStorefront.base('1')}}" stepKey="waitForContentTypeVisible" />
10961096
</test>
1097-
10981097
<test name="ProductsWrapsInsideTinyColumn">
10991098
<annotations>
11001099
<features value="PageBuilder"/>
@@ -1129,6 +1128,15 @@
11291128
<actionGroup ref="dragContentTypeToStage" stepKey="dragColumnIntoStage">
11301129
<argument name="contentType" value="PageBuilderColumnContentType"/>
11311130
</actionGroup>
1131+
<!-- Make first column to 1/12 -->
1132+
<comment userInput="Make first column to 1/12" stepKey="commentMakeFirstColumnSmall"/>
1133+
<comment userInput="Drag new column onto first group" stepKey="commentDragColumnToFirstColumnGroup"/>
1134+
<actionGroup ref="dragContentTypeToContainer" stepKey="dragColumnIntoFirstColumnGroup">
1135+
<argument name="contentType" value="PageBuilderColumnContentType"/>
1136+
<argument name="contentTypeIndex" value="3"/>
1137+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
1138+
<argument name="containerTargetIndex" value="1"/>
1139+
</actionGroup>
11321140
<!-- Add Products to Stage -->
11331141
<comment userInput="Add Products to Stage" stepKey="addProductsToStage"/>
11341142
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandGroupAddContent">
@@ -1148,17 +1156,14 @@
11481156
<argument name="contentTypeIndex" value="1"/>
11491157
<argument name="containerTargetIndex" value="1"/>
11501158
</actionGroup>
1151-
<!-- Resizing first column to 1/12 -->
1152-
<comment userInput="Resizing first column to 1/12" stepKey="commentInitialResize"/>
1153-
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnResizeGridLine('1')}}').clientWidth" stepKey="guideWidth"/>
1154-
<dragAndDrop selector1="{{ColumnOnBackend.columnX('1')}} {{ColumnOnBackend.columnResizeHandle}}" selector2="{{ColumnOnBackend.columnResizeGridLine('1')}}" x="$guideWidth" stepKey="resizeColumn1"/>
11551159
<waitForPageLoad stepKey="waitForPageLoad" />
1160+
<!-- Validating products is smaller than column -->
1161+
<comment userInput="Validating products is smaller than column" stepKey="commentValidatingProductsIsSmallerThanColumn"/>
11561162
<waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','1/12')}}" stepKey="validateFirstColumnWidth"/>
1157-
<waitForElementVisible selector="{{ColumnOnBackend.displayLabel('2','11/12')}}" stepKey="validateSecondColumnWidth"/>
1158-
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="firstColumnWidth"/>
1159-
<executeJS function="return document.querySelector('{{ProductsOnStage.productImageCSS}}').clientWidth" stepKey="productImageWidth"/>
1160-
<executeJS function="return document.querySelector('{{ProductsOnStage.productPriceContainer}}').clientWidth" stepKey="productPriceContainerWidth"/>
1161-
<executeJS function="return document.querySelector('{{ProductsOnStage.productActions}}').clientWidth" stepKey="productActionsWidth"/>
1163+
<executeJS function="return document.querySelectorAll('{{ColumnOnBackend.columnX('1')}}')[0].clientWidth" stepKey="firstColumnWidth"/>
1164+
<executeJS function="return document.querySelectorAll('{{ProductsOnStage.productImageCSS}}')[0].clientWidth" stepKey="productImageWidth"/>
1165+
<executeJS function="return document.querySelectorAll('{{ProductsOnStage.productPriceContainer}}')[0].clientWidth" stepKey="productPriceContainerWidth"/>
1166+
<executeJS function="return document.querySelectorAll('{{ProductsOnStage.productActions}}')[0].clientWidth" stepKey="productActionsWidth"/>
11621167
<assertGreaterThan stepKey="assertColumnIsWiderThanProductImage">
11631168
<actualResult type="variable">firstColumnWidth</actualResult>
11641169
<expectedResult type="variable">productImageWidth</expectedResult>
@@ -1181,12 +1186,13 @@
11811186
<argument name="contentTypeIndex" value="1"/>
11821187
<argument name="containerTargetIndex" value="1"/>
11831188
</actionGroup>
1189+
<!-- Validating products is smaller than column after save -->
1190+
<comment userInput="Validating products is smaller than column after save" stepKey="commentValidatingProductsIsSmallerThanColumnAfterSave"/>
11841191
<waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','1/12')}}" stepKey="validateFirstColumnWidthAfterSave"/>
1185-
<waitForElementVisible selector="{{ColumnOnBackend.displayLabel('2','11/12')}}" stepKey="validateSecondColumnWidthAfterSave"/>
1186-
<executeJS function="return document.querySelector('{{ColumnOnBackend.columnX('1')}}').clientWidth" stepKey="firstColumnWidthAfterSave"/>
1187-
<executeJS function="return document.querySelector('{{ProductsOnStage.productImageCSS}}').clientWidth" stepKey="productImageWidthAfterSave"/>
1188-
<executeJS function="return document.querySelector('{{ProductsOnStage.productPriceContainer}}').clientWidth" stepKey="productPriceContainerWidthAfterSave"/>
1189-
<executeJS function="return document.querySelector('{{ProductsOnStage.productActions}}').clientWidth" stepKey="productActionsWidthAfterSave"/>
1192+
<executeJS function="return document.querySelectorAll('{{ColumnOnBackend.columnX('1')}}')[0].clientWidth" stepKey="firstColumnWidthAfterSave"/>
1193+
<executeJS function="return document.querySelectorAll('{{ProductsOnStage.productImageCSS}}')[0].clientWidth" stepKey="productImageWidthAfterSave"/>
1194+
<executeJS function="return document.querySelectorAll('{{ProductsOnStage.productPriceContainer}}')[0].clientWidth" stepKey="productPriceContainerWidthAfterSave"/>
1195+
<executeJS function="return document.querySelectorAll('{{ProductsOnStage.productActions}}')[0].clientWidth" stepKey="productActionsWidthAfterSave"/>
11901196
<assertGreaterThan stepKey="assertColumnIsWiderThanProductImageAfterSave">
11911197
<actualResult type="variable">firstColumnWidthAfterSave</actualResult>
11921198
<expectedResult type="variable">productImageWidthAfterSave</expectedResult>
@@ -1204,16 +1210,12 @@
12041210
<actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
12051211
<argument name="contentType" value="PageBuilderProductsContentType"/>
12061212
</actionGroup>
1207-
<actionGroup ref="validateContentTypeInsideContainerStorefrontInDOM" stepKey="checkContentTypeInContainerStorefront">
1208-
<argument name="contentType" value="PageBuilderProductsContentType"/>
1209-
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
1210-
<argument name="contentTypeIndex" value="1"/>
1211-
<argument name="containerTargetIndex" value="1"/>
1212-
</actionGroup>
1213-
<executeJS function="return document.querySelector('{{ColumnOnFrontend.columnX('1')}}').clientWidth" stepKey="firstColumnWidthFrontend"/>
1214-
<executeJS function="return document.querySelector('{{ProductsOnStorefront.productImageCSS}}').clientWidth" stepKey="productImageWidthFrontend"/>
1215-
<executeJS function="return document.querySelector('{{ProductsOnStorefront.productPriceContainer}}').clientWidth" stepKey="productPriceContainerWidthFrontend"/>
1216-
<executeJS function="return document.querySelector('{{ProductsOnStorefront.productActions}}').clientWidth" stepKey="productActionsWidthFrontend"/>
1213+
<!-- Validating products is smaller than column Storefront -->
1214+
<comment userInput="Validating products is smaller than column storefront" stepKey="commentValidatingProductsIsSmallerThanColumnStoreFront"/>
1215+
<executeJS function="return document.querySelectorAll('{{ColumnOnFrontend.columnX('1')}}')[0].clientWidth" stepKey="firstColumnWidthFrontend"/>
1216+
<executeJS function="return document.querySelectorAll('{{ProductsOnStorefront.productImageCSS}}')[0].clientWidth" stepKey="productImageWidthFrontend"/>
1217+
<executeJS function="return document.querySelectorAll('{{ProductsOnStorefront.productPriceContainer}}')[0].clientWidth" stepKey="productPriceContainerWidthFrontend"/>
1218+
<executeJS function="return document.querySelectorAll('{{ProductsOnStorefront.productActions}}')[0].clientWidth" stepKey="productActionsWidthFrontend"/>
12171219
<assertGreaterThan stepKey="assertColumnIsWiderThanProductImageFrontend">
12181220
<actualResult type="variable">firstColumnWidthFrontend</actualResult>
12191221
<expectedResult type="variable">productImageWidthFrontend</expectedResult>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/products/_default.less

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -283,12 +283,10 @@
283283
}
284284
}
285285

286-
287286
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
288287
.pagebuilder-products {
289288
.product-item {
290289
margin-left: calc(~'(100% - 5 * (100%/6)) / 4');
291-
//width: 100%/6;
292290

293291
&:nth-child(4n + 1) {
294292
margin-left: calc(~'(100% - 5 * (100%/6)) / 4');

0 commit comments

Comments
 (0)