#421: Setting Empty Border Radius on Tab Item Errors and Breaks Tab Item Content

- Code Review Feedback/Amends

Author: bluemwhitew

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

@@ -26,6 +26,7 @@
         <element name="tabContentType" type="button" selector="(//div[@class='tabs-content']//div[@data-content-type='tab-item'])[{{arg1}}]/div[1]/hr" parameterized="true"/>
         <element name="tabContentText" type="button" selector="(//div[@class='tabs-content']//div[@data-content-type='tab-item'])[{{arg1}}]//div[contains(@data-content-type, 'text')][1]" parameterized="true"/>
         <element name="tabContentAdvancedStylesBorder" type="button" selector="(//div[@class='tabs-content']//div[@data-content-type='tab-item'])[{{arg1}}][contains(@style, 'border-style: {{arg2}}') and contains(@style, 'border-color: {{arg3}}') and contains(@style, 'border-width: {{arg4}}px') and contains(@style, 'border-radius: {{arg5}}px')]" parameterized="true"/>
+        <element name="tabContentAdvancedStylesBorderEmpty" type="button" selector="(//div[@class='tabs-content']//div[@data-content-type='tab-item'])[{{arg1}}][contains(@style, 'border-style: {{arg2}}') and contains(@style, 'border-color: {{arg3}}')][not(contains(@style, 'border-width:'))][not(contains(@style, 'border-radius:'))]" parameterized="true"/>
         <element name="tabContentAdvancedStyles" type="button" selector="(//div[@class='tabs-content']//div[@data-content-type='tab-item'])[{{arg1}}][contains(@style, 'text-align: {{arg2}}') and contains(@style, 'margin: {{arg3}}px') and contains(@style, 'padding: {{arg4}}px')]" parameterized="true"/>
         <element name="tabContentAdvancedClass" type="button" selector="(//div[@class='tabs-content']//div[@data-content-type='tab-item'])[{{arg1}}][contains(@class, '{{arg2}}')]" parameterized="true"/>
         <!-- Background Configuration -->

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTabItemConfigurationTest/TabItemUpdateAdvancedConfigurationValuesTest.xml

@@ -40,7 +40,7 @@
         </actionGroup>
         <waitForPageLoad stepKey="waitForOptionsPanel" time="30"/>
         <!-- Open Tabs Panel -->
-        <comment userInput="Add and Customize Tab 1" stepKey="AC1"/>
+        <comment userInput="Add and customize first tab" stepKey="AC1"/>
         <actionGroup ref="openPageBuilderEditPanelSmallByIndex" stepKey="openEditPanel">
             <argument name="section" value="TabOnStage"/>
         </actionGroup>
@@ -71,7 +71,7 @@
             <argument name="property" value="PageBuilderAdvancedMarginsAndPaddingProperty"/>
         </actionGroup>
         <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
-        <comment userInput="Add and Customize Tab 2" stepKey="AC2"/>
+        <comment userInput="Add and customize second tab" stepKey="AC2"/>
         <waitForElementVisible selector="{{TabOnStage.tabHeader('1')}}" stepKey="seeTabHeader1"/>
         <actionGroup ref="addChildContentTypeFromOptionMenu" stepKey="addChildContentType">
             <argument name="contentType" value="PageBuilderTabsContentType"/>
@@ -80,12 +80,30 @@
             <argument name="section" value="TabOnStage"/>
             <argument name="targetIndex" value="2"/>
         </actionGroup>
+        <actionGroup ref="chooseVisualSelectOption" stepKey="selectAlignmentRight">
+            <argument name="property" value="PageBuilderAdvancedAlignmentPropertyRight"/>
+        </actionGroup>
+        <actionGroup ref="selectSlideOutPanelFieldGeneral" stepKey="enterBorder2">
+            <argument name="property" value="PageBuilderAdvancedBorderPropertyDotted"/>
+        </actionGroup>
+        <actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterBorderColor2">
+            <argument name="property" value="PageBuilderAdvancedBorderColorProperty_FF0000"/>
+        </actionGroup>
         <actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterBorderWidth2">
             <argument name="property" value="PageBuilderAdvancedBorderWidthProperty_Empty"/>
         </actionGroup>
         <actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterBorderRadius2">
             <argument name="property" value="PageBuilderAdvancedBorderRadiusProperty_Empty"/>
         </actionGroup>
+        <actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterCSSClasses2">
+            <argument name="property" value="PageBuilderAdvancedCssClassesPropertyOneClass"/>
+        </actionGroup>
+        <actionGroup ref="fillSlideOutPanelFieldMargins" stepKey="enterMargins">
+            <argument name="property" value="PageBuilderMarginsPropertyUnique"/>
+        </actionGroup>
+        <actionGroup ref="fillSlideOutPanelFieldPadding" stepKey="enterPadding">
+            <argument name="property" value="PageBuilderPaddingPropertyUnique"/>
+        </actionGroup>
         <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings2"/>
         <dontSeeJsError stepKey="doNotSeeJSErrorInConsole"/>
         <!-- Add and Customize Tab 3 -->
