Merge pull request #524 from magento/425_slider-infinite-loop-fix

#425: Infinite Loop Disabled on Slider Does Not Work Correctly

Author: omiroshnichenko

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ContentTypeSliderActionGroup/NextSlideActionGroup.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="nextSlide">
+        <annotations>
+            <description>Clicks the "Next" arrow on a slider instance (irrespective of the arrow's state).</description>
+        </annotations>
+        <arguments>
+            <argument name="sliderSection" defaultValue="SliderOnStage"/>
+            <argument name="slideSection" defaultValue="SlideOnBackend"/>
+            <argument name="sliderIndex" defaultValue="1" type="string"/>
+            <argument name="slideIndex" defaultValue="1" type="string"/>
+        </arguments>
+        <waitForElementVisible selector="{{sliderSection.nextSlideArrow(sliderIndex)}}" stepKey="waitForNextSlideArrow"/>
+        <click selector="{{sliderSection.nextSlideArrow(sliderIndex)}}" stepKey="clickNextSlideArrow"/>
+        <waitForPageLoad stepKey="waitForPageLoad"/>
+        <waitForElementVisible selector="{{slideSection.base(slideIndex)}}" stepKey="waitForSlide"/>
+    </actionGroup>
+</actionGroups>

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ContentTypeSliderActionGroup/ValidateSliderAttributesActionGroup.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="validateSliderAttributesActionGroup">
+        <annotations>
+            <description>Validates a slider instance based on its HTML attributes.</description>
+        </annotations>
+        <arguments>
+            <argument name="sliderSection" defaultValue="SliderOnStage"/>
+            <argument name="sliderIndex" defaultValue="1" type="string"/>
+            <argument name="sliderAutoplay" defaultValue="{{PageBuilderSliderAutoPlay_Disabled.value}}" type="string"/>
+            <argument name="sliderAutoplaySpeed" defaultValue="{{PageBuilderSliderAutoPlaySpeed_Default.value}}" type="string"/>
+            <argument name="sliderFade" defaultValue="{{PageBuilderSliderFade_Disabled.value}}" type="string"/>
+            <argument name="sliderInfiniteLoop" defaultValue="{{PageBuilderSliderInfiniteLoop_Disabled.value}}" type="string"/>
+            <argument name="sliderShowArrows" defaultValue="{{PageBuilderSliderShowArrows_Disabled.value}}" type="string"/>
+            <argument name="sliderShowDots" defaultValue="{{PageBuilderSliderShowDots_Enabled.value}}" type="string"/>
+        </arguments>
+        <waitForElementVisible selector="{{sliderSection.autoPlay(sliderIndex, sliderAutoplay)}}" stepKey="seeAutoplay"/>
+        <waitForElementVisible selector="{{sliderSection.autoPlaySpeed(sliderIndex, sliderAutoplaySpeed)}}" stepKey="seeAutoplaySpeed"/>
+        <waitForElementVisible selector="{{sliderSection.fade(sliderIndex, sliderFade)}}" stepKey="seeFade"/>
+        <waitForElementVisible selector="{{sliderSection.infiniteLoop(sliderIndex, sliderInfiniteLoop)}}" stepKey="seeInfiniteLoop"/>
+        <waitForElementVisible selector="{{sliderSection.showArrows(sliderIndex, sliderShowArrows)}}" stepKey="seeShowArrows"/>
+        <waitForElementVisible selector="{{sliderSection.showDots(sliderIndex, sliderShowDots)}}" stepKey="seeShowDots"/>
+    </actionGroup>
+</actionGroups>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection/SliderOnFrontendSection.xml

@@ -14,7 +14,11 @@
         <element name="notHidden" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}][not(contains(@style,'display: none'))]" parameterized="true"/>
         <element name="slideNavigationDot" type="button" selector="((//div[@data-content-type='slider'])[{{sliderIndex}}]//ul[@class='slick-dots']//button)[{{navigationDotIndex}}]" parameterized="true"/>
         <element name="previousSlideArrow" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}]//button[contains(@class,'slick-arrow') and contains(@class,'slick-prev')]" parameterized="true"/>
+        <element name="previousSlideArrowDisabled" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}]//button[contains(@class,'slick-arrow') and contains(@class,'slick-prev') and contains(@class,'slick-disabled')]" parameterized="true"/>
+        <element name="previousSlideArrowEnabled" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}]//button[contains(@class,'slick-arrow') and contains(@class,'slick-prev') and not(contains(@class,'slick-disabled'))]" parameterized="true"/>
         <element name="nextSlideArrow" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}]//button[contains(@class,'slick-arrow') and contains(@class,'slick-next')]" parameterized="true"/>
