Update from fork

.eslintrc

@@ -9,22 +9,26 @@
     "react/prop-types": 0,
     "react/no-find-dom-node": 0,
     "react/display-name": 0,
-    "no-console": 0
+    "no-console": 0,
+    "no-prototype-builtins": 0
   },
   "env": {
     "node": true,
     "browser": true,
     "es6": true,
     "jasmine": true
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "requireConfigFile": false
+  },
   "plugins": [
-      "react",
-      "import"
+    "react",
+    "import"
   ],
   "extends": [
     "eslint:recommended",
     "plugin:import/errors",
     "plugin:react/recommended"
   ]
-}
+}

.github/FUNDING.yml

@@ -1 +1,2 @@
+github: akiran
 open_collective: react-slick

.prettierrc

@@ -0,0 +1 @@
+trailingComma: none

CONTRIBUTING.md

@@ -13,7 +13,7 @@ We welcome any type of contribution, not only code. You can help with
 
 ## Your First Contribution
 
-Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
+Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github).
 
 ## Submitting code
 

README.md

@@ -1,6 +1,6 @@
 ### react-slick
 
-[![Backers on Open Collective](https://opencollective.com/react-slick/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-slick/sponsors/badge.svg)](#sponsors) [![Join the chat at https://gitter.im/akiran/react-slick](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/akiran/react-slick?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Backers on Open Collective](https://opencollective.com/react-slick/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-slick/sponsors/badge.svg)](#sponsors)
 
 ##### Carousel component built with React. It is a react port of [slick carousel](http://kenwheeler.github.io/slick/)
 
@@ -37,16 +37,16 @@ or add cdn link in your html
   rel="stylesheet"
   type="text/css"
   charset="UTF-8"
-  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
+  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
 />
 <link
   rel="stylesheet"
   type="text/css"
-  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
+  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
 />
 ```
 
-### [PlayGround](https://codesandbox.io/s/ppwkk5l6xx)
+### [PlayGround](https://stackblitz.com/edit/vitejs-vite-ownrun?file=src%2FImageSlider.jsx)
 
 ### Example
 
@@ -107,6 +107,10 @@ npm start
 open http://localhost:8080
 ```
 
+## Community
+
+Join our [discord channel](https://discord.gg/z7stRE4Cyb) to discuss react-slick bugs and ask for help
+
 ## Contributing
 
 Please see the [contributing guidelines](./CONTRIBUTING.md)

__tests__/SimpleSlider.test.js

@@ -1,6 +1,5 @@
 // includes tests of
 // SimpleSlider, MultipleItems
-import { mount } from "enzyme";
 import { testSlider } from "./testUtils";
 
 describe("SimpleSlider with combinations of possibilities", function() {

__tests__/TestComponents.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Slider from "../src/index";
+
+export function GenericSliderComponent({ slidesCount, settings }) {
+  const slides = [...Array(slidesCount).keys()].map(item => (
+    <div key={item}>{item + 1}</div>
+  ));
+  return <Slider {...settings}>{slides}</Slider>;
+}
+
+test("fake test", () => {
+  expect(1).toBe(1);
+});

__tests__/afterChange.test.js

@@ -1,8 +1,14 @@
 import React from "react";
-import { mount } from "enzyme";
+import { render, fireEvent } from "@testing-library/react";
 import Slider from "../src/index";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  getCurrentSlide
+} from "../test-utils";
 
-class SliderWithBeforeChange extends React.Component {
+class SliderWithAfterChange extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -31,37 +37,18 @@ class SliderWithBeforeChange extends React.Component {
 
 describe("After change Slider", function() {
   it("should render", function() {
-    const wrapper = mount(<SliderWithBeforeChange />);
-    expect(wrapper.state()).toEqual({ currentSlide: null });
-    wrapper.find(".slick-next").simulate("click");
+    const { container } = render(<SliderWithAfterChange />);
+    clickNext(container);
     setTimeout(() => {
-      expect(
-        wrapper
-          .find(".slick-slide.slick-active")
-          .first()
-          .text()
-      ).toEqual("slide2");
-      expect(wrapper.state()).toEqual({ currentSlide: 1 });
-    }, 1);
-    wrapper.find(".slick-next").simulate("click");
+      expect(getActiveSlide(container).textContent).toEqual("slide2");
+    }, 1000);
+    clickNext(container);
     setTimeout(() => {
-      expect(
-        wrapper
-          .find(".slick-slide.slick-active")
-          .first()
-          .text()
-      ).toEqual("slide3");
-      expect(wrapper.state()).toEqual({ currentSlide: 2 });
-    }, 1);
-    wrapper.find(".slick-prev").simulate("click");
+      expect(getActiveSlide(container).textContent).toEqual("slide3");
+    }, 1000);
+    clickPrevious(container);
     setTimeout(() => {
-      expect(
-        wrapper
-          .find(".slick-slide.slick-active")
-          .first()
-          .text()
-      ).toEqual("slide2");
-      expect(wrapper.state()).toEqual({ currentSlide: 1 });
-    }, 1);
+      expect(getActiveSlide(container).textContent).toEqual("slide2");
+    }, 1000);
   });
 });

