fixed #1874: slick-current is always on first slide despite initialSl…

__tests__/regression/fix-1813.test.js

@@ -2,23 +2,18 @@
 
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
-import Slider from "../../src/index";
 
 import {
-  activeSlide,
-  activeSlides,
   clickNext,
   clickPrevious,
   getActiveButton,
   getActiveSlidesCount,
   getActiveSlidesText,
   getButtons,
   getButtonsLength,
-  getButtonsListItem,
   getClonesCount,
   getCurrentSlide,
-  getSlidesCount,
-  hasClass
+  getSlidesCount
 } from "../../test-utils";
 import { GenericSliderComponent } from "../TestComponents";
 

__tests__/regression/fix-1874.test.js

@@ -0,0 +1,25 @@
+// Test fix of#1874:  "slick-current" is always on first slide despite initialSlide != 0
+
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { getCurrentSlideContent, clickNext } from "../../test-utils";
+import { GenericSliderComponent } from "../TestComponents";
+
+describe("currentSlide test with different initialSlide values", () => {
+  it("currentSlide is 0 when initialSlide is 0", function() {
+    const { container } = render(<GenericSliderComponent slidesCount={6} />);
+    expect(getCurrentSlideContent(container)).toEqual("1");
+    clickNext(container);
+    expect(getCurrentSlideContent(container)).toEqual("2");
+  });
+
+  it("currentSlide is 2 when initialSlide is 2", function() {
+    const { container } = render(
+      <GenericSliderComponent slidesCount={6} settings={{ initialSlide: 2 }} />
+    );
+    expect(getCurrentSlideContent(container)).toEqual("3");
+    clickNext(container);
+    expect(getCurrentSlideContent(container)).toEqual("4");
+  });
+});

src/inner-slider.js

@@ -35,6 +35,7 @@ export class InnerSlider extends React.Component {
     this.state = {
       ...initialState,
       currentSlide: this.props.initialSlide,
+      targetSlide: this.props.initialSlide ? this.props.initialSlide : 0,
       slideCount: React.Children.count(this.props.children)
     };
     this.callbackTimers = [];

test-utils.js

@@ -20,6 +20,11 @@ export function getCurrentSlide(container) {
   return container.querySelector(".slick-current");
 }
 
+export function getCurrentSlideContent(container) {
+  const slide = container.querySelector(".slick-current");
+  return slide.textContent;
+}
+
 export function getButtons(container) {
   return container.querySelectorAll(".slick-dots button");
 }