Skip to content

Commit a744fcd

Browse files
committed
MC-5079: Add Box Sizing to Storefront Styles (Border & Height Storefront Issues)
- add new test to assert tab group with borders and padding is equal to min height - add new tab group css selectors
1 parent 0a97d41 commit a744fcd

File tree

2 files changed

+56
-0
lines changed

2 files changed

+56
-0
lines changed

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTabsSection.xml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@
99
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
1010
<section name="TabsOnStage">
1111
<element name="base" type="button" selector="(//div[@data-role='tabs'])[{{arg1}}]" parameterized="true"/>
12+
<element name="baseCSS" type="text" selector="div.pagebuilder-content-type.pagebuilder-row"/>
1213
<element name="hidden" type="button" selector="(//div[@data-role='tabs'])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and contains(@class, 'pagebuilder-content-type-hidden')]" parameterized="true"/>
1314
<element name="notHidden" type="button" selector="(//div[@data-role='tabs'])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]" parameterized="true"/>
1415
<element name="tabsContainer" type="button" selector="//div[contains(@class,'pagebuilder-tabs')]"/>
1516
<element name="tabsNavigation" type="button" selector="(//div[contains(@class,'pagebuilder-tabs')]//descendant::*[contains(@class,'tabs-navigation')])"/>
1617
<element name="tabsNavAligned" type="button" selector="(//div[contains(@class,'pagebuilder-tabs')]//descendant::*[contains(@class,'tabs-navigation')][contains(@style, 'text-align: {{arg1}};')])" parameterized="true"/>
1718
<element name="tabsContent" type="button" selector="//div[contains(@class,'pagebuilder-tabs')]//div[contains(@class,'tabs-content')]"/>
19+
<element name="tabsContentCSS" type="button" selector="div.pagebuilder-content-type.pagebuilder-tabs .tabs-content"/>
1820
<element name="tabsContentDefault" type="button" selector="(//div[contains(@class,'pagebuilder-tabs')]//descendant::*[contains(@class,'tabs-content')][@style='border-width: 1px; border-radius: {{arg1}}px; min-height: 300px;'])" parameterized="true"/>
1921
<element name="tabsContentAdvancedStyles" type="button" selector="(//div[contains(@class,'pagebuilder-tabs')]//descendant::*[contains(@class,'tabs-content')][contains(@style, 'border-style: solid;')][contains(@style,'border-color: rgb(0, 0, 0);')][contains(@style, 'border-width: 10px;')][contains(@style, 'border-radius: 12px;')][contains(@style, 'min-height: 300px;')])"/>
2022
<element name="tabsContentMinHeight" type="button" selector="(//div[contains(@class,'pagebuilder-tabs')]//descendant::*[contains(@class,'tabs-content')][contains(@style,'min-height: {{arg1}}px;')])" parameterized="true"/>
@@ -31,6 +33,7 @@
3133
<element name="tabsMinHeight" type="button" selector="//div[@data-role='tabs']//div[@class='tabs-content'][contains(@style, 'min-height: {{arg1}}px')]" parameterized="true"/>
3234
<element name="tabsNavAligned" type="button" selector="(//div[@data-role='tabs']//descendant::*[@role='tablist'][contains(@style, 'text-align: {{arg1}};')])" parameterized="true"/>
3335
<element name="tabsContentAdvancedStyles" type="button" selector="//div[@class='tabs-content'][contains(@style, 'border-style: solid;')][contains(@style, 'border-color: rgb(0, 0, 0);')][contains(@style, 'border-width: 10px;')][contains(@style, 'border-radius: 12px;')][contains(@style, 'min-height: 300px;')]"/>
36+
<element name="tabsContentCSS" type="text" selector="[data-role=tabs] .tabs-content[data-element=content]"/>
3437
<element name="tabsAlignment" type="text" selector="//div[@class='tabs-content'and contains(@style,'text-align: {{arg1}}')]" parameterized="true"/>
3538
<element name="tabsContentHeightJS" type="button" selector="document.querySelectorAll('[class=tabs-content]')[{{arg1}}].clientHeight" parameterized="true"/>
3639
</section>
@@ -54,6 +57,7 @@
5457
<element name="tabTitle" type="button" selector="//*[@name='tabs[{{arg1}}][title]']" parameterized="true"/>
5558
<element name="tabPanel" type="button" selector="//*[@role='tabpanel'][{{arg1}}]" parameterized="true"/>
5659
<element name="tabContent" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')]" parameterized="true"/>
60+
<element name="tabContentCSS" type="text" selector="[data-role=tabs] [data-role=tab-item]"/>
5761
<element name="tabContentBackgroundColor" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'background-color: {{arg2}}')]" parameterized="true"/>
5862
<element name="tabContentBackgroundImage" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'background-image: url') and contains(@style, '{{arg2}}') and contains(@style, '{{arg3}}')]" parameterized="true"/>
5963
<element name="tabContentBackgroundAttachment" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'background-attachment: {{arg2}}')]" parameterized="true"/>
@@ -90,6 +94,7 @@
9094
<element name="tabHeaderItemActive" type="button" selector="(//div[@data-role='tabs']//descendant::*[@role='tablist'])/li[{{arg1}}][contains(@class, 'ui-state-active')]" parameterized="true"/>
9195
<element name="tabPanel" type="button" selector="(//div[@class='tabs-content']//div[@role='tabpanel'])[{{arg1}}]" parameterized="true"/>
9296
<element name="tabContent" type="button" selector="div.tabs-content div[data-role=tab-item]:nth-child({{arg1}})" parameterized="true"/>
97+
<element name="tabContentCSS" type="text" selector="[data-role=tabs] .tabs-content[data-element=content] [data-role=tab-item]"/>
9398
<element name="container" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}]" parameterized="true"/>
9499
<element name="containerStyle" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][contains(@style,'{{arg2}}')]" parameterized="true"/>
95100
<element name="noMinHeight" type="button" selector="(//div[@class='tabs-content']//div[@data-role='tab-item'])[{{arg1}}][not(contains(@style,'min-height:'))]" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTabGroupTests.xml

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,57 @@
302302
<waitForPageLoad stepKey="waitForPageLoadStoreFront" time="30"/>
303303
<waitForElementVisible selector="{{TabsOnFrontend.tabsMinHeight(PageBuilderTabsDefinedMinHeight.value)}}" stepKey="seeMinHeightStorefront"/>
304304
</test>
305+
<test name="TabsWithBordersAndPaddingEqualToMinHeight" extends="RowWithBordersAndPaddingEqualToMinHeight">
306+
<annotations>
307+
<features value="PageBuilder"/>
308+
<stories value="Tab"/>
309+
<title value="Tabs Group - Height is equal to min height"/>
310+
<description value="A user can see Tab group height with borders and padding is equal to min height"/>
311+
<severity value="CRITICAL"/>
312+
<useCaseId value="MC-5079"/>
313+
<testCaseId value="MC-5775"/>
314+
<group value="pagebuilder"/>
315+
<group value="pagebuilder-tabs"/>
316+
<group value="pagebuilder-tabsGroup"/>
317+
</annotations>
318+
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
319+
<argument name="contentType" value="PageBuilderTabsContentType"/>
320+
</actionGroup>
321+
<actionGroup ref="dragContentTypeToStage" after="commentConfigureContentType" stepKey="dragContentTypeToStage">
322+
<argument name="contentType" value="PageBuilderTabsContentType"/>
323+
</actionGroup>
324+
<click selector="{{TabsOnStage.tabsContainer}}" after="dragContentTypeToStage" stepKey="focusTabsElement"/>
325+
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditPanel">
326+
<argument name="contentType" value="PageBuilderTabsContentType"/>
327+
</actionGroup>
328+
<actionGroup ref="fillSlideOutPanelField" stepKey="enterMinHeightProperty">
329+
<argument name="property" value="PageBuilderTabsDefinedMinHeight"/>
330+
</actionGroup>
331+
<actionGroup ref="openPageBuilderEditPanelSmallByIndex" after="saveEditPanelSettings" stepKey="openTabItemEditPanel">
332+
<argument name="section" value="TabOnStage"/>
333+
</actionGroup>
334+
<actionGroup ref="fillSlideOutPanelField" after="openTabItemEditPanel" stepKey="enterMinHeightPropertyTabItem">
335+
<argument name="property" value="PageBuilderTabMinimumHeight200Property"/>
336+
</actionGroup>
337+
<actionGroup ref="saveEditPanelSettings" after="enterMinHeightPropertyTabItem" stepKey="saveEditPanelSettings2"/>
338+
<actionGroup ref="validateContentTypeHeightEqualToMinHeight" stepKey="validateContentTypeHeightBeforeSave">
339+
<argument name="content" value="{{TabsOnStage.tabsContentCSS}}"/>
340+
<argument name="height" value="PageBuilderTabsDefinedMinHeight"/>
341+
<argument name="border" value="PageBuilderAdvancedBorderWidthProperty10"/>
342+
</actionGroup>
343+
<actionGroup ref="validateContentTypeHeightEqualToMinHeight" stepKey="validateContentTypeHeightAfterSave">
344+
<argument name="content" value="{{TabsOnStage.tabsContentCSS}}"/>
345+
<argument name="height" value="PageBuilderTabsDefinedMinHeight"/>
346+
<argument name="border" value="PageBuilderAdvancedBorderWidthProperty10"/>
347+
</actionGroup>
348+
<actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
349+
<argument name="contentType" value="PageBuilderTabsContentType"/>
350+
</actionGroup>
351+
<actionGroup ref="validateContentTypeHeightEqualToMinHeight" stepKey="validateContentTypeHeightStorefront">
352+
<argument name="content" value="{{TabsOnFrontend.tabsContentCSS}}"/>
353+
<argument name="height" value="PageBuilderTabsDefinedMinHeight"/>
354+
</actionGroup>
355+
</test>
305356
<test name="TabsAdvancedSettingsApplyInAdminPreviewAndStorefront">
306357
<annotations>
307358
<features value="PageBuilder"/>

0 commit comments

Comments
 (0)