MC-4156: Slider with autoplay cannot be inline edited

- Updated sliderfadecanbeinlineedited test annotations
- Updated test selectors to be more specific
- Updaged test to also do post save validation
- Removed extra jQuery wrapping in component-initializer.ts

Author: Hwashiang Yu

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

@@ -1558,10 +1558,10 @@
         <annotations>
             <features value="PageBuilder"/>
             <stories value="Slider"/>
-            <title value="Slider - Fade can be inline edited"/>
-            <description value="A user should be able to inline edit a fade slide"/>
-            <severity value="CRITICAL"/>
-            <useCaseId value="MC0-4156"/>
+            <title value="Slider - Slide Items Can Be Inline Edited When Slider Has Fade Enabled"/>
+            <description value="A user should be able to inline edit a slide when the slider has fade enabled"/>
+            <severity value="MAJOR"/>
+            <useCaseId value="MC-4156"/>
             <testCaseId value="MC-5058"/>
             <group value="pagebuilder"/>
             <group value="pagebuilder-slide"/>
@@ -1611,8 +1611,8 @@
         <waitForPageLoad stepKey="waitForWysiwyg"/>
         <executeJS function="return document.querySelectorAll('[data-role=slide]')[1].getBoundingClientRect().left" stepKey="slideLeftPosition"/>
         <executeJS function="return document.querySelectorAll('[data-role=slide]')[1].getBoundingClientRect().right" stepKey="slideRightPosition"/>
-        <executeJS function="return document.querySelectorAll('.slider-container')[1].getBoundingClientRect().left" stepKey="sliderLeftPosition"/>
-        <executeJS function="return document.querySelectorAll('.slider-container')[1].getBoundingClientRect().right" stepKey="sliderRightPosition"/>
+        <executeJS function="return document.querySelectorAll('.slider-container.content-type-container')[0].getBoundingClientRect().left" stepKey="sliderLeftPosition"/>
+        <executeJS function="return document.querySelectorAll('.slider-container.content-type-container')[0].getBoundingClientRect().right" stepKey="sliderRightPosition"/>
         <assertLessThan stepKey="assertSlideRightSideIsLessThanSliderRightSide">
             <expectedResult type="variable">slideRightPosition</expectedResult>
             <actualResult type="variable">sliderRightPosition</actualResult>
@@ -1621,5 +1621,19 @@
             <expectedResult type="variable">sliderLeftPosition</expectedResult>
             <actualResult type="variable">slideLeftPosition</actualResult>
         </assertGreaterThan>
+        <!-- Add Content To Slide 2 -->
+        <comment userInput="Add Content To Slide 2" stepKey="commentAddContentToSlide2"/>
+        <actionGroup ref="inlineEditWYSIWYGFromStage" stepKey="inlineEdit">
+            <argument name="contentType" value="PageBuilderSlideContentType"/>
+            <argument name="content" value="{{PageBuilderSlideItemContent_Slide1.value}}"/>
+            <argument name="index" value="2"/>
+        </actionGroup>
+        <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
+        <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        <!-- Validate Stage After Save -->
+        <comment userInput="Validate Stage After Save" stepKey="commentValidateStage"/>
+        <click selector="{{SliderOnStage.slideNavigationDot('1', '2')}}" stepKey="clickSlide2StageAfterSave"/>
+        <waitForPageLoad stepKey="waitForSlideFadeAnimationAfterSave"/>
+        <seeElement selector="{{SlideOnBackend.messageContent('2', PageBuilderSlideItemContent_Slide1.value)}}" stepKey="seeMessageContentStage"/>
     </test>
 </tests>

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/wysiwyg/tinymce4/component-initializer.js

@@ -84,11 +84,11 @@ export default class ComponentInitializer implements WysiwygComponentInitializer
         });
 
         // Disable slider keyboard events and fix problem with overflow hidden issue
-        $($slider.parent()).slick("slickSetOption", "accessibility", false);
-        this.autoplay = $($slider.parent()).slick("slickGetOption", "autoplay") as boolean;
-        this.fade = $($slider.parent()).slick("slickGetOption", "fade") as boolean;
+        $slider.parent().slick("slickSetOption", "accessibility", false);
+        this.autoplay = $slider.parent().slick("slickGetOption", "autoplay") as boolean;
+        this.fade = $slider.parent().slick("slickGetOption", "fade") as boolean;
         if (this.autoplay) {
-            $($slider.parent()).slick("slickPause");
+            $slider.parent().slick("slickPause");
         }
         if (!this.fade) {
             $notActiveSlides.css("display", "none");
@@ -116,9 +116,9 @@ export default class ComponentInitializer implements WysiwygComponentInitializer
         $slider.css("overflow", "hidden");
         sliderContent.style.transform = this.sliderTransform;
         $notActiveSlides.css("display", "block");
-        $($slider.parent()).slick("slickSetOption", "accessibility", true);
+        $slider.parent().slick("slickSetOption", "accessibility", true);
         if (this.autoplay) {
-            $($slider.parent()).slick("slickPlay");
+            $slider.parent().slick("slickPlay");
         }
     }
 }