MC-4318: Slide Transparent Background Color Renders Incorrectly & Inconsistently On Stage & Storefront

- Moved expected assertion result to data entity
- Added validation for after saving

Author: Hwashiang Yu

app/code/Magento/PageBuilder/Test/Mftf/Data/BannerData.xml

@@ -68,6 +68,13 @@
         <data key="cmsPageLinkName" unique="suffix">cms-page-link-</data>
         <data key="value">Good Night!</data>
     </entity>
+    <!-- Background Color -->
+    <entity name="PageBuilderBannerBackgroundColor_Empty" type="pagebuilder_banner_background_color_property">
+        <data key="name">Background Color</data>
+        <data key="section">background</data>
+        <data key="fieldName">background_color</data>
+        <data key="value">rgb(250, 250, 250)</data>
+    </entity>
     <!-- Link -->
     <entity name="PageBuilderBannerLinkUrlProperty" type="pagebuilder_banner_linkUrl_property">
         <data key="name">Link</data>

app/code/Magento/PageBuilder/Test/Mftf/Data/SlideData.xml

@@ -40,6 +40,13 @@
         <data key="fieldName">min_height</data>
         <data key="value">300</data>
     </entity>
+    <!-- Background Color -->
+    <entity name="PageBuilderSlideItemBackgroundColor_Empty" type="pagebuilder_slide_item_background_color_property">
+        <data key="name">Background Color</data>
+        <data key="section">background</data>
+        <data key="fieldName">background_color</data>
+        <data key="value">rgb(250, 250, 250)</data>
+    </entity>
     <!-- Link -->
     <entity name="PageBuilderSlideItemLinkURL_Empty" type="pagebuilder_slide_item_link_url_property">
         <data key="name">Link</data>

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

@@ -596,7 +596,7 @@
         </actionGroup>
         <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.noBackgroundColor('1')}}&quot;, document.body).iterateNext()).backgroundColor" stepKey="grabDefaultBackgroundColor"/>
         <assertEquals stepKey="assertDefaultBackgroundColor">
-            <expectedResult type="string">rgb(250, 250, 250)</expectedResult>
+            <expectedResult type="string">{{PageBuilderBannerBackgroundColor_Empty.value}}</expectedResult>
             <actualResult type="variable">grabDefaultBackgroundColor</actualResult>
         </assertEquals>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
@@ -606,6 +606,11 @@
         <actionGroup ref="validateBackgroundAttributesWithNoImageOrColor" stepKey="validateStage2">
             <argument name="section" value="BannerOnBackend"/>
         </actionGroup>
+        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{BannerOnBackend.noBackgroundColor('1')}}&quot;, document.body).iterateNext()).backgroundColor" stepKey="grabDefaultBackgroundColorAfterSave"/>
+        <assertEquals stepKey="assertDefaultBackgroundColorAfterSave">
+            <expectedResult type="string">{{PageBuilderBannerBackgroundColor_Empty.value}}</expectedResult>
+            <actualResult type="variable">grabDefaultBackgroundColorAfterSave</actualResult>
+        </assertEquals>
         <actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage2">
             <argument name="contentType" value="PageBuilderBannerContentType"/>
         </actionGroup>

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

@@ -198,7 +198,7 @@
         <seeElement selector="{{SlideOnBackend.backgroundRepeat('1', PageBuilderBackgroundRepeat_Default.styleValue)}}" stepKey="seeBackgroundRepeatStage"/>
         <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{SlideOnBackend.noBackgroundColor('1')}}&quot;, document.body).iterateNext()).backgroundColor" stepKey="grabDefaultBackgroundColor"/>
         <assertEquals stepKey="assertDefaultBackgroundColor">
-            <expectedResult type="string">rgb(250, 250, 250)</expectedResult>
+            <expectedResult type="string">{{PageBuilderSlideItemBackgroundColor_Empty.value}}</expectedResult>
             <actualResult type="variable">grabDefaultBackgroundColor</actualResult>
         </assertEquals>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
@@ -210,6 +210,11 @@
         <seeElement selector="{{SlideOnBackend.backgroundSize('1', PageBuilderBackgroundSize_Default.value)}}" stepKey="seeBackgroundSizeStage2"/>
         <seeElement selector="{{SlideOnBackend.backgroundPosition('1', PageBuilderBackgroundPosition_Default.styleValue)}}" stepKey="seeBackgroundPositionStage2"/>
         <seeElement selector="{{SlideOnBackend.backgroundRepeat('1', PageBuilderBackgroundRepeat_Default.styleValue)}}" stepKey="seeBackgroundRepeatStage2"/>
+        <executeJS function="return window.getComputedStyle(document.evaluate(&quot;{{SlideOnBackend.noBackgroundColor('1')}}&quot;, document.body).iterateNext()).backgroundColor" stepKey="grabDefaultBackgroundColorAfterSave"/>
+        <assertEquals stepKey="assertDefaultBackgroundColorAfterSave">
+            <expectedResult type="string">{{PageBuilderSlideItemBackgroundColor_Empty.value}}</expectedResult>
+            <actualResult type="variable">grabDefaultBackgroundColorAfterSave</actualResult>
+        </assertEquals>
         <!-- Validate Edit Panel After Save -->
         <comment userInput="Validate Edit Panel After Save" stepKey="commentValidateEditPanel2"/>
         <actionGroup ref="openPageBuilderEditPanelSmallByIndex" stepKey="openEditPanel">