MC-3926: Slide Content Does Not Render After Page Load If Slide Is In Non-Default Tab

Address feedback in code review

Author: danmooney2

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

@@ -458,7 +458,7 @@
             <description value="As a Content Manager I want slider in non-default secondary tab to render on Admin and Storefront so that my content is viewable"/>
             <severity value="CRITICAL"/>
             <useCaseId value="MC-3926"/>
-            <testCaseId value="MC-2564"/>
+            <testCaseId value="MC-4218"/>
             <group value="pagebuilder"/>
             <group value="pagebuilder-tabs-content"/>
             <group value="pagebuilder-slide"/>
@@ -518,19 +518,39 @@
             <argument name="property" value="PageBuilderSlideItemButtonText_Slide1"/>
         </actionGroup>
         <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
+        <!-- Verify slide looks OK in tab on stage before save -->
+        <comment userInput="Verify slide looks OK in tab on stage before save" stepKey="commentVerifySlideBeforeSave"/>
+        <scrollTo selector="{{TabOnStage.tabHeader('1')}}" x="0" y="-100" stepKey="scrollToTab"/>
+        <click selector="{{TabOnStage.tabHeader('1')}}" stepKey="switchToDefaultTab"/>
+        <click selector="{{TabOnStage.tabHeader('2')}}" stepKey="switchToSecondTabOnStage"/>
+        <seeElement selector="{{SlideOnBackend.base('1')}}" stepKey="seeSliderOnOnStage"/>
+        <seeElement selector="{{SlideOnBackend.messageContent('1', PageBuilderSlideItemContent_Slide1.value)}}" stepKey="seeSlide1ContentDisplayedOnStage"/>
+        <seeElement selector="{{SlideOnBackend.buttonText('1', PageBuilderSlideItemButtonText_Slide1.value)}}" stepKey="seeSlide1ButtonTextDisplayedOnStage"/>
+        <seeElement selector="{{SlideOnBackend.backgroundColor('1', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeSlideBackgroundColorOnStage"/>
+        <seeElement selector="{{SlideOnBackend.appearance('1', PageBuilderAppearance_Poster.value)}}" stepKey="verifySlide1HasPosterAppearanceOnStage"/>
+        <!-- Verify slide looks OK in tab on stage after save -->
+        <comment userInput="Verify slide looks OK in tab on stage after save" stepKey="commentVerifySlideAfterSave"/>
         <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
+        <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        <click selector="{{TabOnStage.tabHeader('2')}}" stepKey="switchToSecondTabOnStageAgainAfterSave"/>
+        <seeElement selector="{{SlideOnBackend.base('1')}}" stepKey="seeSliderOnOnStageAgainAfterSave"/>
+        <seeElement selector="{{SlideOnBackend.messageContent('1', PageBuilderSlideItemContent_Slide1.value)}}" stepKey="seeSlide1ContentDisplayedOnStageAgainAfterSave"/>
+        <seeElement selector="{{SlideOnBackend.buttonText('1', PageBuilderSlideItemButtonText_Slide1.value)}}" stepKey="seeSlide1ButtonTextDisplayedOnStageAgainAfterSave"/>
+        <seeElement selector="{{SlideOnBackend.backgroundColor('1', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeSlideBackgroundColorOnStageAgainAfterSave"/>
+        <seeElement selector="{{SlideOnBackend.appearance('1', PageBuilderAppearance_Poster.value)}}" stepKey="verifySlide1HasPosterAppearanceOnStageAgainAfterSave"/>
         <!-- Verify Slider in Secondary Tab on storefront -->
-        <comment userInput="View Tab on storefront" stepKey="viewTabOnStorefront"/>
+        <comment userInput="View Slider in secondary Tab on storefront" stepKey="viewTabOnStorefront"/>
         <actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
             <argument name="contentType" value="PageBuilderTabsContentType"/>
         </actionGroup>
-        <click selector="{{TabOnStorefront.tabHeader('2')}}" stepKey="switchToSecondTab"/>
-        <seeElement selector="{{SlideOnFrontend.base('1')}}" stepKey="seeSliderOnPageBuilderPage"/>
-        <seeElement selector="{{SlideOnFrontend.messageContent('1', PageBuilderSlideItemContent_Slide1.value)}}" stepKey="seeSlide1ContentDisplayed"/>
-        <seeElement selector="{{SlideOnFrontend.buttonText('1', PageBuilderSlideItemButtonText_Slide1.value)}}" stepKey="seeSlide1ButtonTextDisplayed"/>
-        <seeElement selector="{{SlideOnFrontend.linkUrl('1', PageBuilderSlideItemLinkURL_External.value)}}" stepKey="seeSlide1LinkURL"/>
-        <seeElement selector="{{SlideOnFrontend.backgroundColor('1', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeSlideBackgroundColor"/>
-        <seeElement selector="{{SlideOnFrontend.appearance('1', PageBuilderAppearance_Poster.value)}}" stepKey="verifySlide1HasPosterAppearanceOnStorefront"/>
+        <click selector="{{TabOnStorefront.tabHeader('2')}}" stepKey="switchToSecondTabOnStorefront"/>
+        <waitForElementVisible selector="{{SlideOnFrontend.base('1')}}" stepKey="waitForSliderToBeVisible" />
+        <seeElement selector="{{SlideOnFrontend.base('1')}}" stepKey="seeSliderOnFrontend"/>
+        <seeElement selector="{{SlideOnFrontend.messageContent('1', PageBuilderSlideItemContent_Slide1.value)}}" stepKey="seeSlide1ContentDisplayedOnFrontend"/>
+        <seeElement selector="{{SlideOnFrontend.buttonText('1', PageBuilderSlideItemButtonText_Slide1.value)}}" stepKey="seeSlide1ButtonTextDisplayedOnFrontend"/>
+        <seeElement selector="{{SlideOnFrontend.linkUrl('1', PageBuilderSlideItemLinkURL_External.value)}}" stepKey="seeSlide1LinkURLOnFrontend"/>
+        <seeElement selector="{{SlideOnFrontend.backgroundColor('1', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeSlideBackgroundColorOnFrontend"/>
+        <seeElement selector="{{SlideOnFrontend.appearance('1', PageBuilderAppearance_Poster.value)}}" stepKey="verifySlide1HasPosterAppearanceOnStorefrontOnFrontend"/>
     </test>
     <test name="CanAddMapToTab">
         <annotations>

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slider/preview.js

@@ -113,8 +113,10 @@ export default class Preview extends PreviewCollection {
         this.parent.dataStore.subscribe(this.buildSlick);
 
         // Redraw slide after content type gets redrawn
-        events.on("contentType:redrawAfter", function() {
-            $(this.element).slick("setPosition");
+        events.on("contentType:redrawAfter", function(args: ContentTypeAfterRenderEventParamsInterface) {
+            if ($.contains(args.element, this.element)) {
+                $(this.element).slick("setPosition");
+            }
         }.bind(this));
 
         // Set the stage to interacting when a slide is focused

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slider/preview.ts

@@ -30,8 +30,10 @@ define([
         });
 
         // Redraw slide after content type gets redrawn
-        events.on('contentType:redrawAfter', function () {
-            $element.slick('setPosition');
+        events.on('contentType:redrawAfter', function (args) {
+            if ($.contains(args.element, sliderElement)) {
+                $element.slick('setPosition');
+            }
         });
     };
 });