diff --git a/examples/__tests__/AdaptiveHeight.test.js b/examples/__tests__/AdaptiveHeight.test.js
new file mode 100644
index 000000000..91d0f487c
--- /dev/null
+++ b/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();
+ expect(container.getElementsByClassName("slick-slide").length).toBe(8);
+ });
+ it("should have 3 clone slides", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ 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();
+ 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();
+ expect(
+ container.getElementsByClassName("slick-dots")[0].children.length
+ ).toBe(6);
+ });
+ it("should have 1 active dot", function() {
+ const { container } = render();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ 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();
+ 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();
+ 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
+ );
+ });
+});
diff --git a/examples/__tests__/AppendDots.test.js b/examples/__tests__/AppendDots.test.js
new file mode 100644
index 000000000..4cf9238ef
--- /dev/null
+++ b/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();
+ expect(container.getElementsByClassName("slick-slide").length).toBe(8);
+ });
+ it("should have 3 clone slides", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ 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();
+ 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();
+ 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();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ 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();
+ 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();
+ 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();
+ 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"]);
+ });
+});
diff --git a/examples/__tests__/AsNavFor.test.js b/examples/__tests__/AsNavFor.test.js
new file mode 100644
index 000000000..8a9b30153
--- /dev/null
+++ b/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();
+ 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();
+ 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();
+ 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();
+ 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();
+ 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();
+ 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();
+ 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"]);
+ });
+});
diff --git a/examples/__tests__/AutoPlay.test.js b/examples/__tests__/AutoPlay.test.js
new file mode 100644
index 000000000..16c589c7a
--- /dev/null
+++ b/examples/__tests__/AutoPlay.test.js
@@ -0,0 +1,284 @@
+import React from "react";
+import AutoPlay from "../AutoPlay";
+import AutoPlayMethods from "../AutoPlayMethods";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html, js_beautify } from "js-beautify";
+import jest from "jest";
+import {
+ getActiveSlide,
+ clickNext,
+ clickPrevious,
+ hasClass,
+ getActiveSlides,
+ getActiveSlidesCount,
+ getActiveSlidesText,
+ getButtons,
+ getButtonsListItem,
+ getCurrentSlide,
+ getSlideHeight
+} from "../../test-utils";
+
+describe("AutoPlay example", () => {
+ it("should have 8 slides (3(preclone) + 6(actual) + 3(postclone))", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-slide").length).toBe(12);
+ });
+ it("should have 3 clone slides", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(6);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ expect(
+ container.querySelectorAll(".slick-slide.slick-current").length
+ ).toBe(1);
+ expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+ });
+ it("should have 3 active slide", function() {
+ const { container } = render();
+ expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+ 3
+ );
+ expect(
+ Array.from(getActiveSlide(container).children).map(
+ e => parseInt(e.textContent) - 1
+ )[0]
+ ).toBe(0);
+ });
+ it("should have 6 dots", function() {
+ const { container } = render();
+ expect(
+ container.getElementsByClassName("slick-dots")[0].children.length
+ ).toBe(6);
+ });
+ it("should have 1 active dot", function() {
+ const { container } = render();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ 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();
+ 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();
+ fireEvent(
+ container.querySelectorAll(".slick-dots button")[3],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ expect(getActiveSlidesCount(container)).toEqual(3);
+ expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+ true
+ );
+ });
+ it("Should change the active slides automatically", async function() {
+ const { container } = render();
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ await waitFor(
+ () => {
+ expect(getActiveSlidesText(container)).toEqual(["2", "3", "4"]);
+ },
+ { timeout: "3000" }
+ );
+ });
+});
+describe("AutoPlay method example", () => {
+ it("should have 8 slides (3(preclone) + 6(actual) + 3(postclone))", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-slide").length).toBe(12);
+ });
+ it("should have 3 clone slides", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(6);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ expect(
+ container.querySelectorAll(".slick-slide.slick-current").length
+ ).toBe(1);
+ expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+ });
+ it("should have 3 active slide", function() {
+ const { container } = render();
+ expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+ 3
+ );
+ expect(
+ Array.from(getActiveSlide(container).children).map(
+ e => parseInt(e.textContent) - 1
+ )[0]
+ ).toBe(0);
+ });
+ it("should have 6 dots", function() {
+ const { container } = render();
+ expect(
+ container.getElementsByClassName("slick-dots")[0].children.length
+ ).toBe(6);
+ });
+ it("should have 1 active dot", function() {
+ const { container } = render();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ 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();
+ 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();
+ fireEvent(
+ container.querySelectorAll(".slick-dots button")[3],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ expect(getActiveSlidesCount(container)).toEqual(3);
+ expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+ true
+ );
+ });
+ it("Should change the active slides automatically", async function() {
+ const { container } = render();
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ await waitFor(
+ () => {
+ expect(getActiveSlidesText(container)).toEqual(["2", "3", "4"]);
+ },
+ { timeout: "3000" }
+ );
+ });
+ it("Shouldn't change the active slides when Paused button is clicked", async function() {
+ const { container } = render();
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ let button1;
+ Array.from(container.querySelectorAll(" .button")).forEach(e =>
+ e.textContent === "Pause" ? (button1 = e) : null
+ );
+ fireEvent(
+ button1,
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ //This will fail as active slides wont change
+ //await waitFor(()=>{console.log(getActiveSlidesText(container));expect(getActiveSlidesText(container)).toEqual(["3","4","5"]);},{timeout:"10000"});
+ await waitFor(
+ () => {
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ },
+ { timeout: "10000" }
+ );
+ });
+ it("Should change the active slides when Play button is clicked", async function() {
+ const { container } = render();
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ let button1;
+ let button2;
+ Array.from(container.querySelectorAll(" .button")).forEach(e =>
+ e.textContent === "Pause"
+ ? (button1 = e)
+ : e.textContent === "Play"
+ ? (button2 = e)
+ : null
+ );
+ fireEvent(
+ button1,
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ //This will fail as active slides wont change
+ //await waitFor(()=>{console.log(getActiveSlidesText(container));expect(getActiveSlidesText(container)).toEqual(["3","4","5"]);},{timeout:"10000"});
+ await waitFor(
+ () => {
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ },
+ { timeout: "10000" }
+ );
+ fireEvent(
+ button2,
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ await waitFor(
+ () => {
+ expect(getActiveSlidesText(container)).toEqual(["3", "4", "5"]);
+ },
+ { timeout: "10000" }
+ );
+ });
+});
diff --git a/examples/__tests__/CustomArrow.test.js b/examples/__tests__/CustomArrow.test.js
new file mode 100644
index 000000000..5394bb574
--- /dev/null
+++ b/examples/__tests__/CustomArrow.test.js
@@ -0,0 +1,112 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import {
+ activeSlide,
+ activeSlides,
+ clickNext,
+ clickPrevious,
+ getActiveButton,
+ getActiveSlide,
+ getActiveSlidesCount,
+ getActiveSlidesText,
+ getButtons,
+ getButtonsLength,
+ getButtonsListItem,
+ getClonesCount,
+ getCurrentSlide,
+ getSlidesCount,
+ hasClass
+} from "../../test-utils";
+import CustomArrows from "../CustomArrows";
+describe("CustomArrow example", () => {
+ it("should have 8 slides (3(preclone) + 6(actual) + 3(postclone))", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-slide").length).toBe(12);
+ });
+ it("should have 3 clone slides", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(6);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ expect(
+ container.getElementsByClassName("slick-slide slick-current").length
+ ).toBe(1);
+ expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+ });
+ it("should have 3 active slide", function() {
+ const { container } = render();
+ expect(
+ container.getElementsByClassName("slick-slide slick-active").length
+ ).toBe(3);
+ expect(
+ Array.from(getActiveSlide(container).children).map(
+ e => parseInt(e.textContent) - 1
+ )[0]
+ ).toBe(0);
+ });
+ it("should have 6 dots", function() {
+ const { container } = render();
+ expect(
+ container.getElementsByClassName("slick-dots")[0].children.length
+ ).toBe(6);
+ });
+ it("should have 1 active dot", function() {
+ const { container } = render();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ clickNext(container);
+ expect(
+ container.getElementsByClassName("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();
+ clickPrevious(container);
+ expect(
+ container.getElementsByClassName("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();
+ fireEvent(
+ container.querySelectorAll(".slick-dots button")[3],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ expect(getActiveSlidesCount(container)).toEqual(3);
+ expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+ true
+ );
+ });
+});
diff --git a/examples/__tests__/CustomPaging.test.js b/examples/__tests__/CustomPaging.test.js
new file mode 100644
index 000000000..c7d7b08d8
--- /dev/null
+++ b/examples/__tests__/CustomPaging.test.js
@@ -0,0 +1,94 @@
+import React from "react";
+import CustomPaging from "../CustomPaging";
+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("Custom Paging example", () => {
+ it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-slide").length).toBe(6);
+ });
+ it("should have 3 clone slides", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ expect(
+ container.querySelectorAll(".slick-slide.slick-current").length
+ ).toBe(1);
+ });
+ it("should have 1 active slide", function() {
+ const { container } = render();
+ expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have 6 dots", function() {
+ const { container } = render();
+ expect(
+ container.getElementsByClassName("slick-dots")[0].children.length
+ ).toBe(4);
+ });
+ it("should have 1 active dot", function() {
+ const { container } = render();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ clickNext(container);
+ 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();
+ clickPrevious(container);
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ expect(
+ container.querySelectorAll(".slick-dots")[0].children[3]
+ ).toHaveClass("slick-active");
+ });
+ it("should goto 4th slide when 4th dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ container.querySelectorAll(".slick-dots a")[3],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveSlidesCount(container)).toEqual(1);
+ expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+ true
+ );
+ });
+});
diff --git a/examples/__tests__/CustomSlides.js b/examples/__tests__/CustomSlides.js
new file mode 100644
index 000000000..a2c3d72f4
--- /dev/null
+++ b/examples/__tests__/CustomSlides.js
@@ -0,0 +1,135 @@
+import React from "react";
+import SimpleSlider from "../CustomSlides";
+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("Custom Slider example", () => {
+ it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-slide").length).toBe(8);
+ });
+ it("should have 3 clone slides", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ 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();
+ 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();
+ expect(
+ container.getElementsByClassName("slick-dots")[0].children.length
+ ).toBe(6);
+ });
+ it("should have 1 active dot", function() {
+ const { container } = render();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ 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();
+ 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();
+ 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
+ );
+ });
+});
+
+describe("Simple Slider Snapshots", function() {
+ it("slider initial state", function() {
+ const { container } = render();
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("click on next button", function() {
+ const { container } = render();
+ clickNext(container);
+ //expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("click on prev button", function() {
+ const { container } = render();
+ clickPrevious(container);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("click on 3rd dot", function() {
+ const { container } = render();
+ fireEvent(
+ getButtons(container)[2],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+});
diff --git a/examples/__tests__/DynamicSlides.test.js b/examples/__tests__/DynamicSlides.test.js
new file mode 100644
index 000000000..3148488fc
--- /dev/null
+++ b/examples/__tests__/DynamicSlides.test.js
@@ -0,0 +1,225 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+ activeSlide,
+ activeSlides,
+ clickNext,
+ clickPrevious,
+ getActiveButton,
+ getActiveSlidesCount,
+ getActiveSlidesText,
+ getButtons,
+ getButtonsLength,
+ getButtonsListItem,
+ getClonesCount,
+ getCurrentSlide,
+ getSlidesCount,
+ hasClass
+} from "../../test-utils";
+import DynamicSlides from "../DynamicSlides";
+
+describe("Multiple Items", function() {
+ it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function() {
+ const { container } = render();
+ expect(getSlidesCount(container)).toEqual(12);
+ expect(getClonesCount(container)).toEqual(6);
+ //expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 3 active slides", function() {
+ const { container } = render();
+ expect(getActiveSlidesCount(container)).toEqual(3);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 2 dots", function() {
+ const { container } = render();
+ expect(getButtonsLength(container)).toEqual(2);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show first 3 slides", function() {
+ const { container } = render();
+ expect(getActiveButton(container)).toEqual(["1"]);
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides from 4 to 6 when next button is clicked", function() {
+ const { container } = render();
+ clickNext(container);
+ // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))
+ expect(getActiveButton(container)).toEqual(["2"]);
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show last 3 slides when previous button is clicked", function() {
+ const { container } = render();
+ clickPrevious(container);
+ expect(getActiveButton(container)).toEqual(["2"]);
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides first 3 slides when first dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ getButtons(container)[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["1"]);
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides from 4 to 6 when last dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ getButtons(container)[1],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["2"]);
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function() {
+ const { container } = render();
+ fireEvent(
+ container.getElementsByClassName("button")[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getSlidesCount(container)).toEqual(15);
+ expect(getClonesCount(container)).toEqual(6);
+ //expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 3 active slides", function() {
+ const { container } = render();
+ fireEvent(
+ container.getElementsByClassName("button")[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveSlidesCount(container)).toEqual(3);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 3 dots", function() {
+ const { container } = render();
+ fireEvent(
+ container.getElementsByClassName("button")[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getButtonsLength(container)).toEqual(3);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show first 3 slides", function() {
+ const { container } = render();
+ fireEvent(
+ container.getElementsByClassName("button")[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["1"]);
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides from 4 to 6 when next button is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ container.getElementsByClassName("button")[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ clickNext(container);
+ // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))
+ expect(getActiveButton(container)).toEqual(["2"]);
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show last 3 slides when previous button is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ container.getElementsByClassName("button")[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ clickPrevious(container);
+ expect(getActiveButton(container)).toEqual(["3"]);
+ expect(getActiveSlidesText(container)).toEqual(["7", "8", "9"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides first 3 slides when first dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ container.getElementsByClassName("button")[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ fireEvent(
+ getButtons(container)[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["1"]);
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides from 4 to 6 when middle dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ container.getElementsByClassName("button")[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ fireEvent(
+ getButtons(container)[1],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["2"]);
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show last 3 slides when last dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ container.getElementsByClassName("button")[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ fireEvent(
+ getButtons(container)[2],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["3"]);
+ expect(getActiveSlidesText(container)).toEqual(["7", "8", "9"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+});
diff --git a/examples/__tests__/LazyLoad.test.js b/examples/__tests__/LazyLoad.test.js
new file mode 100644
index 000000000..a9348d6aa
--- /dev/null
+++ b/examples/__tests__/LazyLoad.test.js
@@ -0,0 +1,94 @@
+import React from "react";
+import LazyLoad from "../LazyLoad";
+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("Custom Paging example", () => {
+ it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-slide").length).toBe(6);
+ });
+ it("should have 3 clone slides", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ expect(
+ container.querySelectorAll(".slick-slide.slick-current").length
+ ).toBe(1);
+ });
+ it("should have 1 active slide", function() {
+ const { container } = render();
+ expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have 6 dots", function() {
+ const { container } = render();
+ expect(
+ container.getElementsByClassName("slick-dots")[0].children.length
+ ).toBe(4);
+ });
+ it("should have 1 active dot", function() {
+ const { container } = render();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ clickNext(container);
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ expect(
+ container.querySelectorAll(".slick-dots")[0].children[3]
+ ).toHaveClass("slick-active");
+ });
+ it("should goto previous slide when prev button is clicked", function() {
+ const { container } = render();
+ clickPrevious(container);
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ expect(
+ container.querySelectorAll(".slick-dots")[0].children[1]
+ ).toHaveClass("slick-active");
+ });
+ it("should goto 4th slide when 4th dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ container.querySelectorAll(".slick-dots button")[3],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveSlidesCount(container)).toEqual(1);
+ expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+ true
+ );
+ });
+});
diff --git a/examples/__tests__/MultipleRows.test.js b/examples/__tests__/MultipleRows.test.js
new file mode 100644
index 000000000..84a89314f
--- /dev/null
+++ b/examples/__tests__/MultipleRows.test.js
@@ -0,0 +1,60 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+ activeSlide,
+ activeSlides,
+ clickNext,
+ clickPrevious,
+ getActiveButton,
+ getActiveSlidesCount,
+ getActiveSlidesText,
+ getButtons,
+ getButtonsLength,
+ getButtonsListItem,
+ getClonesCount,
+ getCurrentSlide,
+ getSlidesCount,
+ hasClass
+} from "../../test-utils";
+import MultipleRows from "../MultipleRows";
+
+describe("Multiple Items", function() {
+ it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function() {
+ const { container } = render();
+ expect(getSlidesCount(container)).toEqual(12);
+ expect(getClonesCount(container)).toEqual(8);
+ //expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 3 active slides", function() {
+ const { container } = render();
+ expect(getActiveSlidesCount(container)).toEqual(3);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show first 3 slides", function() {
+ const { container } = render();
+ expect(getActiveSlidesText(container)).toEqual([
+ "13141516",
+ "1234",
+ "5678"
+ ]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides from 4 to 6 when next button is clicked", function() {
+ const { container } = render();
+ clickNext(container);
+ // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))
+ expect(getActiveSlidesText(container)).toEqual(["1234", "5678", "9101112"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show last 3 slides when previous button is clicked", function() {
+ const { container } = render();
+ clickPrevious(container);
+ expect(getActiveSlidesText(container)).toEqual([
+ "9101112",
+ "13141516",
+ "1234"
+ ]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+});
diff --git a/examples/__tests__/PauseOnHover.test.js b/examples/__tests__/PauseOnHover.test.js
new file mode 100644
index 000000000..461945682
--- /dev/null
+++ b/examples/__tests__/PauseOnHover.test.js
@@ -0,0 +1,118 @@
+import React from "react";
+import PauseOnHover from "../PauseOnHover";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html, js_beautify } from "js-beautify";
+import jest from "jest";
+import {
+ getActiveSlide,
+ clickNext,
+ clickPrevious,
+ hasClass,
+ getActiveSlides,
+ getActiveSlidesCount,
+ getActiveSlidesText,
+ getButtons,
+ getButtonsListItem,
+ getCurrentSlide,
+ getSlideHeight
+} from "../../test-utils";
+describe("Pause On Hover example", () => {
+ it("should have 8 slides (3(preclone) + 6(actual) + 3(postclone))", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-slide").length).toBe(12);
+ });
+ it("should have 3 clone slides", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(6);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ expect(
+ container.querySelectorAll(".slick-slide.slick-current").length
+ ).toBe(1);
+ expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+ });
+ it("should have 3 active slide", function() {
+ const { container } = render();
+ expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+ 3
+ );
+ expect(
+ Array.from(getActiveSlide(container).children).map(
+ e => parseInt(e.textContent) - 1
+ )[0]
+ ).toBe(0);
+ });
+ it("should have 6 dots", function() {
+ const { container } = render();
+ expect(
+ container.getElementsByClassName("slick-dots")[0].children.length
+ ).toBe(6);
+ });
+ it("should have 1 active dot", function() {
+ const { container } = render();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ 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();
+ 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();
+ fireEvent(
+ container.querySelectorAll(".slick-dots button")[3],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ expect(getActiveSlidesCount(container)).toEqual(3);
+ expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+ true
+ );
+ });
+ it("Should change the active slides automatically", async function() {
+ const { container } = render();
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ await waitFor(
+ () => {
+ expect(getActiveSlidesText(container)).toEqual(["2", "3", "4"]);
+ },
+ { timeout: "3000" }
+ );
+ });
+});
diff --git a/examples/__tests__/PreviousNextMethods.test.js b/examples/__tests__/PreviousNextMethods.test.js
new file mode 100644
index 000000000..670a1b7a1
--- /dev/null
+++ b/examples/__tests__/PreviousNextMethods.test.js
@@ -0,0 +1,146 @@
+import React from "react";
+import PreviousNextMethods from "../PreviousNextMethods";
+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("SimpleSlider example", () => {
+ it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-slide").length).toBe(8);
+ });
+ it("should have 3 clone slides", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(2);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ 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();
+ 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();
+ expect(
+ container.getElementsByClassName("slick-dots")[0].children.length
+ ).toBe(6);
+ });
+ it("should have 1 active dot", function() {
+ const { container } = render();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ 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();
+ 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();
+ 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
+ );
+ });
+
+ // it("should got to next slide when next button is clicked", function() {
+ // const { container } = render();
+ // Array.from(container.getElementsByClassName("button")).forEach(e=>e.textContent==="Next"?fireEvent(
+ // e,
+ // new MouseEvent("click", {
+ // bubbles: true,
+ // cancelable: true
+ // })
+ // ):null)
+ // 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();
+ // Array.from(container.getElementsByClassName("button")).forEach(e=>e.textContent==="Previous"?fireEvent(
+ // e,
+ // new MouseEvent("click", {
+ // bubbles: true,
+ // cancelable: true
+ // })
+ // ):null)
+ // 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");
+ // });
+});
diff --git a/examples/__tests__/Resizeable.test.js b/examples/__tests__/Resizeable.test.js
new file mode 100644
index 000000000..9327a3313
--- /dev/null
+++ b/examples/__tests__/Resizeable.test.js
@@ -0,0 +1,109 @@
+import React from "react";
+import Resizable from "../Resizable";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html, js_beautify } from "js-beautify";
+import jest from "jest";
+import {
+ getActiveSlide,
+ clickNext,
+ clickPrevious,
+ hasClass,
+ getActiveSlides,
+ getActiveSlidesCount,
+ getActiveSlidesText,
+ getButtons,
+ getButtonsListItem,
+ getCurrentSlide,
+ getSlideHeight
+} from "../../test-utils";
+
+describe("Resizeable example", () => {
+ it("should have 8 slides (3(preclone) + 6(actual) + 3(postclone))", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-slide").length).toBe(12);
+ });
+ it("should have 3 clone slides", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(6);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ expect(
+ container.querySelectorAll(".slick-slide.slick-current").length
+ ).toBe(1);
+ expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+ });
+ it("should have 3 active slide", function() {
+ const { container } = render();
+ expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+ 3
+ );
+ expect(
+ Array.from(getActiveSlide(container).children).map(
+ e => parseInt(e.textContent) - 1
+ )[0]
+ ).toBe(0);
+ });
+ it("should have 6 dots", function() {
+ const { container } = render();
+ expect(
+ container.getElementsByClassName("slick-dots")[0].children.length
+ ).toBe(6);
+ });
+ it("should have 1 active dot", function() {
+ const { container } = render();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ 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();
+ 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();
+ fireEvent(
+ container.querySelectorAll(".slick-dots button")[3],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ expect(getActiveSlidesCount(container)).toEqual(3);
+ expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+ true
+ );
+ });
+});
diff --git a/examples/__tests__/Responsive.test.js b/examples/__tests__/Responsive.test.js
new file mode 100644
index 000000000..206009688
--- /dev/null
+++ b/examples/__tests__/Responsive.test.js
@@ -0,0 +1,85 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+ activeSlide,
+ activeSlides,
+ clickNext,
+ clickPrevious,
+ getActiveButton,
+ getActiveSlidesCount,
+ getActiveSlidesText,
+ getButtons,
+ getButtonsLength,
+ getButtonsListItem,
+ getClonesCount,
+ getCurrentSlide,
+ getSlidesCount,
+ hasClass
+} from "../../test-utils";
+import Responsive from "../Responsive";
+
+describe("Responsive Items", function() {
+ it("should have 8 actual slides", function() {
+ const { container } = render();
+ expect(getSlidesCount(container)).toEqual(8);
+ //expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 4 active slides", function() {
+ const { container } = render();
+ expect(getActiveSlidesCount(container)).toEqual(4);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 2 dots", function() {
+ const { container } = render();
+ expect(getButtonsLength(container)).toEqual(2);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show first 4 slides", function() {
+ const { container } = render();
+ expect(getActiveButton(container)).toEqual(["1"]);
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3", "4"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides from 5 to 8 when next button is clicked", function() {
+ const { container } = render();
+ clickNext(container);
+ // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))
+ expect(getActiveButton(container)).toEqual(["2"]);
+ expect(getActiveSlidesText(container)).toEqual(["5", "6", "7", "8"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show first 4 slides when previous button is clicked from last 4 slides", function() {
+ const { container } = render();
+ clickPrevious(container);
+ expect(getActiveButton(container)).toEqual(["1"]);
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3", "4"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides first 4 slides when first dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ getButtons(container)[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["1"]);
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3", "4"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides from 5 to 6 when second dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ getButtons(container)[1],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["2"]);
+ expect(getActiveSlidesText(container)).toEqual(["5", "6", "7", "8"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+});
diff --git a/examples/__tests__/Rtl.test.js b/examples/__tests__/Rtl.test.js
new file mode 100644
index 000000000..49e7e9762
--- /dev/null
+++ b/examples/__tests__/Rtl.test.js
@@ -0,0 +1,119 @@
+import React from "react";
+import Rtl from "../Rtl";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html, js_beautify } from "js-beautify";
+import jest from "jest";
+import {
+ getActiveSlide,
+ clickNext,
+ clickPrevious,
+ hasClass,
+ getActiveSlides,
+ getActiveSlidesCount,
+ getActiveSlidesText,
+ getButtons,
+ getButtonsListItem,
+ getCurrentSlide,
+ getSlideHeight
+} from "../../test-utils";
+
+describe.skip("Right To Left example", () => {
+ it("should have 8 slides (3(preclone) + 6(actual) + 3(postclone))", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-slide").length).toBe(12);
+ });
+ it("should have 3 clone slides", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(6);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ expect(
+ container.querySelectorAll(".slick-slide.slick-current").length
+ ).toBe(1);
+ expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
+ });
+ it("should have 3 active slide", function() {
+ const { container } = render();
+ expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+ 3
+ );
+ expect(
+ Array.from(getActiveSlide(container).children).map(
+ e => parseInt(e.textContent) - 1
+ )[0]
+ ).toBe(0);
+ });
+ it("should have 6 dots", function() {
+ const { container } = render();
+ expect(
+ container.getElementsByClassName("slick-dots")[0].children.length
+ ).toBe(6);
+ });
+ it("should have 1 active dot", function() {
+ const { container } = render();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ 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();
+ 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();
+ fireEvent(
+ container.querySelectorAll(".slick-dots button")[3],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ expect(getActiveSlidesCount(container)).toEqual(3);
+ expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+ true
+ );
+ });
+ it("Should change the active slides automatically", async function() {
+ const { container } = render();
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ await waitFor(
+ () => {
+ expect(getActiveSlidesText(container)).toEqual(["2", "3", "4"]);
+ },
+ { timeout: "3000" }
+ );
+ });
+});
diff --git a/examples/__tests__/SwipeToSlide.test.js b/examples/__tests__/SwipeToSlide.test.js
new file mode 100644
index 000000000..2bdbdb2ef
--- /dev/null
+++ b/examples/__tests__/SwipeToSlide.test.js
@@ -0,0 +1,52 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+ activeSlide,
+ activeSlides,
+ clickNext,
+ clickPrevious,
+ getActiveButton,
+ getActiveSlidesCount,
+ getActiveSlidesText,
+ getButtons,
+ getButtonsLength,
+ getButtonsListItem,
+ getClonesCount,
+ getCurrentSlide,
+ getSlidesCount,
+ hasClass
+} from "../../test-utils";
+import SwipeToSlide from "../SwipeToSlide";
+
+describe("Multiple Items", function() {
+ it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function() {
+ const { container } = render();
+ expect(getSlidesCount(container)).toEqual(19);
+ expect(getClonesCount(container)).toEqual(10);
+ //expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 5 active slides", function() {
+ const { container } = render();
+ expect(getActiveSlidesCount(container)).toEqual(5);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show first 5 slides", function() {
+ const { container } = render();
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3", "4", "5"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides from 2 to 6 when next button is clicked", function() {
+ const { container } = render();
+ clickNext(container);
+ // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))x
+ expect(getActiveSlidesText(container)).toEqual(["2", "3", "4", "5", "6"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show last 5 slides when previous button is clicked", function() {
+ const { container } = render();
+ clickPrevious(container);
+ expect(getActiveSlidesText(container)).toEqual(["9", "1", "2", "3", "4"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+});
diff --git a/examples/__tests__/VariableWidth.test.js b/examples/__tests__/VariableWidth.test.js
new file mode 100644
index 000000000..b186b6a9c
--- /dev/null
+++ b/examples/__tests__/VariableWidth.test.js
@@ -0,0 +1,107 @@
+import React from "react";
+import VariableWidth from "../VariableWidth";
+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("Variable Width example", () => {
+ it("should have 10 slides (2(preclone) + 6(actual) + 2(postclone))", function() {
+ const { container } = render();
+ //Should be 10
+ expect(container.getElementsByClassName("slick-slide").length).toBe(18);
+ });
+ it("should have 4 clone slides", function() {
+ const { container } = render();
+ //Should be 4
+ expect(container.getElementsByClassName("slick-cloned").length).toBe(12);
+ });
+ it("should have 1 current slide", function() {
+ const { container } = render();
+ expect(
+ container.querySelectorAll(".slick-slide.slick-current").length
+ ).toBe(1);
+ expect(getCurrentSlide(container).textContent).toBe("100");
+ });
+ it("should have 1 active slide", function() {
+ const { container } = render();
+ expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
+ 1
+ );
+ expect(
+ Array.from(getActiveSlide(container).children).map(e => e.textContent)[0]
+ ).toBe("100");
+ });
+ it("should have 6 dots", function() {
+ const { container } = render();
+ expect(
+ container.getElementsByClassName("slick-dots")[0].children.length
+ ).toBe(6);
+ });
+ it("should have 1 active dot", function() {
+ const { container } = render();
+
+ expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
+ 1
+ );
+ });
+ it("should have a prev arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-prev").length).toBe(1);
+ });
+ it("should have a next arrow", function() {
+ const { container } = render();
+ expect(container.getElementsByClassName("slick-next").length).toBe(1);
+ });
+ it("should got to next slide when next button is clicked", function() {
+ const { container } = render();
+ clickNext(container);
+ expect(
+ container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+ ).toBe("200");
+ 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();
+ clickPrevious(container);
+ expect(
+ container.querySelectorAll(".slick-slide.slick-active")[0].textContent
+ ).toBe("175");
+ 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();
+ fireEvent(
+ container.querySelectorAll(".slick-dots button")[3],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveSlidesText(container)[0]).toEqual("300");
+ expect(getActiveSlidesCount(container)).toEqual(1);
+ expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
+ true
+ );
+ });
+});
diff --git a/examples/__tests__/VerticleSets.test.js b/examples/__tests__/VerticleSets.test.js
new file mode 100644
index 000000000..a643a2596
--- /dev/null
+++ b/examples/__tests__/VerticleSets.test.js
@@ -0,0 +1,179 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import VerticleMode from "../VerticalMode";
+import VerticalSwipeToSlide from "../VerticalSwipeToSlide";
+import { html as beautify_html } from "js-beautify";
+import {
+ activeSlide,
+ activeSlides,
+ clickNext,
+ clickPrevious,
+ getActiveButton,
+ getActiveSlidesCount,
+ getActiveSlidesText,
+ getButtons,
+ getButtonsLength,
+ getButtonsListItem,
+ getClonesCount,
+ getCurrentSlide,
+ getSlidesCount,
+ hasClass
+} from "../../test-utils";
+
+describe("Verticle Mode testing", function() {
+ it("should have 9 actual slides and (1(pre) + 1(post)) clone slides", function() {
+ const { container } = render();
+ expect(getSlidesCount(container)).toEqual(12);
+ expect(getClonesCount(container)).toEqual(6);
+ //expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 3 active slides", function() {
+ const { container } = render();
+ expect(getActiveSlidesCount(container)).toEqual(3);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 3 dots", function() {
+ const { container } = render();
+ expect(getButtonsLength(container)).toEqual(6);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show first 3 slides", function() {
+ const { container } = render();
+ expect(getActiveButton(container)).toEqual(["1"]);
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides from 4 to 6 when next button is clicked", function() {
+ const { container } = render();
+ clickNext(container);
+ // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))
+ expect(getActiveButton(container)).toEqual(["2"]);
+ expect(getActiveSlidesText(container)).toEqual(["2", "3", "4"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show last 3 slides when previous button is clicked", function() {
+ const { container } = render();
+ clickPrevious(container);
+ expect(getActiveButton(container)).toEqual(["6"]);
+ expect(getActiveSlidesText(container)).toEqual(["6", "1", "2"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides first 3 slides when first dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ getButtons(container)[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["1"]);
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides from 4 to 6 when fourth dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ getButtons(container)[3],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["4"]);
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show last 3 slides when last dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ getButtons(container)[5],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["6"]);
+ expect(getActiveSlidesText(container)).toEqual(["6", "1", "2"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+});
+
+describe("VerticleSwipeToSlide Mode testing", function() {
+ it("should have 9 actual slides and (1(pre) + 1(post)) clone slides", function() {
+ const { container } = render();
+ expect(getSlidesCount(container)).toEqual(12);
+ expect(getClonesCount(container)).toEqual(6);
+ //expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 3 active slides", function() {
+ const { container } = render();
+ expect(getActiveSlidesCount(container)).toEqual(3);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should have 3 dots", function() {
+ const { container } = render();
+ expect(getButtonsLength(container)).toEqual(6);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show first 3 slides", function() {
+ const { container } = render();
+ expect(getActiveButton(container)).toEqual(["1"]);
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides from 4 to 6 when next button is clicked", function() {
+ const { container } = render();
+ clickNext(container);
+ // Array.from(container.querySelectorAll(".slick-current")).map(e=>console.log(e.textContent))
+ expect(getActiveButton(container)).toEqual(["2"]);
+ expect(getActiveSlidesText(container)).toEqual(["2", "3", "4"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show last 3 slides when previous button is clicked", function() {
+ const { container } = render();
+ clickPrevious(container);
+ expect(getActiveButton(container)).toEqual(["6"]);
+ expect(getActiveSlidesText(container)).toEqual(["6", "1", "2"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides first 3 slides when first dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ getButtons(container)[0],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["1"]);
+ expect(getActiveSlidesText(container)).toEqual(["1", "2", "3"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show slides from 4 to 6 when fourth dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ getButtons(container)[3],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["4"]);
+ expect(getActiveSlidesText(container)).toEqual(["4", "5", "6"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+ it("should show last 3 slides when last dot is clicked", function() {
+ const { container } = render();
+ fireEvent(
+ getButtons(container)[5],
+ new MouseEvent("click", {
+ bubbles: true,
+ cancelable: true
+ })
+ );
+ expect(getActiveButton(container)).toEqual(["6"]);
+ expect(getActiveSlidesText(container)).toEqual(["6", "1", "2"]);
+ // expect(beautify_html(toString(container))).toMatchSnapshot();
+ });
+});