Fix an issue with prev button clicks in fade mode

mdottavi · Aug 16, 2020 · e45b9e7 · e45b9e7
1 parent d19bc96
commit e45b9e7
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 8 deletions.
diff --git a/docs/single-demo.js b/docs/single-demo.js
@@ -3,9 +3,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import Slider from "../src/slider";
-import UnevenSetsFinite from "../examples/UnevenSetsFinite";
-import UnevenSetsInfinite from "../examples/UnevenSetsInfinite";
-
 function SimpleSlider() {
   const settings = {
     dots: true,
@@ -44,8 +41,7 @@ function SimpleSlider() {
 function App() {
   return (
     <div className="content">
-      <UnevenSetsFinite />
-      {/* <UnevenSetsInfinite /> */}
+      <SimpleSlider />
     </div>
   );
 }

diff --git a/examples/Fade.js b/examples/Fade.js
@@ -10,7 +10,8 @@ export default class Fade extends Component {
       infinite: true,
       speed: 500,
       slidesToShow: 1,
-      slidesToScroll: 1
+      slidesToScroll: 1,
+      waitForAnimate: false
     };
     return (
       <div>

diff --git a/examples/__tests__/Fade.js b/examples/__tests__/Fade.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { mount } from "enzyme";
+import Fade from "../Fade";
+import { clickNext, clickPrev } from "../../__tests__/testUtils";
+
+describe("Fade", () => {
+  it("should change slides when clicked on next & prev buttons", () => {
+    const slider = mount(<Fade />);
+    let activeSlide = slider.find("div.slick-active");
+    expect(activeSlide.props()["data-index"]).toEqual(0);
+    clickNext(slider);
+    activeSlide = slider.find("div.slick-active");
+    expect(activeSlide.props()["data-index"]).toEqual(1);
+    clickPrev(slider);
+    activeSlide = slider.find("div.slick-active");
+    expect(activeSlide.props()["data-index"]).toEqual(0);
+  });
+});
diff --git a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap b/examples/__tests__/__snapshots__/MultipleItems.test.js.snap
@@ -989,7 +989,7 @@ exports[`Multiple Items should show slides first 3 slides when middle dot is cli
     <h2> Multiple items </h2>
     <div class=\\"slick-slider slick-initialized\\" dir=\\"ltr\\"><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-prev\\" style=\\"display: block;\\"> Previous</button>
         <div class=\\"slick-list\\">
-            <div class=\\"slick-track\\" style=\\"opacity: 1; transform: translate3d(0px, 0px, 0px);\\">
+            <div class=\\"slick-track\\" style=\\"opacity: 1; transform: translate3d(0px, 0px, 0px); transition: transform 500ms ease;\\">
                 <div data-index=\\"-3\\" tabindex=\\"-1\\" class=\\"slick-slide slick-cloned\\" aria-hidden=\\"true\\" style=\\"width: 0px;\\">
                     <div>
                         <div tabindex=\\"-1\\" style=\\"width: 100%; display: inline-block;\\">

diff --git a/src/inner-slider.js b/src/inner-slider.js
@@ -410,7 +410,6 @@ export class InnerSlider extends React.Component {
   changeSlide = (options, dontAnimate = false) => {
     const spec = { ...this.props, ...this.state };
     let targetSlide = changeSlide(spec, options);
-    if (targetSlide === this.state.targetSlide) return;
     if (targetSlide !== 0 && !targetSlide) return;
     if (dontAnimate === true) {
       this.slideHandler(targetSlide, dontAnimate);