@@ -97,7 +115,7 @@
             <argument name="section" value="TabOnStage"/>
             <argument name="targetIndex" value="3"/>
         </actionGroup>
-        <actionGroup ref="chooseVisualSelectOption" stepKey="selectAlignmentRight">
+        <actionGroup ref="chooseVisualSelectOption" stepKey="selectAlignmentRight2">
             <argument name="property" value="PageBuilderAdvancedAlignmentPropertyRight"/>
         </actionGroup>
         <actionGroup ref="selectSlideOutPanelFieldGeneral" stepKey="enterBorder3">
@@ -141,25 +159,27 @@
             <argument name="from" value="2"/>
             <argument name="to" value="3"/>
         </actionGroup>
-        <comment userInput="Verify Tab 3 on Stage" stepKey="verifyTab3OnStage"/>
-        <waitForPageLoad stepKey="waitForPageLoadAdmin2" time="30"/>
+        <!-- Verify Tab 3 on Stage -->
         <waitForElementVisible selector="{{TabOnStage.tab3ContentAdvancedStyles}}" stepKey="seeTab3ContentAdvancedStylesInAdminPreview"/>
         <!-- Verify in Storefront -->
         <amOnPage url="{{PageBuilderTabsContentType.name}}{{PageBuilderPageTitle.pageName}}" stepKey="amOnPageBuilderPage"/>
         <waitForPageLoad stepKey="waitForPageLoadStoreFront" time="30"/>
-        <comment userInput="Verify Tab 1 on Storefront" stepKey="AC5"/>
+        <comment userInput="Verify tab 1 on storefront" stepKey="AC5"/>
         <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedStyles('1', PageBuilderAdvancedAlignmentPropertyCenter.value, PageBuilderAdvancedMarginsAndPaddingProperty.marginLeft, PageBuilderAdvancedMarginsAndPaddingProperty.paddingLeft)}}" stepKey="seeTabContentAdvancedStylesInStorefront1"/>
         <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedStylesBorder('1', PageBuilderAdvancedBorderPropertySolid.value, PageBuilderAdvancedBorderColorProperty.rgb, PageBuilderAdvancedBorderWidthProperty10.value, PageBuilderAdvancedBorderRadiusProperty12.value)}}" stepKey="seeTabContentAdvancedStylesBorderInStorefront1"/>
         <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedClass('1', PageBuilderAdvancedCssClassesPropertyThreeClasses.value)}}" stepKey="seeTabContentClassInStorefront1"/>
         <click selector="{{TabOnStorefront.tabHeader('2')}}" stepKey="switchToTab"/>
         <waitForPageLoad stepKey="waitForTabChangeAnimationStorefront" time="30"/>
         <scrollToTopOfPage stepKey="scrollToTopOfPage"/>
-        <waitForElementVisible selector="{{TabOnStorefront.container('2')}}" stepKey="seeNewTabContent2"/>
-        <!-- Verify Tab 2 on Storefront -->
+        <waitForElementVisible selector="{{TabOnStorefront.container('2')}}" stepKey="seeNewTabContent"/>
+        <comment userInput="Verify tab 2 on storefront" stepKey="AC6"/>
+        <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedStyles('2', PageBuilderAdvancedAlignmentPropertyRight.value, PageBuilderMarginsPropertyUnique.value, PageBuilderPaddingPropertyUnique.value)}}" stepKey="seeTabHeaderItemAdvancedStylesInStorefront2"/>
+        <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedStylesBorderEmpty('2', PageBuilderAdvancedBorderPropertyDotted.value, PageBuilderAdvancedBorderColorProperty_FF0000.rgb)}}" stepKey="seeTabContentAdvancedStylesBorderInStorefront2"/>
+        <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedClass('2', PageBuilderAdvancedCssClassesPropertyOneClass.value)}}" stepKey="seeTabContentClassInStorefront2"/>
         <click selector="{{TabOnStorefront.tabHeader('3')}}" stepKey="switchToTab2"/>
         <waitForPageLoad stepKey="waitForTabChangeAnimationStorefront2" time="30"/>
         <scrollToTopOfPage stepKey="scrollToTopOfPage2"/>
-        <waitForElementVisible selector="{{TabOnStorefront.container('3')}}" stepKey="seeNewTabContent3"/>
+        <waitForElementVisible selector="{{TabOnStorefront.container('3')}}" stepKey="seeNewTabContent2"/>
         <!-- Verify Tab 3 on Storefront -->
         <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedStyles('3', PageBuilderAdvancedAlignmentPropertyRight.value, PageBuilderMarginsPropertyUnique.value, PageBuilderPaddingPropertyUnique.value)}}" stepKey="seeTabHeaderItemAdvancedStylesInStorefront3"/>
         <waitForElementVisible selector="{{TabOnStorefront.tabContentAdvancedStylesBorder('3', PageBuilderAdvancedBorderPropertyDotted.value, PageBuilderAdvancedBorderColorProperty_FF0000.rgb, PageBuilderAdvancedBorderWidthProperty500.value, PageBuilderAdvancedBorderRadiusProperty500.value)}}" stepKey="seeTabContentAdvancedStylesBorderInStorefront3"/>