Autoplay double dot fix

__test__/jQSlickUtils.js

@@ -53,10 +53,12 @@ function fetchDetails(keys) {
     const slideObj = {
       index: $(slide).attr("data-slick-index"),
       value: $(slide)
-        .find("div")
-        .find("div")
         .find("h3")
         .text()
+      //.find("div")
+      // .find("div")
+      // .find("h3")
+      // .text()
     };
     allSlides.push(slideObj);
     if ($(slide).hasClass("slick-current")) {

__test__/mount/simple.test.js

@@ -31,7 +31,7 @@ const testsUtil = (settings, actions, keys) => {
     expect(reactDetails.activeSlides).toEqual(jqDetails.activeSlides);
   });
 
-  // Following two tests fail
+  // // Following two tests fail
   test("checking cloned slides jQuery vs react", () => {
     expect(reactDetails.clonedSlides.map(slide => slide.index)).toEqual(
       jqDetails.clonedSlides.map(slide => slide.index)

examples/__tests__/AdaptiveHeight.test.js

@@ -0,0 +1,107 @@
+import React from "react";
+import SimpleSlider from "../SimpleSlider";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide
+} from "../../test-utils";
+
+describe("Adaptive Height example", () => {
+  it("should have 8 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+    const { container } = render(<SimpleSlider a={5} />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(8);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+  });
+  it("should have 1 active slide", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      1
+    );
+    expect(
+      Array.from(getActiveSlide(container).children).map(
+        e => parseInt(e.textContent) - 1
+      )[0]
+    ).toBe(0);
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children.length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<SimpleSlider />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<SimpleSlider />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<SimpleSlider />);
+    clickNext(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("2");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<SimpleSlider />);
+    clickPrevious(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("6");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.querySelectorAll(".slick-dots")[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<SimpleSlider />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots button")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)[0]).toEqual("4");
+    expect(getActiveSlidesCount(container)).toEqual(1);
+    expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+      true
+    );
+  });
+});

examples/__tests__/AppendDots.test.js

@@ -0,0 +1,125 @@
+import React from "react";
+import AppendDots from "../AppendDots";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide,
+  getSlideHeight
+} from "../../test-utils";
+
+describe("Append Dots example", () => {
+  it("should have 8 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+    const { container } = render(<AppendDots a={5} />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(8);
+  });
+  it("should have 3 clone slides", function() {
+    const { container } = render(<AppendDots />);
+    expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+  });
+  it("should have 1 current slide", function() {
+    const { container } = render(<AppendDots />);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-current").length
+    ).toBe(1);
+    expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+  });
+  it("should have 1 active slide", function() {
+    const { container } = render(<AppendDots />);
+    expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+      1
+    );
+    expect(
+      Array.from(getActiveSlide(container).children).map(
+        e => parseInt(e.textContent) - 1
+      )[0]
+    ).toBe(0);
+  });
+  it("should have 6 dots", function() {
+    const { container } = render(<AppendDots />);
+    console.log(
+      Array.from(container.getElementsByClassName("slick-dots"))[0].children[0]
+        .children.length
+    );
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children[0].children
+        .length
+    ).toBe(6);
+  });
+  it("should have 1 active dot", function() {
+    const { container } = render(<AppendDots />);
+
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+  });
+  it("should have a prev arrow", function() {
+    const { container } = render(<AppendDots />);
+    expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+  });
+  it("should have a next arrow", function() {
+    const { container } = render(<AppendDots />);
+    expect(container.getElementsByClassName("slick-next").length).toBe(1);
+  });
+  it("should got to next slide when next button is clicked", function() {
+    const { container } = render(<AppendDots />);
+    clickNext(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("2");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children[0].children[1]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto previous slide when prev button is clicked", function() {
+    const { container } = render(<AppendDots />);
+    clickPrevious(container);
+    expect(
+      container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+    ).toBe("6");
+    expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+      1
+    );
+    expect(
+      container.getElementsByClassName("slick-dots")[0].children[0].children[5]
+    ).toHaveClass("slick-active");
+  });
+  it("should goto 4th slide when 4th dot is clicked", function() {
+    const { container } = render(<AppendDots />);
+    fireEvent(
+      container.querySelectorAll(".slick-dots div")[3],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(getActiveSlidesText(container)[0]).toEqual("4");
+    expect(getActiveSlidesCount(container)).toEqual(1);
+    expect(
+      hasClass(
+        container.getElementsByClassName("slick-dots")[0].children[0]
+          .children[3],
+        "slick-active"
+      )
+    ).toEqual(true);
+  });
+  it("check the content of dots", function() {
+    const { container } = render(<AppendDots />);
+    const array = [];
+    Array.from(
+      container.getElementsByClassName("slick-dots")[0].children[0].children
+    ).forEach(i => array.push(i.textContent));
+    expect(array).toEqual(["1", "2", "3", "4", "5", "6"]);
+  });
+});

examples/__tests__/AsNavFor.test.js

@@ -0,0 +1,104 @@
+import React from "react";
+import AsNavFor from "../AsNavFor";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  getActiveSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons,
+  getButtonsListItem,
+  getCurrentSlide,
+  getSlideHeight
+} from "../../test-utils";
+
+describe("As Nav For example", () => {
+  it("Number of slides should be 2", function() {
+    const { container } = render(<AsNavFor />);
+    expect(container.getElementsByClassName("slick-slider").length).toBe(2);
+  });
+  it("First Slide should have 8 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+    const { container } = render(<AsNavFor a={5} />);
+    expect(
+      container
+        .getElementsByClassName("slick-slider")[0]
+        .getElementsByClassName("slick-slide").length
+    ).toBe(8);
+  });
+  it("Second Slide should have 8 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+    const { container } = render(<AsNavFor a={5} />);
+    expect(
+      container
+        .getElementsByClassName("slick-slider")[1]
+        .getElementsByClassName("slick-slide").length
+    ).toBe(12);
+  });
+  it("Clicking on next of first slide should change second slide too", function() {
+    const { container } = render(<AsNavFor />);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["1"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["1", "2", "3"]);
+    clickNext(container.getElementsByClassName("slick-slider")[0]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["2"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["2", "3", "4"]);
+  });
+  it("Clicking on next of second slide should change first slide too", function() {
+    const { container } = render(<AsNavFor />);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["1"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["1", "2", "3"]);
+    clickNext(container.getElementsByClassName("slick-slider")[1]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["2"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["2", "3", "4"]);
+  });
+  it("Clicking on previous button of first slide should change second slide too", function() {
+    const { container } = render(<AsNavFor />);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["1"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["1", "2", "3"]);
+    clickPrevious(container.getElementsByClassName("slick-slider")[0]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["6"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["6", "1", "2"]);
+  });
+  it("Clicking on previous button of second slide should change first slide too", function() {
+    const { container } = render(<AsNavFor />);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["1"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["1", "2", "3"]);
+    clickPrevious(container.getElementsByClassName("slick-slider")[1]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[0])
+    ).toEqual(["6"]);
+    expect(
+      getActiveSlidesText(container.getElementsByClassName("slick-slider")[1])
+    ).toEqual(["6", "1", "2"]);
+  });
+});