Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Converted the Tests to Functional component and created new Slider Component to test with different Settings #2241

Merged
merged 2 commits into from
Jun 5, 2023
Merged

Converted the Tests to Functional component and created new Slider Component to test with different Settings #2241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f880fba
wrote the tests of #1874 that came out to be successful
pratyushbh May 25, 2023
f5bb030
Converted the examples to Functional component and created new Slider…
pratyushbh May 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions __test__/SliderComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from "react";
import Slider from "../src/slider";

function SliderComponent(props) {
const { settings } = props;
return (
<div>
<h2>Slider</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}

export default SliderComponent;
292 changes: 292 additions & 0 deletions __test__/SliderComponent.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,292 @@
import React from "react";
import SliderComponent from "./SliderComponent";
import { render, fireEvent } from "@testing-library/react";
import {
getActiveSlide,
clickNext,
clickPrevious,
hasClass,
getActiveSlides,
getActiveSlidesCount,
getActiveSlidesText,
getButtons,
getButtonsListItem,
getCurrentSlide
} from "../test-utils";

describe("SliderComponent Tests with different settings", () => {
it("(SimpleSliderTest) should have 13 slides (1(preclone) + 6(actual) + 6(postclone))", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { container } = render(<SliderComponent settings={settings} />);
expect(container.getElementsByClassName("slick-slide").length).toBe(13);
});
it("(SimpleSliderTest) should have 7 clone slides", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { container } = render(<SliderComponent settings={settings} />);
expect(container.getElementsByClassName("slick-cloned").length).toBe(7);
});
it("(SimpleSliderTest) should have 1 current slide", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { container } = render(<SliderComponent settings={settings} />);
expect(
container.querySelectorAll(".slick-slide.slick-current").length
).toBe(1);
expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
});
it("(SimpleSliderTest) should have 1 active slide", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { container } = render(<SliderComponent settings={settings} />);
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("(SimpleSliderTest) should have 1 current slide(When initialSlide is 2)", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 2
};
const { container } = render(<SliderComponent settings={settings} />);
expect(
container.querySelectorAll(".slick-slide.slick-current").length
).toBe(1);
expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(2);
});
it("(SimpleSliderTest) should have 1 active slide(When initialSlide is 2)", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 2
};
const { container } = render(<SliderComponent settings={settings} />);
expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
1
);
expect(
Array.from(getActiveSlide(container).children).map(
e => parseInt(e.textContent) - 1
)[0]
).toBe(2);
expect(
Array.from(getActiveSlide(container).children).map(
e => parseInt(e.textContent) - 1
)[0]
).toBe(2);
});
it("(SimpleSliderTest) should have 6 dots", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { container } = render(<SliderComponent settings={settings} />);
expect(
container.getElementsByClassName("slick-dots")[0].children.length
).toBe(6);
});
it("(SimpleSliderTest) should have 1 active dot", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { container } = render(<SliderComponent settings={settings} />);

expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
1
);
});
it("(SimpleSliderTest) should have a prev arrow", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { container } = render(<SliderComponent settings={settings} />);
expect(container.getElementsByClassName("slick-prev").length).toBe(1);
});
it("(SimpleSliderTest) should have a next arrow", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { container } = render(<SliderComponent settings={settings} />);
expect(container.getElementsByClassName("slick-next").length).toBe(1);
});
it("(SimpleSliderTest) should got to next slide when next button is clicked", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { container } = render(<SliderComponent settings={settings} />);
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("(SimpleSliderTest) should goto previous slide when prev button is clicked", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { container } = render(<SliderComponent settings={settings} />);
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("(SimpleSliderTest) should got to next slide when next button is clicked (when intialSlide is equal to 2)", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 2
};
const { container } = render(<SliderComponent settings={settings} />);
clickNext(container);
expect(
container.querySelectorAll(".slick-slide.slick-active")[0].textContent
).toBe("4");
expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
1
);
expect(
container.querySelectorAll(".slick-dots")[0].children[3]
).toHaveClass("slick-active");
});
it("(SimpleSliderTest) should goto previous slide when prev button is clicked (when intialSlide is equal to 2)", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 2
};
const { container } = render(<SliderComponent settings={settings} />);
clickPrevious(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("(SimpleSliderTest) should goto 4th slide when 4th dot is clicked", function() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { container } = render(<SliderComponent settings={settings} />);
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(<SimpleSlider />);
// // expect(beautify_html(toString(container))).toMatchSnapshot();
// });
// it("click on next button", function() {
// const { container } = render(<SimpleSlider />);
// clickNext(container);
// //expect(beautify_html(toString(container))).toMatchSnapshot();
// });
// it("click on prev button", function() {
// const { container } = render(<SimpleSlider />);
// clickPrevious(container);
// // expect(beautify_html(toString(container))).toMatchSnapshot();
// });
// it("click on 3rd dot", function() {
// const { container } = render(<SimpleSlider />);
// fireEvent(
// getButtons(container)[2],
// new MouseEvent("click", {
// bubbles: true,
// cancelable: true
// })
// );
// // expect(beautify_html(toString(container))).toMatchSnapshot();
// });
//});
Loading