From 55c543ca897014f32d0b2759f1cd8935d5089474 Mon Sep 17 00:00:00 2001 From: Pratyush Bhatnagar <38534434+pratyushbh@users.noreply.github.com> Date: Thu, 8 Jun 2023 15:40:40 +0530 Subject: [PATCH 1/8] Solved the multiple clones issues --- __test__/jQSlickUtils.js | 6 ++++-- __test__/mount/centerMode.test.js | 4 ++-- __test__/mount/simple.test.js | 2 +- examples/__tests__/CentreMode.test.js | 4 ++-- examples/__tests__/MultipleItems.test.js | 6 +++--- examples/__tests__/SimpleSlider.test.js | 8 ++++---- examples/__tests__/UnevenSets.test.js | 4 ++-- package.json | 3 ++- src/track.js | 15 ++++++++++----- src/utils/innerSliderUtils.js | 18 ++++++++++++------ 10 files changed, 42 insertions(+), 28 deletions(-) diff --git a/__test__/jQSlickUtils.js b/__test__/jQSlickUtils.js index e8d2ff77b..47525c689 100644 --- a/__test__/jQSlickUtils.js +++ b/__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")) { diff --git a/__test__/mount/centerMode.test.js b/__test__/mount/centerMode.test.js index aab6601d5..e0f2dc06e 100644 --- a/__test__/mount/centerMode.test.js +++ b/__test__/mount/centerMode.test.js @@ -34,8 +34,8 @@ const testsUtil = (settings, actions, keys) => { // 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) + expect(reactDetails.clonedSlides.map(slide => slide.value)).toEqual( + jqDetails.clonedSlides.map(slide => slide.value) ); }); test("checking all slides jQuery vs react", () => { diff --git a/__test__/mount/simple.test.js b/__test__/mount/simple.test.js index 9b9001f78..890ec4548 100644 --- a/__test__/mount/simple.test.js +++ b/__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) diff --git a/examples/__tests__/CentreMode.test.js b/examples/__tests__/CentreMode.test.js index d2c3c5191..5ccab1f1e 100644 --- a/examples/__tests__/CentreMode.test.js +++ b/examples/__tests__/CentreMode.test.js @@ -17,8 +17,8 @@ describe("CenterMode Tests", () => { let totalSlides = getSlidesCount(container); let clonedSlides = getClonesCount(container); let activeSlides = getActiveSlidesCount(container); - expect(totalSlides).toEqual(16); - expect(clonedSlides).toEqual(10); + expect(totalSlides).toEqual(14); + expect(clonedSlides).toEqual(8); expect(activeSlides).toEqual(3); //expect(beautify_html(toString(container))).toMatchSnapshot(); }); diff --git a/examples/__tests__/MultipleItems.test.js b/examples/__tests__/MultipleItems.test.js index 1adc83daa..334929811 100644 --- a/examples/__tests__/MultipleItems.test.js +++ b/examples/__tests__/MultipleItems.test.js @@ -20,10 +20,10 @@ import { import MultipleItems from "../MultipleItems"; describe("Multiple Items", function() { - it("should have 9 actual slides and (3(pre) + 9(post)) clone slides", function() { + it("should have 9 actual slides and (3(pre) + 3(post)) clone slides", function() { const { container } = render(); - expect(getSlidesCount(container)).toEqual(21); - expect(getClonesCount(container)).toEqual(12); + expect(getSlidesCount(container)).toEqual(15); + expect(getClonesCount(container)).toEqual(6); //expect(beautify_html(toString(container))).toMatchSnapshot(); }); it("should have 3 active slides", function() { diff --git a/examples/__tests__/SimpleSlider.test.js b/examples/__tests__/SimpleSlider.test.js index 71402cbbb..1289ffaff 100644 --- a/examples/__tests__/SimpleSlider.test.js +++ b/examples/__tests__/SimpleSlider.test.js @@ -16,13 +16,13 @@ import { } from "../../test-utils"; describe("SimpleSlider example", () => { - it("should have 13 slides (1(preclone) + 6(actual) + 6(postclone))", function() { + it("should have 13 slides (1(preclone) + 6(actual) + 1(postclone))", function() { const { container } = render(); - expect(container.getElementsByClassName("slick-slide").length).toBe(13); + expect(container.getElementsByClassName("slick-slide").length).toBe(8); }); - it("should have 7 clone slides", function() { + it("should have 3 clone slides", function() { const { container } = render(); - expect(container.getElementsByClassName("slick-cloned").length).toBe(7); + expect(container.getElementsByClassName("slick-cloned").length).toBe(2); }); it("should have 1 current slide", function() { const { container } = render(); diff --git a/examples/__tests__/UnevenSets.test.js b/examples/__tests__/UnevenSets.test.js index eff2f9dcf..0f4ed92a9 100644 --- a/examples/__tests__/UnevenSets.test.js +++ b/examples/__tests__/UnevenSets.test.js @@ -82,8 +82,8 @@ describe("UnevenSets Infinite", () => { let clonedSlides = getClonesCount(container); let activeSlides = getActiveSlidesCount(container); let dots = getButtonsLength(container); - expect(totalSlides).toEqual(16); - expect(clonedSlides).toEqual(10); + expect(totalSlides).toEqual(14); + expect(clonedSlides).toEqual(8); expect(activeSlides).toEqual(4); expect(dots).toEqual(2); // expect(beautify_html(toString(container))).toMatchSnapshot(); diff --git a/package.json b/package.json index 6425e7f7d..93a283abf 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "react": "^18.0.0", "react-dom": "^18.0.0", "sinon": "^2.1.0", - "slick-carousel": "^1.8.1", + "slick-carousel": "^1.6.0", "style-loader": "^0.16.1", "uglifyjs-webpack-plugin": "^2.0.1", "webpack": "^4.21.0", @@ -84,6 +84,7 @@ "@testing-library/user-event": "^14.3.0", "classnames": "^2.2.5", "enquire.js": "^2.1.6", + "jquery": "^3.7.0", "json2mq": "^0.2.0", "lodash.debounce": "^4.0.8", "resize-observer-polyfill": "^1.5.0" diff --git a/src/track.js b/src/track.js index f8924c826..68b17f4a3 100644 --- a/src/track.js +++ b/src/track.js @@ -5,7 +5,8 @@ import classnames from "classnames"; import { lazyStartIndex, lazyEndIndex, - getPreClones + getPreClones, + getPostClones } from "./utils/innerSliderUtils"; // given specifications/props for a slide, fetch all the classes that need to be applied to the slide @@ -18,7 +19,8 @@ const getSlideClasses = spec => { } else { index = spec.index; } - slickCloned = index < 0 || index >= spec.slideCount; + slickCloned = + (index < spec.slidesToShow && index < 0) || index >= spec.slideCount; if (spec.centerMode) { centerOffset = Math.floor(spec.slidesToShow / 2); slickCenter = (index - spec.currentSlide) % spec.slideCount === 0; @@ -163,9 +165,12 @@ const renderSlides = spec => { }) ); } - - if (childrenCount !== spec.slidesToShow) { - key = childrenCount + index; + let postCloneNo = index; + if ( + postCloneNo < getPostClones(spec) && + childrenCount !== spec.slidesToShow + ) { + key = postCloneNo + childrenCount; if (key < endIndex) { child = elem; } diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index c06029d0a..c5ce2f2da 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -6,10 +6,10 @@ export function clamp(number, lowerBound, upperBound) { export const safePreventDefault = event => { const passiveEvents = ["onTouchStart", "onTouchMove", "onWheel"]; - if(!passiveEvents.includes(event._reactName)) { + if (!passiveEvents.includes(event._reactName)) { event.preventDefault(); } -} +}; export const getOnDemandLazySlides = spec => { let onDemandSlides = []; @@ -386,9 +386,12 @@ export const swipeMove = (e, spec) => { let touchSwipeLength = touchObject.swipeLength; if (!infinite) { if ( - (currentSlide === 0 && (swipeDirection === "right" || swipeDirection === "down")) || - (currentSlide + 1 >= dotCount && (swipeDirection === "left" || swipeDirection === "up")) || - (!canGoNext(spec) && (swipeDirection === "left" || swipeDirection === "up")) + (currentSlide === 0 && + (swipeDirection === "right" || swipeDirection === "down")) || + (currentSlide + 1 >= dotCount && + (swipeDirection === "left" || swipeDirection === "up")) || + (!canGoNext(spec) && + (swipeDirection === "left" || swipeDirection === "up")) ) { touchSwipeLength = touchObject.swipeLength * edgeFriction; if (edgeDragged === false && onEdge) { @@ -784,7 +787,10 @@ export const getPostClones = spec => { if (spec.unslick || !spec.infinite) { return 0; } - return spec.slideCount; + if (spec.variableWidth) { + return spec.slideCount; + } + return spec.slidesToShow + (spec.centerMode ? 1 : 0); }; export const getTotalSlides = spec => From c54d6c07a662df474dd263ce855182d5ede03faa Mon Sep 17 00:00:00 2001 From: Pratyush Bhatnagar <38534434+pratyushbh@users.noreply.github.com> Date: Thu, 8 Jun 2023 15:43:47 +0530 Subject: [PATCH 2/8] replaced the value by index in clone test of mount testing of center Mode --- __test__/mount/centerMode.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/__test__/mount/centerMode.test.js b/__test__/mount/centerMode.test.js index e0f2dc06e..aab6601d5 100644 --- a/__test__/mount/centerMode.test.js +++ b/__test__/mount/centerMode.test.js @@ -34,8 +34,8 @@ const testsUtil = (settings, actions, keys) => { // Following two tests fail test("checking cloned slides jQuery vs react", () => { - expect(reactDetails.clonedSlides.map(slide => slide.value)).toEqual( - jqDetails.clonedSlides.map(slide => slide.value) + expect(reactDetails.clonedSlides.map(slide => slide.index)).toEqual( + jqDetails.clonedSlides.map(slide => slide.index) ); }); test("checking all slides jQuery vs react", () => { From edfe540c84b28eab967a3df5c143d0597d571ff2 Mon Sep 17 00:00:00 2001 From: Pratyush Bhatnagar <38534434+pratyushbh@users.noreply.github.com> Date: Thu, 15 Jun 2023 16:47:07 +0530 Subject: [PATCH 3/8] written the tests of all the examples --- examples/__tests__/AdaptiveHeight.test.js | 107 +++++++ examples/__tests__/AppendDots.test.js | 125 ++++++++ examples/__tests__/AsNavFor.test.js | 104 +++++++ examples/__tests__/AutoPlay.test.js | 284 ++++++++++++++++++ examples/__tests__/CustomArrow.test.js | 112 +++++++ examples/__tests__/CustomPaging.test.js | 94 ++++++ examples/__tests__/CustomSlides.js | 135 +++++++++ examples/__tests__/DynamicSlides.test.js | 225 ++++++++++++++ examples/__tests__/LazyLoad.test.js | 94 ++++++ examples/__tests__/MultipleRows.test.js | 60 ++++ examples/__tests__/PauseOnHover.test.js | 118 ++++++++ .../__tests__/PreviousNextMethods.test.js | 146 +++++++++ examples/__tests__/Resizeable.test.js | 109 +++++++ examples/__tests__/Responsive.test.js | 85 ++++++ examples/__tests__/Rtl.test.js | 119 ++++++++ examples/__tests__/SwipeToSlide.test.js | 52 ++++ examples/__tests__/VariableWidth.test.js | 107 +++++++ examples/__tests__/VerticleSets.test.js | 179 +++++++++++ 18 files changed, 2255 insertions(+) create mode 100644 examples/__tests__/AdaptiveHeight.test.js create mode 100644 examples/__tests__/AppendDots.test.js create mode 100644 examples/__tests__/AsNavFor.test.js create mode 100644 examples/__tests__/AutoPlay.test.js create mode 100644 examples/__tests__/CustomArrow.test.js create mode 100644 examples/__tests__/CustomPaging.test.js create mode 100644 examples/__tests__/CustomSlides.js create mode 100644 examples/__tests__/DynamicSlides.test.js create mode 100644 examples/__tests__/LazyLoad.test.js create mode 100644 examples/__tests__/MultipleRows.test.js create mode 100644 examples/__tests__/PauseOnHover.test.js create mode 100644 examples/__tests__/PreviousNextMethods.test.js create mode 100644 examples/__tests__/Resizeable.test.js create mode 100644 examples/__tests__/Responsive.test.js create mode 100644 examples/__tests__/Rtl.test.js create mode 100644 examples/__tests__/SwipeToSlide.test.js create mode 100644 examples/__tests__/VariableWidth.test.js create mode 100644 examples/__tests__/VerticleSets.test.js 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(); + }); +}); From e574c9c450e78230c3bc4b89f0da3f825f0e0042 Mon Sep 17 00:00:00 2001 From: Pratyush Bhatnagar <38534434+pratyushbh@users.noreply.github.com> Date: Fri, 30 Jun 2023 11:46:43 +0530 Subject: [PATCH 4/8] experimenting --- examples/AutoPlay.js | 1 + examples/MultipleItems.js | 4 ++-- examples/SimpleSlider.js | 1 + src/dots.js | 10 ++++++++++ src/inner-slider.js | 29 +++++++++++++++++++++++------ src/utils/innerSliderUtils.js | 23 ++++++++++++++++++++++- 6 files changed, 59 insertions(+), 9 deletions(-) diff --git a/examples/AutoPlay.js b/examples/AutoPlay.js index 452ea8659..44fee0d8b 100644 --- a/examples/AutoPlay.js +++ b/examples/AutoPlay.js @@ -10,6 +10,7 @@ function AutoPlay() { autoplay: true, speed: 2000, autoplaySpeed: 2000, + pauseOnFocus: true, cssEase: "linear" }; return ( diff --git a/examples/MultipleItems.js b/examples/MultipleItems.js index 2634fdd93..889eaeddb 100644 --- a/examples/MultipleItems.js +++ b/examples/MultipleItems.js @@ -25,7 +25,7 @@ function MultipleItems() {