__tests__/arrows.js

@@ -4,7 +4,7 @@
 
 sinon.stub(console, "error");
 
-import { render, shallow } from "enzyme";
+import { render } from "@testing-library/react";
 import React from "react";
 import sinon from "sinon";
 
@@ -22,48 +22,52 @@ function CustomArrow(props) {
 
 describe("Previous arrows", () => {
   it("should render arrow", () => {
-    const wrapper = shallow(<PrevArrow />);
-    expect(wrapper.find("button")).toHaveLength(1);
+    const { container } = render(<PrevArrow />);
+    expect(Array.from(container.getElementsByTagName("button"))).toHaveLength(
+      1
+    );
   });
 
   it("should not result in errors", () => {
-    shallow(<PrevArrow />);
+    render(<PrevArrow />);
 
     expect(console.error.called).toBe(false);
   });
 
-  // it('should pass slide data to custom arrow', () => {
-  //   let elAttributes;
-  //   let arr = <CustomArrow />
-  //
-  //   const wrapper = render(<PrevArrow currentSlide={3} prevArrow={arr} slideCount={5} />);
-  //
-  //   elAttributes = wrapper.find('.sample')[0].attribs;
-  //   expect(elAttributes['data-currentslide']).toBe('3');
-  //   expect(elAttributes['data-slidecount']).toBe('5');
-  // });
+  //  it('should pass slide data to custom arrow', () => {
+  //    let elAttributes;
+  //    let arr = <CustomArrow />
+
+  //    const {container}= render(<PrevArrow currentSlide={3} prevArrow={arr} slideCount={5} />);
+
+  //    elAttributes =x=> container.querySelectorAll('.sample')[0].getAttribute(x);
+  //    expect(elAttributes('data-currentslide')).toBe('3');
+  //    expect(elAttributes('data-slidecount')).toBe('5');
+  //  });
 });
 
 describe("Next arrows", () => {
   it("should render arrow", () => {
-    const wrapper = shallow(<NextArrow />);
-    expect(wrapper.find("button")).toHaveLength(1);
+    const { container } = render(<NextArrow />);
+    expect(Array.from(container.getElementsByTagName("button"))).toHaveLength(
+      1
+    );
   });
 
-  // it('should not result in errors', () => {
-  //   shallow(<NextArrow />);
-  //
-  //   expect(console.error.called).toBe(false);
-  // });
-
-  // it('should pass slide data to custom arrow', () => {
-  //   let elAttributes;
-  //   let arr = <CustomArrow />
-  //
-  //   const wrapper = render(<NextArrow currentSlide={6} nextArrow={arr} slideCount={9} />);
-  //
-  //   elAttributes = wrapper.find('.sample')[0].attribs;
-  //   expect(elAttributes['data-currentslide']).toBe('6');
-  //   expect(elAttributes['data-slidecount']).toBe('9');
-  // });
+  //  it('should not result in errors', () => {
+  //    render(<NextArrow />);
+
+  //    expect(console.error.called).toBe(false);
+  //  });
+
+  //  it('should pass slide data to custom arrow', () => {
+  //    let elAttributes;
+  //    let arr = <CustomArrow />
+
+  //    const {container} = render(<NextArrow currentSlide={6} nextArrow={arr} slideCount={9} />);
+
+  //    elAttributes =(x)=> container.querySelectorAll('.sample')[0].getAttribute(x);
+  //    expect(elAttributes('data-currentslide')).toBe('6');
+  //    expect(elAttributes('data-slidecount')).toBe('9');
+  //  });
 });

__tests__/beforeChange.test.js

@@ -1,6 +1,12 @@
 import React from "react";
-import { mount } from "enzyme";
+import { render } from "@testing-library/react";
 import Slider from "../src/index";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  getCurrentSlide
+} from "../test-utils";
 
 class SliderWithBeforeChange extends React.Component {
   constructor(props) {
@@ -29,32 +35,14 @@ class SliderWithBeforeChange extends React.Component {
   }
 }
 
-describe.skip("Slider", function() {
+describe("Slider", function() {
   it("should render", function() {
-    const wrapper = mount(<SliderWithBeforeChange />);
-    wrapper.find(".slick-next").simulate("click");
-    expect(
-      wrapper
-        .find(".slick-slide.slick-active")
-        .first()
-        .text()
-    ).toEqual("slide2");
-    expect(wrapper.state()).toEqual({ currentSlide: 0, nextSlide: 1 });
-    wrapper.find(".slick-next").simulate("click");
-    expect(
-      wrapper
-        .find(".slick-slide.slick-active")
-        .first()
-        .text()
-    ).toEqual("slide3");
-    expect(wrapper.state()).toEqual({ currentSlide: 1, nextSlide: 2 });
-    wrapper.find(".slick-prev").simulate("click");
-    expect(
-      wrapper
-        .find(".slick-slide.slick-active")
-        .first()
-        .text()
-    ).toEqual("slide2");
-    expect(wrapper.state()).toEqual({ currentSlide: 2, nextSlide: 1 });
+    const { container } = render(<SliderWithBeforeChange />);
+    clickNext(container);
+    expect(getActiveSlide(container).textContent).toEqual("slide2");
+    clickNext(container);
+    expect(getActiveSlide(container).textContent).toEqual("slide3");
+    clickPrevious(container);
+    expect(getActiveSlide(container).textContent).toEqual("slide2");
   });
 });

__tests__/jQSlickUtils.js

@@ -39,9 +39,9 @@ function simulateActions(actions) {
 
 // takes an object of keys and returns those details
 /* Possible keys can be one of the following
-currentSlide(index and value), activeSlides(index and value), 
-allSlides(index and value), clonedSlides(index and value)
-*/
+  currentSlide(index and value), activeSlides(index and value), 
+  allSlides(index and value), clonedSlides(index and value)
+  */
 function fetchDetails(keys) {
   let details = {};
   let currentSlide = null,
@@ -96,10 +96,10 @@ function fetchDetails(keys) {
 export function getJQuerySlickDetails(settings, actions, keys) {
   // create new slider
   document.body.innerHTML = `
-  <section class="regular slider">
-  ${createJQuerySliderChildren(settings.noOfSlides)}
-  </section>
-  `;
+    <section class="regular slider">
+    ${createJQuerySliderChildren(settings.noOfSlides)}
+    </section>
+    `;
   $(".regular.slider").slick({
     ...settings
   });