Skip to content

Commit 656fab9

Browse files
Merge branch '425_slider-infinite-loop-fix' of github.com:magento/magento2-page-builder into 421_empty-border-radius-fix
2 parents 39812b9 + 1330c31 commit 656fab9

File tree

9 files changed

+228
-5
lines changed

9 files changed

+228
-5
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
9+
<actionGroup name="nextSlide">
10+
<annotations>
11+
<description>Clicks the "Next" arrow on a slider instance (irrespective of the arrow's state).</description>
12+
</annotations>
13+
<arguments>
14+
<argument name="sliderSection" defaultValue="SliderOnStage"/>
15+
<argument name="slideSection" defaultValue="SlideOnBackend"/>
16+
<argument name="sliderIndex" defaultValue="1" type="string"/>
17+
<argument name="slideIndex" defaultValue="1" type="string"/>
18+
</arguments>
19+
<waitForElementVisible selector="{{sliderSection.nextSlideArrow(sliderIndex)}}" stepKey="waitForNextSlideArrow"/>
20+
<click selector="{{sliderSection.nextSlideArrow(sliderIndex)}}" stepKey="clickNextSlideArrow"/>
21+
<waitForPageLoad stepKey="waitForPageLoad"/>
22+
<waitForElementVisible selector="{{slideSection.base(slideIndex)}}" stepKey="waitForSlide"/>
23+
</actionGroup>
24+
</actionGroups>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
9+
<actionGroup name="validateSliderAttributesActionGroup">
10+
<annotations>
11+
<description>Validates a slider instance based on its HTML attributes.</description>
12+
</annotations>
13+
<arguments>
14+
<argument name="sliderSection" defaultValue="SliderOnStage"/>
15+
<argument name="sliderIndex" defaultValue="1" type="string"/>
16+
<argument name="sliderAutoplay" defaultValue="{{PageBuilderSliderAutoPlay_Disabled.value}}" type="string"/>
17+
<argument name="sliderAutoplaySpeed" defaultValue="{{PageBuilderSliderAutoPlaySpeed_Default.value}}" type="string"/>
18+
<argument name="sliderFade" defaultValue="{{PageBuilderSliderFade_Disabled.value}}" type="string"/>
19+
<argument name="sliderInfiniteLoop" defaultValue="{{PageBuilderSliderInfiniteLoop_Disabled.value}}" type="string"/>
20+
<argument name="sliderShowArrows" defaultValue="{{PageBuilderSliderShowArrows_Disabled.value}}" type="string"/>
21+
<argument name="sliderShowDots" defaultValue="{{PageBuilderSliderShowDots_Enabled.value}}" type="string"/>
22+
</arguments>
23+
<waitForElementVisible selector="{{sliderSection.autoPlay(sliderIndex, sliderAutoplay)}}" stepKey="seeAutoplay"/>
24+
<waitForElementVisible selector="{{sliderSection.autoPlaySpeed(sliderIndex, sliderAutoplaySpeed)}}" stepKey="seeAutoplaySpeed"/>
25+
<waitForElementVisible selector="{{sliderSection.fade(sliderIndex, sliderFade)}}" stepKey="seeFade"/>
26+
<waitForElementVisible selector="{{sliderSection.infiniteLoop(sliderIndex, sliderInfiniteLoop)}}" stepKey="seeInfiniteLoop"/>
27+
<waitForElementVisible selector="{{sliderSection.showArrows(sliderIndex, sliderShowArrows)}}" stepKey="seeShowArrows"/>
28+
<waitForElementVisible selector="{{sliderSection.showDots(sliderIndex, sliderShowDots)}}" stepKey="seeShowDots"/>
29+
</actionGroup>
30+
</actionGroups>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@
1414
<element name="notHidden" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}][not(contains(@style,'display: none'))]" parameterized="true"/>
1515
<element name="slideNavigationDot" type="button" selector="((//div[@data-content-type='slider'])[{{sliderIndex}}]//ul[@class='slick-dots']//button)[{{navigationDotIndex}}]" parameterized="true"/>
1616
<element name="previousSlideArrow" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}]//button[contains(@class,'slick-arrow') and contains(@class,'slick-prev')]" parameterized="true"/>
17+
<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"/>
18+
<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"/>
1719
<element name="nextSlideArrow" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}]//button[contains(@class,'slick-arrow') and contains(@class,'slick-next')]" parameterized="true"/>
20+
<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"/>
21+
<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"/>
1822
<!-- Settings Configuration -->
1923
<element name="autoPlay" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}][@data-autoplay='{{autoplay}}']" parameterized="true"/>
2024
<element name="autoPlaySpeed" type="button" selector="(//div[@data-content-type='slider'])[{{sliderIndex}}][@data-autoplay-speed='{{autoplaySpeed}}']" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminCMSBlockPageBuilderTest/PageBuilderCmsBlockAddAndEditRowColumnSlideTest.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
<seeElement selector="{{RowOnStorefront.backgroundColor('3', PageBuilderBackgroundColor_Hex_Grey.rgb)}}" stepKey="seeBackgroundColorRowCMSPageStage" after="see3RowsCMSPageStage"/>
6969
<seeNumberOfElements selector="{{ColumnOnFrontend.allColumns}}" userInput="2" stepKey="see2ColumnsCMSPageStage" after="seeBackgroundColorRowCMSPageStage"/>
7070
<seeElement selector="{{ColumnOnFrontend.backgroundColor('2', PageBuilderBackgroundColor_Hex_White.rgb)}}" stepKey="seeBackgroundColorColumnCMSPageStage" after="see2ColumnsCMSPageStage"/>
71-
<seeElement selector="{{SlideOnFrontend.backgroundColor('2', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeBackgroundColorSlide1CMSPageStage" after="seeBackgroundColorColumnCMSPageStage"/>
71+
<seeElement selector="{{SlideOnFrontend.backgroundColor('1', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeBackgroundColorSlide1CMSPageStage" after="seeBackgroundColorColumnCMSPageStage"/>
7272
<actionGroup ref="SaveAndContinueEditCmsPageActionGroup" stepKey="saveAndContinueEditCmsPage" after="seeBackgroundColorSlide1CMSPageStage"/>
7373
<!-- Validate CMS Page Storefront -->
7474
<actionGroup ref="NavigateToStorefrontForCreatedPageActionGroup" stepKey="navigateToProductStorefront">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,12 +150,12 @@
150150
<seeElement selector="{{RowOnStorefront.backgroundColor('2', PageBuilderBackgroundColor_Hex_Grey.rgb)}}" stepKey="seeBackgroundColorRowStorefront"/>
151151
<seeNumberOfElements selector="{{ColumnOnFrontend.allColumns}}" userInput="2" stepKey="see2ColumnsStorefront"/>
152152
<seeElement selector="{{ColumnOnFrontend.backgroundColor('2', PageBuilderBackgroundColor_Hex_White.rgb)}}" stepKey="seeBackgroundColorColumnStorefront"/>
153-
<seeElement selector="{{SlideOnFrontend.backgroundColor('2', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeBackgroundColorSlide1Storefront"/>
153+
<seeElement selector="{{SlideOnFrontend.backgroundColor('1', PageBuilderBackgroundColor_Plaintext_Green.rgb)}}" stepKey="seeBackgroundColorSlide1Storefront"/>
154154
<actionGroup ref="switchSlide" stepKey="switchSlideStorefront">
155155
<argument name="sliderSection" value="SliderOnFrontend"/>
156156
<argument name="slideSection" value="SlideOnFrontend"/>
157157
<argument name="slideIndex" value="2"/>
158158
</actionGroup>
159-
<seeElement selector="{{SlideOnFrontend.backgroundColor('3', PageBuilderBackgroundColor_RGB_Blue.rgb)}}" stepKey="seeBackgroundColorSlide2Storefront"/>
159+
<seeElement selector="{{SlideOnFrontend.backgroundColor('2', PageBuilderBackgroundColor_RGB_Blue.rgb)}}" stepKey="seeBackgroundColorSlide2Storefront"/>
160160
</test>
161161
</tests>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
9+
<test name="SliderValidateInfiniteLoopDisabled" extends="SliderValidateInfiniteLoopEnabled">
10+
<annotations>
11+
<features value="PageBuilder"/>
12+
<stories value="Slider"/>
13+
<title value="Slider - Validate Infinite Looping (Disabled)"/>
14+
<description value="A user should not be able to navigate before the first slide, or after the last slide when Infinite Loop is disabled."/>
15+
<severity value="BLOCKER"/>
16+
<group value="pagebuilder"/>
17+
<group value="pagebuilder-slide"/>
18+
<group value="pagebuilder-sliderCommon"/>
19+
</annotations>
20+
<!-- Open Slider Settings -->
21+
<actionGroup ref="conditionalClickSlideOutPanelFieldGeneral" stepKey="enterInfiniteLoop">
22+
<argument name="property" value="PageBuilderSliderInfiniteLoop_Disabled"/>
23+
</actionGroup>
24+
<!-- Validate Stage: Slider Settings -->
25+
<actionGroup ref="validateSliderAttributesActionGroup" stepKey="seeSliderStage">
26+
<argument name="sliderFade" value="{{PageBuilderSliderFade_Enabled.value}}"/>
27+
<argument name="sliderShowArrows" value="{{PageBuilderSliderShowArrows_Enabled.value}}"/>
28+
</actionGroup>
29+
<!-- Validate Storefront: Slider Settings -->
30+
<actionGroup ref="validateSliderAttributesActionGroup" stepKey="seeSliderStorefront">
31+
<argument name="sliderFade" value="{{PageBuilderSliderFade_Enabled.value}}"/>
32+
<argument name="sliderShowArrows" value="{{PageBuilderSliderShowArrows_Enabled.value}}"/>
33+
</actionGroup>
34+
<!-- Validate Storefront: Slide 1 -->
35+
<waitForElementVisible selector="{{SliderOnFrontend.previousSlideArrowDisabled('1')}}" stepKey="seePreviousSlideArrow"/>
36+
<!-- Validate Storefront: Slide 2 -->
37+
<waitForElementVisible selector="{{SliderOnFrontend.nextSlideArrowDisabled('1')}}" stepKey="seeNextSlideArrow2"/>
38+
</test>
39+
</tests>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
9+
<test name="SliderValidateInfiniteLoopEnabled">
10+
<annotations>
11+
<features value="PageBuilder"/>
12+
<stories value="Slider"/>
13+
<title value="Slider - Validate Infinite Looping (Enabled)"/>
14+
<description value="A user should be able to navigate before the first slide, and after the last slide when Infinite Loop is enabled."/>
15+
<severity value="BLOCKER"/>
16+
<group value="pagebuilder"/>
17+
<group value="pagebuilder-slide"/>
18+
<group value="pagebuilder-sliderCommon"/>
19+
</annotations>
20+
<before>
21+
<createData entity="_emptyCmsPage" stepKey="createCMSPage"/>
22+
<actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>
23+
<actionGroup ref="NavigateToCreatedCMSPageActionGroup" stepKey="navigateToCreatedCMSPage">
24+
<argument name="CMSPage" value="$$createCMSPage$$"/>
25+
</actionGroup>
26+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
27+
</before>
28+
<after>
29+
<deleteData createDataKey="createCMSPage" stepKey="deleteCMSPage"/>
30+
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
31+
</after>
32+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection">
33+
<argument name="contentType" value="PageBuilderSliderContentType"/>
34+
</actionGroup>
35+
<actionGroup ref="dragContentTypeToStage" stepKey="dragSliderOntoStage">
36+
<argument name="contentType" value="PageBuilderSliderContentType"/>
37+
</actionGroup>
38+
<actionGroup ref="openPageBuilderEditPanelSmallByIndex" stepKey="openEditPanelAfterDrop">
39+
<argument name="section" value="SlideOnBackend"/>
40+
</actionGroup>
41+
<!-- Edit First Slide -->
42+
<actionGroup ref="addTextToTinyMCE" stepKey="addTextToTinyMCE">
43+
<argument name="property" value="PageBuilderSlideItemContent_Slide1"/>
44+
<argument name="section" value="SlideOnConfigurationPanel"/>
45+
</actionGroup>
46+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanel1Settings"/>
47+
<!-- Open Slider Settings -->
48+
<click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unFocusSlide"/>
49+
<actionGroup ref="openPageBuilderEditPanelByIndex" stepKey="openSliderEditPanel">
50+
<argument name="contentType" value="PageBuilderSliderContentType"/>
51+
<argument name="contentTypeIndex" value="1"/>
52+
</actionGroup>
53+
<actionGroup ref="conditionalClickSlideOutPanelFieldGeneral" stepKey="enterFade">
54+
<argument name="property" value="PageBuilderSliderFade_Enabled"/>
55+
</actionGroup>
56+
<actionGroup ref="conditionalClickSlideOutPanelFieldGeneral" stepKey="enterInfiniteLoop">
57+
<argument name="property" value="PageBuilderSliderInfiniteLoop_Enabled"/>
58+
</actionGroup>
59+
<actionGroup ref="conditionalClickSlideOutPanelFieldGeneral" stepKey="enterShowArrow">
60+
<argument name="property" value="PageBuilderSliderShowArrows_Enabled"/>
61+
</actionGroup>
62+
<actionGroup ref="conditionalClickSlideOutPanelFieldGeneral" stepKey="enterShowDots">
63+
<argument name="property" value="PageBuilderSliderShowDots_Enabled"/>
64+
</actionGroup>
65+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings1"/>
66+
<!-- Add Second Slide -->
67+
<actionGroup ref="addChildContentTypeFromOptionMenu" stepKey="addChildContentType">
68+
<argument name="contentType" value="PageBuilderSliderContentType"/>
69+
</actionGroup>
70+
<actionGroup ref="openPageBuilderEditPanelSmallByIndex" stepKey="openEditPanelAfterAddSlide">
71+
<argument name="section" value="SlideOnBackend"/>
72+
<argument name="targetIndex" value="2"/>
73+
</actionGroup>
74+
<actionGroup ref="addTextToTinyMCE" stepKey="addTextToTinyMCE2">
75+
<argument name="property" value="PageBuilderSlideItemContent_Slide2"/>
76+
<argument name="section" value="SlideOnConfigurationPanel"/>
77+
</actionGroup>
78+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanel2Settings"/>
79+
<actionGroup ref="SaveAndContinueEditCmsPageActionGroup" stepKey="saveAndContinueEditCmsPage"/>
80+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
81+
<!-- Validate Stage: Slider Settings -->
82+
<actionGroup ref="validateSliderAttributesActionGroup" stepKey="seeSliderStage">
83+
<argument name="sliderFade" value="{{PageBuilderSliderFade_Enabled.value}}"/>
84+
<argument name="sliderInfiniteLoop" value="{{PageBuilderSliderInfiniteLoop_Enabled.value}}"/>
85+
<argument name="sliderShowArrows" value="{{PageBuilderSliderShowArrows_Enabled.value}}"/>
86+
</actionGroup>
87+
<!-- Validate Stage: Slide 1 -->
88+
<actionGroup ref="switchSlide" stepKey="clickSlide1Stage">
89+
<argument name="slideIndex" value="1"/>
90+
</actionGroup>
91+
<waitForElementVisible selector="{{SlideOnBackend.messageContent('1', PageBuilderSlideItemContent_Slide1.value)}}" stepKey="seeSlide1ContentStage"/>
92+
<!-- Validate Stage: Slide 2 -->
93+
<actionGroup ref="nextSlide" stepKey="clickSlide2Stage">
94+
<argument name="slideIndex" value="2"/>
95+
</actionGroup>
96+
<waitForElementVisible selector="{{SlideOnBackend.messageContent('2', PageBuilderSlideItemContent_Slide2.value)}}" stepKey="seeSlide2ContentStage"/>
97+
<actionGroup ref="NavigateToStorefrontForCreatedPageActionGroup" stepKey="navigateToStoreFront">
98+
<argument name="page" value="$$createCMSPage.identifier$$"/>
99+
</actionGroup>
100+
<!-- Validate Storefront: Slider Settings -->
101+
<actionGroup ref="validateSliderAttributesActionGroup" stepKey="seeSliderStorefront">
102+
<argument name="sliderSection" value="SliderOnFrontend"/>
103+
<argument name="sliderFade" value="{{PageBuilderSliderFade_Enabled.value}}"/>
104+
<argument name="sliderInfiniteLoop" value="{{PageBuilderSliderInfiniteLoop_Enabled.value}}"/>
105+
<argument name="sliderShowArrows" value="{{PageBuilderSliderShowArrows_Enabled.value}}"/>
106+
</actionGroup>
107+
<!-- Validate Storefront: Slide 1 -->
108+
<actionGroup ref="switchSlide" stepKey="clickSlide1Storefront">
109+
<argument name="sliderSection" value="SliderOnFrontend"/>
110+
<argument name="slideSection" value="SlideOnFrontend"/>
111+
<argument name="slideIndex" value="1"/>
112+
</actionGroup>
113+
<waitForElementVisible selector="{{SlideOnFrontend.messageContent('1', PageBuilderSlideItemContent_Slide1.value)}}" stepKey="seeSlide1ContentStorefront"/>
114+
<waitForElementVisible selector="{{SliderOnFrontend.previousSlideArrowEnabled('1')}}" stepKey="seePreviousSlideArrow"/>
115+
<waitForElementVisible selector="{{SliderOnFrontend.nextSlideArrowEnabled('1')}}" stepKey="seeNextSlideArrow"/>
116+
<!-- Validate Storefront: Slide 2 -->
117+
<actionGroup ref="nextSlide" stepKey="clickSlide2Storefront">
118+
<argument name="sliderSection" value="SliderOnFrontend"/>
119+
<argument name="slideSection" value="SlideOnFrontend"/>
120+
<argument name="slideIndex" value="2"/>
121+
</actionGroup>
122+
<waitForElementVisible selector="{{SlideOnFrontend.messageContent('2', PageBuilderSlideItemContent_Slide2.value)}}" stepKey="seeSlide2ContentStorefront"/>
123+
<waitForElementVisible selector="{{SliderOnFrontend.previousSlideArrowEnabled('1')}}" stepKey="seePreviousSlideArrow2"/>
124+
<waitForElementVisible selector="{{SliderOnFrontend.nextSlideArrowEnabled('1')}}" stepKey="seeNextSlideArrow2"/>
125+
</test>
126+
</tests>

app/code/Magento/PageBuilder/view/base/web/js/content-type/slider/appearance/default/widget.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ define([
2424
autoplay: $element.data('autoplay'),
2525
autoplaySpeed: $element.data('autoplay-speed') || 0,
2626
fade: $element.data('fade'),
27-
infinite: $element.data('is-infinite'),
27+
infinite: $element.data('infinite-loop'),
2828
arrows: $element.data('show-arrows'),
2929
dots: $element.data('show-dots')
3030
});

dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/view/frontend/web/js/content-type/slider/appearance/default/widget.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ define([
3838
el.setAttribute('data-autoplay', 'true');
3939
el.setAttribute('data-autoplay-speed', 500);
4040
el.setAttribute('data-fade', 'true');
41-
el.setAttribute('data-is-infinite', 'true');
41+
el.setAttribute('data-infinite-loop', 'true');
4242
el.setAttribute('data-show-arrows', 'true');
4343
el.setAttribute('data-show-dots', 'true');
4444

0 commit comments

Comments
 (0)