4

-
+ {/*

5

@@ -39,7 +39,7 @@ function MultipleItems() {

9

-
+
*/} ); diff --git a/examples/SimpleSlider.js b/examples/SimpleSlider.js index ee06df7a3..2a998383a 100644 --- a/examples/SimpleSlider.js +++ b/examples/SimpleSlider.js @@ -8,6 +8,7 @@ function SimpleSlider(props) { speed: 500, slidesToShow: 1, slidesToScroll: 1, + initialSlide: 5, ...props }; return ( diff --git a/src/dots.js b/src/dots.js index 93520cbd7..4f0e1eb98 100644 --- a/src/dots.js +++ b/src/dots.js @@ -2,6 +2,7 @@ import React from "react"; import classnames from "classnames"; +import { dotClicked, initializedState } from "./utils/innerSliderUtils"; import { clamp } from "./utils/innerSliderUtils"; const getDotCount = spec => { @@ -24,6 +25,11 @@ export class Dots extends React.PureComponent { // to next slide. That only goes away by click somewhere outside e.preventDefault(); this.props.clickHandler(options); + document.activeElement.addEventListener("blur", event => { + if (!dotClicked()) { + this.props.autoPlayHandler("play"); + } + }); } render() { const { @@ -34,6 +40,8 @@ export class Dots extends React.PureComponent { slidesToScroll, slidesToShow, slideCount, + autoplay, + autoplaying, currentSlide } = this.props; let dotCount = getDotCount({ @@ -65,6 +73,8 @@ export class Dots extends React.PureComponent { message: "dots", index: i, slidesToScroll, + autoplay, + autoplaying, currentSlide }; diff --git a/src/inner-slider.js b/src/inner-slider.js index b477bc2d1..35d1b906c 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -19,7 +19,12 @@ import { getPreClones, getPostClones, getTrackLeft, - getTrackCSS + getTrackCSS, + getActiveElementTagName, + getActiveParentTagName, + getActiveParentClassnames, + getActiveElementClassnames, + dotClicked } from "./utils/innerSliderUtils"; import { Track } from "./track"; @@ -96,6 +101,7 @@ export class InnerSlider extends React.Component { slide.onblur = this.props.pauseOnFocus ? this.onSlideBlur : null; } ); + console.log(this.props.pauseOnFocus); if (window.addEventListener) { window.addEventListener("resize", this.onWindowResized); } else { @@ -166,10 +172,11 @@ export class InnerSlider extends React.Component { } } } - // if (this.props.onLazyLoad) { - // this.props.onLazyLoad([leftMostSlide]) - // } - this.adaptHeight(); + document.querySelectorAll && + // if (this.props.onLazyLoad) { + // this.props.onLazyLoad([leftMostSlide]) + // } + this.adaptHeight(); let spec = { listRef: this.list, trackRef: this.track, @@ -438,6 +445,11 @@ export class InnerSlider extends React.Component { const nodes = this.list.querySelectorAll(".slick-current"); nodes[0] && nodes[0].focus(); } + window.addEventListener("click", event => { + if (this.props.autoplay && dotClicked()) { + this.pause("paused"); + } + }); }; clickHandler = e => { if (this.clickable === false) { @@ -669,11 +681,16 @@ export class InnerSlider extends React.Component { "children", "customPaging", "infinite", - "appendDots" + "appendDots", + "autoplay", + "autoplaying", + "autoplaySpeed" ]); const { pauseOnDotsHover } = this.props; dotProps = { ...dotProps, + autoPlayHandler: this.autoPlay, + pauseHandler: this.pause, clickHandler: this.changeSlide, onMouseEnter: pauseOnDotsHover ? this.onDotsLeave : null, onMouseOver: pauseOnDotsHover ? this.onDotsOver : null, diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index c5ce2f2da..23de16863 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -810,7 +810,28 @@ export const siblingDirection = spec => { return "left"; } }; - +export const getActiveElementClassnames = () => { + return document.activeElement.parentElement.classList.value.toString(); +}; +export const getActiveParentTagName = () => { + return document.activeElement.parentElement.tagName; +}; +export const getActiveParentClassnames = () => { + return document.activeElement.parentElement.classList.value.toString(); +}; +export const getActiveElementTagName = () => { + return document.activeElement.tagName; +}; +export const dotClicked = () => { + if ( + getActiveParentTagName() === "LI" && + getActiveParentClassnames() === "slick-active" + ) { + return true; + } else { + return false; + } +}; export const slidesOnRight = ({ slidesToShow, centerMode, From 47bb5eb7b402e05d6a353181aeadf1e54c80c38e Mon Sep 17 00:00:00 2001 From: Pratyush Bhatnagar <38534434+pratyushbh@users.noreply.github.com> Date: Fri, 30 Jun 2023 11:50:25 +0530 Subject: [PATCH 5/8] Revert "experimenting" This reverts commit e574c9c450e78230c3bc4b89f0da3f825f0e0042. --- examples/AutoPlay.js | 1 - examples/MultipleItems.js | 4 ++-- examples/SimpleSlider.js | 1 - src/dots.js | 10 ---------- src/inner-slider.js | 29 ++++++----------------------- src/utils/innerSliderUtils.js | 23 +---------------------- 6 files changed, 9 insertions(+), 59 deletions(-) diff --git a/examples/AutoPlay.js b/examples/AutoPlay.js index 44fee0d8b..452ea8659 100644 --- a/examples/AutoPlay.js +++ b/examples/AutoPlay.js @@ -10,7 +10,6 @@ function AutoPlay() { autoplay: true, speed: 2000, autoplaySpeed: 2000, - pauseOnFocus: true, cssEase: "linear" }; return ( diff --git a/examples/MultipleItems.js b/examples/MultipleItems.js index 889eaeddb..2634fdd93 100644 --- a/examples/MultipleItems.js +++ b/examples/MultipleItems.js @@ -25,7 +25,7 @@ function MultipleItems() {

4

- {/*
+

5

@@ -39,7 +39,7 @@ function MultipleItems() {

9

-
*/} +
); diff --git a/examples/SimpleSlider.js b/examples/SimpleSlider.js index 2a998383a..ee06df7a3 100644 --- a/examples/SimpleSlider.js +++ b/examples/SimpleSlider.js @@ -8,7 +8,6 @@ function SimpleSlider(props) { speed: 500, slidesToShow: 1, slidesToScroll: 1, - initialSlide: 5, ...props }; return ( diff --git a/src/dots.js b/src/dots.js index 4f0e1eb98..93520cbd7 100644 --- a/src/dots.js +++ b/src/dots.js @@ -2,7 +2,6 @@ import React from "react"; import classnames from "classnames"; -import { dotClicked, initializedState } from "./utils/innerSliderUtils"; import { clamp } from "./utils/innerSliderUtils"; const getDotCount = spec => { @@ -25,11 +24,6 @@ export class Dots extends React.PureComponent { // to next slide. That only goes away by click somewhere outside e.preventDefault(); this.props.clickHandler(options); - document.activeElement.addEventListener("blur", event => { - if (!dotClicked()) { - this.props.autoPlayHandler("play"); - } - }); } render() { const { @@ -40,8 +34,6 @@ export class Dots extends React.PureComponent { slidesToScroll, slidesToShow, slideCount, - autoplay, - autoplaying, currentSlide } = this.props; let dotCount = getDotCount({ @@ -73,8 +65,6 @@ export class Dots extends React.PureComponent { message: "dots", index: i, slidesToScroll, - autoplay, - autoplaying, currentSlide }; diff --git a/src/inner-slider.js b/src/inner-slider.js index 35d1b906c..b477bc2d1 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -19,12 +19,7 @@ import { getPreClones, getPostClones, getTrackLeft, - getTrackCSS, - getActiveElementTagName, - getActiveParentTagName, - getActiveParentClassnames, - getActiveElementClassnames, - dotClicked + getTrackCSS } from "./utils/innerSliderUtils"; import { Track } from "./track"; @@ -101,7 +96,6 @@ export class InnerSlider extends React.Component { slide.onblur = this.props.pauseOnFocus ? this.onSlideBlur : null; } ); - console.log(this.props.pauseOnFocus); if (window.addEventListener) { window.addEventListener("resize", this.onWindowResized); } else { @@ -172,11 +166,10 @@ export class InnerSlider extends React.Component { } } } - document.querySelectorAll && - // if (this.props.onLazyLoad) { - // this.props.onLazyLoad([leftMostSlide]) - // } - this.adaptHeight(); + // if (this.props.onLazyLoad) { + // this.props.onLazyLoad([leftMostSlide]) + // } + this.adaptHeight(); let spec = { listRef: this.list, trackRef: this.track, @@ -445,11 +438,6 @@ export class InnerSlider extends React.Component { const nodes = this.list.querySelectorAll(".slick-current"); nodes[0] && nodes[0].focus(); } - window.addEventListener("click", event => { - if (this.props.autoplay && dotClicked()) { - this.pause("paused"); - } - }); }; clickHandler = e => { if (this.clickable === false) { @@ -681,16 +669,11 @@ export class InnerSlider extends React.Component { "children", "customPaging", "infinite", - "appendDots", - "autoplay", - "autoplaying", - "autoplaySpeed" + "appendDots" ]); const { pauseOnDotsHover } = this.props; dotProps = { ...dotProps, - autoPlayHandler: this.autoPlay, - pauseHandler: this.pause, clickHandler: this.changeSlide, onMouseEnter: pauseOnDotsHover ? this.onDotsLeave : null, onMouseOver: pauseOnDotsHover ? this.onDotsOver : null, diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 23de16863..c5ce2f2da 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -810,28 +810,7 @@ export const siblingDirection = spec => { return "left"; } }; -export const getActiveElementClassnames = () => { - return document.activeElement.parentElement.classList.value.toString(); -}; -export const getActiveParentTagName = () => { - return document.activeElement.parentElement.tagName; -}; -export const getActiveParentClassnames = () => { - return document.activeElement.parentElement.classList.value.toString(); -}; -export const getActiveElementTagName = () => { - return document.activeElement.tagName; -}; -export const dotClicked = () => { - if ( - getActiveParentTagName() === "LI" && - getActiveParentClassnames() === "slick-active" - ) { - return true; - } else { - return false; - } -}; + export const slidesOnRight = ({ slidesToShow, centerMode, From e281e2f0c65c8838784c095cd05d004e984f5461 Mon Sep 17 00:00:00 2001 From: Pratyush Bhatnagar <38534434+pratyushbh@users.noreply.github.com> Date: Fri, 30 Jun 2023 12:14:57 +0530 Subject: [PATCH 6/8] fixed the autoplay dot issue --- src/dots.js | 11 ++++++++++- src/inner-slider.js | 9 ++++++++- src/utils/innerSliderUtils.js | 17 ++++++++++++++++- 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/src/dots.js b/src/dots.js index 93520cbd7..061b0c82b 100644 --- a/src/dots.js +++ b/src/dots.js @@ -2,7 +2,11 @@ import React from "react"; import classnames from "classnames"; -import { clamp } from "./utils/innerSliderUtils"; +import { + clamp, + dotClicked, + getActiveParentTagName +} from "./utils/innerSliderUtils"; const getDotCount = spec => { let dots; @@ -24,6 +28,11 @@ export class Dots extends React.PureComponent { // to next slide. That only goes away by click somewhere outside e.preventDefault(); this.props.clickHandler(options); + document.activeElement.addEventListener("blur", e => { + if (!dotClicked()) { + this.props.autoPlayHandler("play"); + } + }); } render() { const { diff --git a/src/inner-slider.js b/src/inner-slider.js index b477bc2d1..b34214b2e 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -19,7 +19,8 @@ import { getPreClones, getPostClones, getTrackLeft, - getTrackCSS + getTrackCSS, + dotClicked } from "./utils/innerSliderUtils"; import { Track } from "./track"; @@ -438,6 +439,11 @@ export class InnerSlider extends React.Component { const nodes = this.list.querySelectorAll(".slick-current"); nodes[0] && nodes[0].focus(); } + window.addEventListener("click", () => { + if (this.props.autoplay && dotClicked()) { + this.pause("pause"); + } + }); }; clickHandler = e => { if (this.clickable === false) { @@ -674,6 +680,7 @@ export class InnerSlider extends React.Component { const { pauseOnDotsHover } = this.props; dotProps = { ...dotProps, + autoPlayHandler: this.autoPlay, clickHandler: this.changeSlide, onMouseEnter: pauseOnDotsHover ? this.onDotsLeave : null, onMouseOver: pauseOnDotsHover ? this.onDotsOver : null, diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index c5ce2f2da..45681986f 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -97,7 +97,22 @@ export const canGoNext = spec => { } return canGo; }; - +export const getActiveElement = () => { + return document.activeElement; +}; +export const getActiveParentTagName = () => { + return getActiveElement().parentElement.tagName; +}; +export const getActiveParentClassName = () => { + return getActiveElement().parentElement.classList.value; +}; +export const dotClicked = () => { + return ( + getActiveElement().tagName === "BUTTON" && + getActiveParentTagName() === "LI" && + getActiveParentClassName() === "slick-active" + ); +}; // given an object and a list of keys, return new object with given keys export const extractObject = (spec, keys) => { let newObject = {}; From b7a266475f02a76ce228880dd28a1a57c263854c Mon Sep 17 00:00:00 2001 From: Pratyush Bhatnagar <38534434+pratyushbh@users.noreply.github.com> Date: Thu, 6 Jul 2023 17:25:29 +0530 Subject: [PATCH 7/8] fixed the autoplay issue completely --- src/dots.js | 29 ++++++++++++++++++++++++++--- src/inner-slider.js | 26 ++++++++++++++++---------- src/utils/innerSliderUtils.js | 2 +- 3 files changed, 43 insertions(+), 14 deletions(-) diff --git a/src/dots.js b/src/dots.js index 061b0c82b..80ea62883 100644 --- a/src/dots.js +++ b/src/dots.js @@ -5,7 +5,8 @@ import classnames from "classnames"; import { clamp, dotClicked, - getActiveParentTagName + getActiveParentTagName, + x } from "./utils/innerSliderUtils"; const getDotCount = spec => { @@ -27,12 +28,34 @@ export class Dots extends React.PureComponent { // In Autoplay the focus stays on clicked button even after transition // to next slide. That only goes away by click somewhere outside e.preventDefault(); + if (this.props.autoplay && this.props.autoplaying === "playing") { + this.props.pauseHandler("paused"); + console.log(this.props.autoplaying); + } this.props.clickHandler(options); - document.activeElement.addEventListener("blur", e => { - if (!dotClicked()) { + document.activeElement.addEventListener("blur", () => { + console.log("hi1"); + if ( + !dotClicked() && + this.props.autoplay && + this.props.autoplaying === "paused" + ) { + this.props.autoPlayHandler("play"); + } + }); + window.addEventListener("blur", e => { + if (dotClicked()) { + this.props.pauseHandler("paused"); + } + }); + window.addEventListener("focus", e => { + if (this.props.autoplay && this.props.autoplaying === "paused") { + this.props.pauseHandler("paused"); + } else if (this.props.autoplay) { this.props.autoPlayHandler("play"); } }); + console.log(x); } render() { const { diff --git a/src/inner-slider.js b/src/inner-slider.js index b34214b2e..6fb6c32e8 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -20,7 +20,8 @@ import { getPostClones, getTrackLeft, getTrackCSS, - dotClicked + dotClicked, + x } from "./utils/innerSliderUtils"; import { Track } from "./track"; @@ -149,7 +150,9 @@ export class InnerSlider extends React.Component { React.Children.count(prevProps.children) ); } - + dotReferenceHandler = ref => { + this.Dotcollection = ref; + }; componentDidUpdate = prevProps => { this.checkImagesLoad(); this.props.onReInit && this.props.onReInit(); @@ -434,16 +437,15 @@ export class InnerSlider extends React.Component { } else { this.slideHandler(targetSlide); } - this.props.autoplay && this.autoPlay("update"); + if (this.props.autoPlay && this.state.autoplaying !== "playing") { + console.log("hi3"); + this.props.autoplay && this.autoPlay("update"); + } if (this.props.focusOnSelect) { const nodes = this.list.querySelectorAll(".slick-current"); nodes[0] && nodes[0].focus(); } - window.addEventListener("click", () => { - if (this.props.autoplay && dotClicked()) { - this.pause("pause"); - } - }); + console.log(options); }; clickHandler = e => { if (this.clickable === false) { @@ -591,6 +593,7 @@ export class InnerSlider extends React.Component { } const autoplaying = this.state.autoplaying; if (pauseType === "paused") { + console.log(pauseType, pauseType === "paused"); this.setState({ autoplaying: "paused" }); } else if (pauseType === "focused") { if (autoplaying === "hovered" || autoplaying === "playing") { @@ -675,18 +678,21 @@ export class InnerSlider extends React.Component { "children", "customPaging", "infinite", - "appendDots" + "appendDots", + "autoplay", + "autoplaying" ]); const { pauseOnDotsHover } = this.props; dotProps = { ...dotProps, autoPlayHandler: this.autoPlay, + pauseHandler: this.pause, clickHandler: this.changeSlide, onMouseEnter: pauseOnDotsHover ? this.onDotsLeave : null, onMouseOver: pauseOnDotsHover ? this.onDotsOver : null, onMouseLeave: pauseOnDotsHover ? this.onDotsLeave : null }; - dots = ; + dots = ; } var prevArrow, nextArrow; diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 45681986f..18b818ee4 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -33,7 +33,7 @@ export const getRequiredLazySlides = spec => { } return requiredSlides; }; - +export let x = 0; // startIndex that needs to be present export const lazyStartIndex = spec => spec.currentSlide - lazySlidesOnLeft(spec); From de0e6f7a34fb3ee20415371dfb658f0668ab9330 Mon Sep 17 00:00:00 2001 From: Pratyush Bhatnagar <38534434+pratyushbh@users.noreply.github.com> Date: Thu, 6 Jul 2023 17:30:43 +0530 Subject: [PATCH 8/8] removed consoleLogs --- src/dots.js | 3 --- src/inner-slider.js | 3 --- 2 files changed, 6 deletions(-) diff --git a/src/dots.js b/src/dots.js index 80ea62883..05b3feb50 100644 --- a/src/dots.js +++ b/src/dots.js @@ -30,11 +30,9 @@ export class Dots extends React.PureComponent { e.preventDefault(); if (this.props.autoplay && this.props.autoplaying === "playing") { this.props.pauseHandler("paused"); - console.log(this.props.autoplaying); } this.props.clickHandler(options); document.activeElement.addEventListener("blur", () => { - console.log("hi1"); if ( !dotClicked() && this.props.autoplay && @@ -55,7 +53,6 @@ export class Dots extends React.PureComponent { this.props.autoPlayHandler("play"); } }); - console.log(x); } render() { const { diff --git a/src/inner-slider.js b/src/inner-slider.js index 6fb6c32e8..305526205 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -438,14 +438,12 @@ export class InnerSlider extends React.Component { this.slideHandler(targetSlide); } if (this.props.autoPlay && this.state.autoplaying !== "playing") { - console.log("hi3"); this.props.autoplay && this.autoPlay("update"); } if (this.props.focusOnSelect) { const nodes = this.list.querySelectorAll(".slick-current"); nodes[0] && nodes[0].focus(); } - console.log(options); }; clickHandler = e => { if (this.clickable === false) { @@ -593,7 +591,6 @@ export class InnerSlider extends React.Component { } const autoplaying = this.state.autoplaying; if (pauseType === "paused") { - console.log(pauseType, pauseType === "paused"); this.setState({ autoplaying: "paused" }); } else if (pauseType === "focused") { if (autoplaying === "hovered" || autoplaying === "playing") {