+        <element name="nextSlideArrowDisabled" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}]//button[contains(@class,'slick-arrow') and contains(@class,'slick-next') and contains(@class,'slick-disabled')]" parameterized="true"/>
+        <element name="nextSlideArrowEnabled" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}]//button[contains(@class,'slick-arrow') and contains(@class,'slick-next') and not(contains(@class,'slick-disabled'))]" parameterized="true"/>
         <!-- Settings Configuration -->
         <element name="autoPlay" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}][@data-autoplay='{{autoplay}}']" parameterized="true"/>
         <element name="autoPlaySpeed" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}][@data-autoplay-speed='{{autoplaySpeed}}']" parameterized="true"/>

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

@@ -19,7 +19,8 @@
         <element name="tabHeaderItemActive" type="button" selector="//ul[contains(@class, 'tabs-navigation')]/li[{{arg1}}][contains(@class, 'ui-state-active')]" parameterized="true"/>
         <element name="tabHeaderItemAdvancedStyles" type="button" selector="(//div[contains(@class,'pagebuilder-tabs')]//descendant::*[contains(@class,'tabs-navigation')]/li[contains(@style, 'border-style: solid; border-radius: 12px; border-color: rgb(0, 0, 0); border-width: 10px; margin-bottom: -10px; margin-left: -10px;')])"/>
         <element name="tab1ContentAdvancedStyles" type="button" selector="(//div[contains(@class,'pagebuilder-tabs')]//div[contains(@class,'ui-tabs-panel')])[1]//div[contains(@class, 'pagebuilder-tab-item') and contains(@style, 'text-align: center;') and contains(@style, 'border-style: solid;') and contains(@style, 'border-color: rgb(0, 0, 0);') and contains(@style, 'border-width: 10px;') and contains(@style, 'border-radius: 12px;') and contains(@style, 'margin: 5px;') and contains(@style, 'padding: 5px;')]"/>
-        <element name="tab2ContentAdvancedStyles" type="button" selector="(//div[contains(@class,'pagebuilder-tabs')]//div[contains(@class,'ui-tabs-panel')])[2]//div[contains(@class, 'pagebuilder-tab-item') and contains(@style, 'text-align: right;') and contains(@style, 'border-style: dotted;') and contains(@style, 'border-color: rgb(255, 0, 0);') and contains(@style, 'border-width: 500px;') and contains(@style, 'border-radius: 500px;') and contains(@style, 'margin: 1px 2px 3px 4px;') and contains(@style, 'padding: 1px 2px 3px 4px;')]"/>
+        <element name="tab2ContentAdvancedStyles" type="button" selector="(//div[contains(@class,'pagebuilder-tabs')]//div[contains(@class,'ui-tabs-panel')])[2]//div[contains(@class, 'pagebuilder-tab-item')][not(contains(@style, 'border-width:'))][not(contains(@style, 'border-radius:'))]"/>
+        <element name="tab3ContentAdvancedStyles" type="button" selector="(//div[contains(@class,'pagebuilder-tabs')]//div[contains(@class,'ui-tabs-panel')])[3]//div[contains(@class, 'pagebuilder-tab-item') and contains(@style, 'text-align: right;') and contains(@style, 'border-style: dotted;') and contains(@style, 'border-color: rgb(255, 0, 0);') and contains(@style, 'border-width: 500px;') and contains(@style, 'border-radius: 500px;') and contains(@style, 'margin: 1px 2px 3px 4px;') and contains(@style, 'padding: 1px 2px 3px 4px;')]"/>
         <element name="empty" type="button" selector="(//div[contains(@class, 'pagebuilder-tabs')]//div[contains(@class, 'pagebuilder-tab-item') and contains(@class, 'empty-container')])"/>
         <element name="openOptionsMenu" type="button" selector="(//ul[contains(@class,'tabs-navigation')]//a[contains(@class,'tab-title')])[{{arg1}}]" parameterized="true"/>
         <element name="optionsMenu" type="button" selector="(//ul[contains(@class,'tabs-navigation')]//div[contains(@class,'pagebuilder-options-wrapper')])[{{arg1}}]" parameterized="true"/>

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/AdminCMSBlockPageBuilderTest/PageBuilderCmsBlockAddAndEditRowColumnSlideTest.xml

@@ -68,7 +68,7 @@
         <seeElement selector="{{RowOnStorefront.backgroundColor('3', PageBuilderBackgroundColor_Hex_Grey.rgb)}}" stepKey="seeBackgroundColorRowCMSPageStage" after="see3RowsCMSPageStage"/>
         <seeNumberOfElements selector="{{ColumnOnFrontend.allColumns}}" userInput="2" stepKey="see2ColumnsCMSPageStage" after="seeBackgroundColorRowCMSPageStage"/>
         <seeElement selector="{{ColumnOnFrontend.backgroundColor('2', PageBuilderBackgroundColor_Hex_White.rgb)}}" stepKey="seeBackgroundColorColumnCMSPageStage" after="see2ColumnsCMSPageStage"/>
