chore: sync upstream changes

.prettierrc

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

CONTRIBUTING.md

@@ -5,6 +5,7 @@
 First, thank you for considering contributing to react-slick! It's people like you that make the open source community such a great community! 😊
 
 We welcome any type of contribution, not only code. You can help with
+
 - **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open)
 - **Marketing**: writing blog posts, howto's, printing stickers, ...
 - **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ...
@@ -13,7 +14,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
 
@@ -41,14 +42,12 @@ You can also reach us at hello@react-slick.opencollective.com.
 Thank you to all the people who have already contributed to react-slick!
 <a href="https://github.com/akiran/react-slick/graphs/contributors"><img src="https://opencollective.com/react-slick/contributors.svg?width=890" /></a>
 
-
 ### Backers
 
 Thank you to all our backers! [[Become a backer](https://opencollective.com/react-slick#backer)]
 
 <a href="https://opencollective.com/react-slick#backers" target="_blank"><img src="https://opencollective.com/react-slick/backers.svg?width=890"></a>
 
-
 ### Sponsors
 
 Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/react-slick#sponsor))

README.md

@@ -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
 
@@ -111,7 +111,6 @@ open http://localhost:8080
 
 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,9 +1,8 @@
 // includes tests of
 // SimpleSlider, MultipleItems
-import { mount } from "enzyme";
 import { testSlider } from "./testUtils";
 
-describe("SimpleSlider with combinations of possibilities", function() {
+describe("SimpleSlider with combinations of possibilities", function () {
   // try around several possibilities
   let _noOfSlides = [2, 5, 12];
   let _slidesToShow = [2, 5, 10];
@@ -38,7 +37,7 @@ describe("SimpleSlider with combinations of possibilities", function() {
           slidesToScroll,
           useCSS: false
         };
-        test(`Test with settings => noOfSlides: ${noOfSlides}, slidesToShow: ${slidesToShow}, slidesToScroll: ${slidesToScroll}`, function() {
+        test(`Test with settings => noOfSlides: ${noOfSlides}, slidesToShow: ${slidesToShow}, slidesToScroll: ${slidesToScroll}`, function () {
           testSlider(settings1);
         });
       }

__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 = {
@@ -29,39 +35,20 @@ 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");
+describe("After change Slider", function () {
+  it("should render", function () {
+    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() {
-  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 });
+describe("Slider", function () {
+  it("should render", function () {
+    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,
@@ -52,11 +52,7 @@ function fetchDetails(keys) {
   for (let slide of $("div.slick-slide")) {
     const slideObj = {
       index: $(slide).attr("data-slick-index"),
-      value: $(slide)
-        .find("div")
-        .find("div")
-        .find("h3")
-        .text()
+      value: $(slide).find("div").find("div").find("h3").text()
     };
     allSlides.push(slideObj);
     if ($(slide).hasClass("slick-current")) {
@@ -96,10 +92,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
   });