Skip to content

Commit f5bb030

Browse files
pratyushbhpratyushbh
committed
Converted the examples to Functional component and created new SliderComponent in root test folder to test slider with various settings at a single place
1 parent f880fba commit f5bb030

32 files changed

+1605
-1316
lines changed

‎__test__/SliderComponent.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from "react";
2+
import Slider from "../src/slider";
3+
4+
function SliderComponent(props) {
5+
const { settings } = props;
6+
return (
7+
<div>
8+
<h2>Slider</h2>
9+
<Slider {...settings}>
10+
<div>
11+
<h3>1</h3>
12+
</div>
13+
<div>
14+
<h3>2</h3>
15+
</div>
16+
<div>
17+
<h3>3</h3>
18+
</div>
19+
<div>
20+
<h3>4</h3>
21+
</div>
22+
<div>
23+
<h3>5</h3>
24+
</div>
25+
<div>
26+
<h3>6</h3>
27+
</div>
28+
</Slider>
29+
</div>
30+
);
31+
}
32+
33+
export default SliderComponent;

‎__test__/SliderComponent.test.js‎

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
import React from "react";
2+
import SliderComponent from "./SliderComponent";
3+
import { render, fireEvent } from "@testing-library/react";
4+
import {
5+
getActiveSlide,
6+
clickNext,
7+
clickPrevious,
8+
hasClass,
9+
getActiveSlides,
10+
getActiveSlidesCount,
11+
getActiveSlidesText,
12+
getButtons,
13+
getButtonsListItem,
14+
getCurrentSlide
15+
} from "../test-utils";
16+
17+
describe("SliderComponent Tests with different settings", () => {
18+
it("(SimpleSliderTest) should have 13 slides (1(preclone) + 6(actual) + 6(postclone))", function() {
19+
const settings = {
20+
dots: true,
21+
infinite: true,
22+
speed: 500,
23+
slidesToShow: 1,
24+
slidesToScroll: 1
25+
};
26+
const { container } = render(<SliderComponent settings={settings} />);
27+
expect(container.getElementsByClassName("slick-slide").length).toBe(13);
28+
});
29+
it("(SimpleSliderTest) should have 7 clone slides", function() {
30+
const settings = {
31+
dots: true,
32+
infinite: true,
33+
speed: 500,
34+
slidesToShow: 1,
35+
slidesToScroll: 1
36+
};
37+
const { container } = render(<SliderComponent settings={settings} />);
38+
expect(container.getElementsByClassName("slick-cloned").length).toBe(7);
39+
});
40+
it("(SimpleSliderTest) should have 1 current slide", function() {
41+
const settings = {
42+
dots: true,
43+
infinite: true,
44+
speed: 500,
45+
slidesToShow: 1,
46+
slidesToScroll: 1
47+
};
48+
const { container } = render(<SliderComponent settings={settings} />);
49+
expect(
50+
container.querySelectorAll(".slick-slide.slick-current").length
51+
).toBe(1);
52+
expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(0);
53+
});
54+
it("(SimpleSliderTest) should have 1 active slide", function() {
55+
const settings = {
56+
dots: true,
57+
infinite: true,
58+
speed: 500,
59+
slidesToShow: 1,
60+
slidesToScroll: 1
61+
};
62+
const { container } = render(<SliderComponent settings={settings} />);
63+
expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
64+
1
65+
);
66+
expect(
67+
Array.from(getActiveSlide(container).children).map(
68+
e => parseInt(e.textContent) - 1
69+
)[0]
70+
).toBe(0);
71+
});
72+
it("(SimpleSliderTest) should have 1 current slide(When initialSlide is 2)", function() {
73+
const settings = {
74+
dots: true,
75+
infinite: true,
76+
speed: 500,
77+
slidesToShow: 1,
78+
slidesToScroll: 1,
79+
initialSlide: 2
80+
};
81+
const { container } = render(<SliderComponent settings={settings} />);
82+
expect(
83+
container.querySelectorAll(".slick-slide.slick-current").length
84+
).toBe(1);
85+
expect(parseInt(getCurrentSlide(container).textContent) - 1).toBe(2);
86+
});
87+
it("(SimpleSliderTest) should have 1 active slide(When initialSlide is 2)", function() {
88+
const settings = {
89+
dots: true,
90+
infinite: true,
91+
speed: 500,
92+
slidesToShow: 1,
93+
slidesToScroll: 1,
94+
initialSlide: 2
95+
};
96+
const { container } = render(<SliderComponent settings={settings} />);
97+
expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
98+
1
99+
);
100+
expect(
101+
Array.from(getActiveSlide(container).children).map(
102+
e => parseInt(e.textContent) - 1
103+
)[0]
104+
).toBe(2);
105+
expect(
106+
Array.from(getActiveSlide(container).children).map(
107+
e => parseInt(e.textContent) - 1
108+
)[0]
109+
).toBe(2);
110+
});
111+
it("(SimpleSliderTest) should have 6 dots", function() {
112+
const settings = {
113+
dots: true,
114+
infinite: true,
115+
speed: 500,
116+
slidesToShow: 1,
117+
slidesToScroll: 1
118+
};
119+
const { container } = render(<SliderComponent settings={settings} />);
120+
expect(
121+
container.getElementsByClassName("slick-dots")[0].children.length
122+
).toBe(6);
123+
});
124+
it("(SimpleSliderTest) should have 1 active dot", function() {
125+
const settings = {
126+
dots: true,
127+
infinite: true,
128+
speed: 500,
129+
slidesToShow: 1,
130+
slidesToScroll: 1
131+
};
132+
const { container } = render(<SliderComponent settings={settings} />);
133+
134+
expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
135+
1
136+
);
137+
});
138+
it("(SimpleSliderTest) should have a prev arrow", function() {
139+
const settings = {
140+
dots: true,
141+
infinite: true,
142+
speed: 500,
143+
slidesToShow: 1,
144+
slidesToScroll: 1
145+
};
146+
const { container } = render(<SliderComponent settings={settings} />);
147+
expect(container.getElementsByClassName("slick-prev").length).toBe(1);
148+
});
149+
it("(SimpleSliderTest) should have a next arrow", function() {
150+
const settings = {
151+
dots: true,
152+
infinite: true,
153+
speed: 500,
154+
slidesToShow: 1,
155+
slidesToScroll: 1
156+
};
157+
const { container } = render(<SliderComponent settings={settings} />);
158+
expect(container.getElementsByClassName("slick-next").length).toBe(1);
159+
});
160+
it("(SimpleSliderTest) should got to next slide when next button is clicked", function() {
161+
const settings = {
162+
dots: true,
163+
infinite: true,
164+
speed: 500,
165+
slidesToShow: 1,
166+
slidesToScroll: 1
167+
};
168+
const { container } = render(<SliderComponent settings={settings} />);
169+
clickNext(container);
170+
expect(
171+
container.querySelectorAll(".slick-slide.slick-active")[0].textContent
172+
).toBe("2");
173+
expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
174+
1
175+
);
176+
expect(
177+
container.querySelectorAll(".slick-dots")[0].children[1]
178+
).toHaveClass("slick-active");
179+
});
180+
it("(SimpleSliderTest) should goto previous slide when prev button is clicked", function() {
181+
const settings = {
182+
dots: true,
183+
infinite: true,
184+
speed: 500,
185+
slidesToShow: 1,
186+
slidesToScroll: 1
187+
};
188+
const { container } = render(<SliderComponent settings={settings} />);
189+
clickPrevious(container);
190+
expect(
191+
container.querySelectorAll(".slick-slide.slick-active")[0].textContent
192+
).toBe("6");
193+
expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
194+
1
195+
);
196+
expect(
197+
container.querySelectorAll(".slick-dots")[0].children[5]
198+
).toHaveClass("slick-active");
199+
});
200+
it("(SimpleSliderTest) should got to next slide when next button is clicked (when intialSlide is equal to 2)", function() {
201+
const settings = {
202+
dots: true,
203+
infinite: true,
204+
speed: 500,
205+
slidesToShow: 1,
206+
slidesToScroll: 1,
207+
initialSlide: 2
208+
};
209+
const { container } = render(<SliderComponent settings={settings} />);
210+
clickNext(container);
211+
expect(
212+
container.querySelectorAll(".slick-slide.slick-active")[0].textContent
213+
).toBe("4");
214+
expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
215+
1
216+
);
217+
expect(
218+
container.querySelectorAll(".slick-dots")[0].children[3]
219+
).toHaveClass("slick-active");
220+
});
221+
it("(SimpleSliderTest) should goto previous slide when prev button is clicked (when intialSlide is equal to 2)", function() {
222+
const settings = {
223+
dots: true,
224+
infinite: true,
225+
speed: 500,
226+
slidesToShow: 1,
227+
slidesToScroll: 1,
228+
initialSlide: 2
229+
};
230+
const { container } = render(<SliderComponent settings={settings} />);
231+
clickPrevious(container);
232+
expect(
233+
container.querySelectorAll(".slick-slide.slick-active")[0].textContent
234+
).toBe("2");
235+
expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
236+
1
237+
);
238+
expect(
239+
container.querySelectorAll(".slick-dots")[0].children[1]
240+
).toHaveClass("slick-active");
241+
});
242+
it("(SimpleSliderTest) should goto 4th slide when 4th dot is clicked", function() {
243+
const settings = {
244+
dots: true,
245+
infinite: true,
246+
speed: 500,
247+
slidesToShow: 1,
248+
slidesToScroll: 1
249+
};
250+
const { container } = render(<SliderComponent settings={settings} />);
251+
fireEvent(
252+
container.querySelectorAll(".slick-dots button")[3],
253+
new MouseEvent("click", {
254+
bubbles: true,
255+
cancelable: true
256+
})
257+
);
258+
expect(getActiveSlidesText(container)[0]).toEqual("4");
259+
expect(getActiveSlidesCount(container)).toEqual(1);
260+
expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
261+
true
262+
);
263+
});
264+
});
265+
266+
// describe("Simple Slider Snapshots", function() {
267+
// it("slider initial state", function() {
268+
// const { container } = render(<SimpleSlider />);
269+
// // expect(beautify_html(toString(container))).toMatchSnapshot();
270+
// });
271+
// it("click on next button", function() {
272+
// const { container } = render(<SimpleSlider />);
273+
// clickNext(container);
274+
// //expect(beautify_html(toString(container))).toMatchSnapshot();
275+
// });
276+
// it("click on prev button", function() {
277+
// const { container } = render(<SimpleSlider />);
278+
// clickPrevious(container);
279+
// // expect(beautify_html(toString(container))).toMatchSnapshot();
280+
// });
281+
// it("click on 3rd dot", function() {
282+
// const { container } = render(<SimpleSlider />);
283+
// fireEvent(
284+
// getButtons(container)[2],
285+
// new MouseEvent("click", {
286+
// bubbles: true,
287+
// cancelable: true
288+
// })
289+
// );
290+
// // expect(beautify_html(toString(container))).toMatchSnapshot();
291+
// });
292+
//});

0 commit comments

Comments
 (0)