-        <seeElement selector="{{SlideOnFrontend.backgroundColor('2', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeBackgroundColorSlide1CMSPageStage" after="seeBackgroundColorColumnCMSPageStage"/>
+        <seeElement selector="{{SlideOnFrontend.backgroundColor('1', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeBackgroundColorSlide1CMSPageStage" after="seeBackgroundColorColumnCMSPageStage"/>
         <actionGroup ref="SaveAndContinueEditCmsPageActionGroup" stepKey="saveAndContinueEditCmsPage" after="seeBackgroundColorSlide1CMSPageStage"/>
         <!-- Validate CMS Page Storefront -->
         <actionGroup ref="NavigateToStorefrontForCreatedPageActionGroup" stepKey="navigateToProductStorefront">

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminCatalogProductPageBuilderTest/PageBuilderCatalogProductAddAndEditRowColumnSlideTest.xml

@@ -150,12 +150,12 @@
         <seeElement selector="{{RowOnStorefront.backgroundColor('2', PageBuilderBackgroundColor_Hex_Grey.rgb)}}" stepKey="seeBackgroundColorRowStorefront"/>
         <seeNumberOfElements selector="{{ColumnOnFrontend.allColumns}}" userInput="2" stepKey="see2ColumnsStorefront"/>
         <seeElement selector="{{ColumnOnFrontend.backgroundColor('2', PageBuilderBackgroundColor_Hex_White.rgb)}}" stepKey="seeBackgroundColorColumnStorefront"/>
-        <seeElement selector="{{SlideOnFrontend.backgroundColor('2', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeBackgroundColorSlide1Storefront"/>
+        <seeElement selector="{{SlideOnFrontend.backgroundColor('1', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeBackgroundColorSlide1Storefront"/>
         <actionGroup ref="switchSlide" stepKey="switchSlideStorefront">
             <argument name="sliderSection" value="SliderOnFrontend"/>
             <argument name="slideSection" value="SlideOnFrontend"/>
             <argument name="slideIndex" value="2"/>
         </actionGroup>
-        <seeElement selector="{{SlideOnFrontend.backgroundColor('3', PageBuilderBackgroundColor_RGB_Blue.rgb)}}" stepKey="seeBackgroundColorSlide2Storefront"/>
+        <seeElement selector="{{SlideOnFrontend.backgroundColor('2', PageBuilderBackgroundColor_RGB_Blue.rgb)}}" stepKey="seeBackgroundColorSlide2Storefront"/>
     </test>
 </tests>

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

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
+    <test name="SliderValidateInfiniteLoopDisabled" extends="SliderValidateInfiniteLoopEnabled">
+        <annotations>
+            <features value="PageBuilder"/>
+            <stories value="Slider"/>
+            <title value="Slider - Validate Infinite Looping (Disabled)"/>
+            <description value="A user should not be able to navigate before the first slide, or after the last slide when Infinite Loop is disabled."/>
+            <severity value="BLOCKER"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-slide"/>
+            <group value="pagebuilder-sliderCommon"/>
+        </annotations>
+        <!-- Open Slider Settings -->
+        <actionGroup ref="conditionalClickSlideOutPanelFieldGeneral" stepKey="enterInfiniteLoop">
+            <argument name="property" value="PageBuilderSliderInfiniteLoop_Disabled"/>
+        </actionGroup>
+        <!-- Validate Stage: Slider Settings -->
+        <actionGroup ref="validateSliderAttributesActionGroup" stepKey="seeSliderStage">
+            <argument name="sliderFade" value="{{PageBuilderSliderFade_Enabled.value}}"/>
+            <argument name="sliderShowArrows" value="{{PageBuilderSliderShowArrows_Enabled.value}}"/>
+        </actionGroup>
+        <!-- Validate Storefront: Slider Settings -->
+        <actionGroup ref="validateSliderAttributesActionGroup" stepKey="seeSliderStorefront">
+            <argument name="sliderFade" value="{{PageBuilderSliderFade_Enabled.value}}"/>
+            <argument name="sliderShowArrows" value="{{PageBuilderSliderShowArrows_Enabled.value}}"/>
+        </actionGroup>
+        <!-- Validate Storefront: Slide 1 -->
+        <waitForElementVisible selector="{{SliderOnFrontend.previousSlideArrowDisabled('1')}}" stepKey="seePreviousSlideArrow"/>
+        <!-- Validate Storefront: Slide 2 -->
+        <waitForElementVisible selector="{{SliderOnFrontend.nextSlideArrowDisabled('1')}}" stepKey="seeNextSlideArrow2"/>
+    </test>
+</tests>