Skip to content

Commit

Permalink
migrated all the test of examples from enezyme to react-testing-library
Browse files Browse the repository at this point in the history
  • Loading branch information
@pratyushbh
pratyushbh committed May 16, 2023
1 parent 0711da9 commit c4f6fde
Show file tree
Hide file tree
Showing 13 changed files with 435 additions and 44 deletions.
60 changes: 26 additions & 34 deletions examples/__tests__/CentreMode.test.js
View file
@@ -1,13 +1,14 @@
import React from "react";
import CenterMode from "../CenterMode";
import { render, fireEvent, waitFor, screen } from "@testing-library/react";
import { render } from "@testing-library/react";
import { html as beautify_html } from "js-beautify";
import {
activeSlides,
getActiveSlidesCount,
getClonesCount,
getCurrentSlide,
getSlidesCount
getSlidesCount,
clickNext
} from "../../test-utils";

describe("CenterMode Tests", () => {
Expand All @@ -24,39 +25,30 @@ describe("CenterMode Tests", () => {
test("Positioning test", () => {
const { container } = render(<CenterMode />);
let currentSlide = getCurrentSlide(container);
console.log(currentSlide[0]);
// Array.from(currentSlide).map(e=>console.log(e))
//let activeSlides = activeSlides(container);
expect(currentSlide.props()["data-index"]).toEqual(0);
// expect(activeSlides.map(slide => slide.props()["data-index"])).toEqual([
// -1,
// 0,
// 1
// ]);
// expect(beautify_html(slider.html())).toMatchSnapshot();
let activeslides = activeSlides(container);
expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(0);
expect(
Array.from(activeslides).map(e => parseInt(e.getAttribute("data-index")))
).toEqual([-1, 0, 1]);
expect(beautify_html(toString(container))).toMatchSnapshot();
});
// test("Activity test", () => {
// const slider = mount(<CenterMode />);
// let currentSlide = slider.find("div.slick-current");
// let activeSlides = slider.find("div.slick-active");
// expect(currentSlide.props()["data-index"]).toEqual(0);
// expect(activeSlides.map(slide => slide.props()["data-index"])).toEqual([
// -1,
// 0,
// 1
// ]);

// clickNext(slider);
test("Activity test", () => {
const { container } = render(<CenterMode />);
let currentSlide = getCurrentSlide(container);
let activeslides = activeSlides(container);
expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(0);
expect(
Array.from(activeslides).map(e => parseInt(e.getAttribute("data-index")))
).toEqual([-1, 0, 1]);
clickNext(container);

// currentSlide = slider.find("div.slick-current");
// activeSlides = slider.find("div.slick-active");
// expect(currentSlide.props()["data-index"]).toEqual(1);
// expect(activeSlides.map(slide => slide.props()["data-index"])).toEqual([
// 0,
// 1,
// 2
// ]);
currentSlide = getCurrentSlide(container);
activeslides = activeSlides(container);
expect(parseInt(currentSlide.getAttribute("data-index"))).toEqual(1);
expect(
Array.from(activeslides).map(e => parseInt(e.getAttribute("data-index")))
).toEqual([0, 1, 2]);

// expect(beautify_html(slider.html())).toMatchSnapshot();
// });
expect(beautify_html(toString(container))).toMatchSnapshot();
});
});
18 changes: 18 additions & 0 deletions examples/__tests__/Fade.js
View file
@@ -0,0 +1,18 @@
import React from "react";
import { render } from "@testing-library/react";
import Fade from "../Fade";
import { activeSlide, clickNext, clickPrevious } from "../../test-utils";

describe("Fade", () => {
it("should change slides when clicked on next & prev buttons", () => {
const { container } = render(<Fade />);
let activeslide = activeSlide(container);
expect(parseInt(activeslide.getAttribute("data-index"))).toEqual(0);
clickNext(container);
activeslide = activeSlide(container);
expect(parseInt(activeslide.getAttribute("data-index"))).toEqual(1);
clickPrevious(container);
activeslide = activeSlide(container);
expect(parseInt(activeslide.getAttribute("data-index"))).toEqual(0);
});
});
33 changes: 33 additions & 0 deletions examples/__tests__/FocusOnSelect.test.js
View file
@@ -0,0 +1,33 @@
import React from "react";
import { render, fireEvent } from "@testing-library/react";
import { html as beautify_html } from "js-beautify";
import {
activeSlide,
clickNext,
clickPrevious,
getButtons,
getCurrentSlide
} from "../../test-utils";
import FocusOnSelect from "../FocusOnSelect";

describe("FocusOnSelect Tests", () => {
test("Activity Test", () => {
const { container } = render(<FocusOnSelect />);
expect(
parseInt(getCurrentSlide(container).getAttribute("data-index"))
).toEqual(0);
expect(beautify_html(toString(container))).toMatchSnapshot();
Array.from(container.getElementsByClassName("slick-slide")).map(e =>
e.getAttribute("data-index") == "2"
? fireEvent(
e,
new MouseEvent("click", { bubbles: true, cancelable: true })
)
: null
);
expect(
parseInt(getCurrentSlide(container).getAttribute("data-index"))
).toEqual(2);
expect(beautify_html(toString(container))).toMatchSnapshot();
});
});
89 changes: 89 additions & 0 deletions examples/__tests__/MultipleItems.test.js
View file
@@ -0,0 +1,89 @@
import React from "react";
import { render, fireEvent } from "@testing-library/react";
import { html as beautify_html } from "js-beautify";
import {
activeSlide,
activeSlides,
clickNext,
clickPrevious,
getActiveSlidesCount,
getActiveSlidesText,
getButtons,
getButtonsLength,
getClonesCount,
getCurrentSlide,
getSlidesCount
} from "../../test-utils";
import MultipleItems from "../MultipleItems";

describe("Multiple Items", function() {
it("should have 9 actual slides and (3(pre) + 9(post)) clone slides", function() {
const { container } = render(<MultipleItems />);
expect(getSlidesCount(container)).toEqual(21);
expect(getClonesCount(container)).toEqual(12);
expect(beautify_html(toString(container))).toMatchSnapshot();
});
it("should have 3 active slides", function() {
const { container } = render(<MultipleItems />);
expect(getActiveSlidesCount(container)).toEqual(3);
expect(beautify_html(toString(container))).toMatchSnapshot();
});
it("should have 3 dots", function() {
const { container } = render(<MultipleItems />);
expect(getButtonsLength(container)).toEqual(3);
expect(beautify_html(toString(container))).toMatchSnapshot();
});
it("should show first 3 slides", function() {
const { container } = render(<MultipleItems />);
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(<MultipleItems />);
clickNext(container);
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(<MultipleItems />);
clickPrevious(container);
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(<MultipleItems />);
fireEvent(
getButtons(container)[0],
new MouseEvent("click", {
bubbles: true,
cancelable: true
})
);
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(<MultipleItems />);
fireEvent(
getButtons(container)[1],
new MouseEvent("click", {
bubbles: true,
cancelable: true
})
);
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(<MultipleItems />);
fireEvent(
getButtons(container)[2],
new MouseEvent("click", {
bubbles: true,
cancelable: true
})
);
expect(getActiveSlidesText(container)).toEqual(["7", "8", "9"]);
expect(beautify_html(toString(container))).toMatchSnapshot();
});
});
15 changes: 11 additions & 4 deletions examples/__tests__/SimpleSlider.test.js
View file
Expand Up @@ -10,7 +10,8 @@ import {
getActiveSlides,
getActiveSlidesCount,
getActiveSlidesText,
getButtons
getButtons,
getButtonsListItem
} from "../../test-utils";

describe("SimpleSlider example", () => {
Expand All @@ -27,7 +28,11 @@ describe("SimpleSlider example", () => {
expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
1
);
expect(activeSlide(container)).toBe(0);
expect(
Array.from(activeSlide(container).children).map(
e => parseInt(e.textContent) - 1
)[0]
).toBe(0);
});
it("should have 6 dots", function() {
const { container } = render(<SimpleSlider />);
Expand Down Expand Up @@ -87,7 +92,9 @@ describe("SimpleSlider example", () => {
);
expect(getActiveSlidesText(container)[0]).toEqual("4");
expect(getActiveSlidesCount(container)).toEqual(1);
expect(hasClass(getButtons(container)[3], "slick-active")).toEqual(true);
expect(hasClass(getButtonsListItem(container)[3], "slick-active")).toEqual(
true
);
});
});

Expand All @@ -109,7 +116,7 @@ describe("Simple Slider Snapshots", function() {
it("click on 3rd dot", function() {
const { container } = render(<SimpleSlider />);
fireEvent(
container.querySelectorAll(".slick-dots button")[2],
getButtons(container)[2],
new MouseEvent("click", {
bubbles: true,
cancelable: true
Expand Down
52 changes: 52 additions & 0 deletions examples/__tests__/SlickGoTo.test.js
View file
@@ -0,0 +1,52 @@
import React from "react";
import { fireEvent, getRoles, render } from "@testing-library/react";
import SlickGoTo from "../SlickGoTo";
import { activeSlide, getActiveSlides, getSlidesCount } from "../../test-utils";

describe.skip("SlickGoTo", () => {
it("should goto 2nd slide", () => {
const { container } = render(<SlickGoTo />);
fireEvent.change(container.getElementsByTagName("input")[0], {
target: { value: 1 }
});
let currentImg = Array.from(
activeSlide(container).getElementsByTagName("img")
)[0];
expect(currentImg.getAttribute("src")).toEqual(
"/img/react-slick/abstract02.jpg"
);
});
it("should goto 2nd slide, even if input is number in string format", () => {
const { container } = render(<SlickGoTo />);
fireEvent.change(container.getElementsByTagName("input")[0], {
target: { value: "1" }
});
let currentImg = Array.from(
activeSlide(container).getElementsByTagName("img")
)[0];
expect(currentImg.getAttribute("src")).toEqual(
"/img/react-slick/abstract02.jpg"
);
});
it("should remain at 1st slide", () => {
const { container } = render(<SlickGoTo />);
fireEvent.change(container.getElementsByTagName("input")[0], {
target: { value: 0 }
});
let currentImg = Array.from(
activeSlide(container).getElementsByTagName("img")
)[0];
expect(currentImg.getAttribute("src")).toEqual(
"/img/react-slick/abstract01.jpg"
);
});
it.skip("should go to 1st slide from another 3rd slide", () => {
// skipped because two simultaneous clicks dont' work with css and speed>0
const wrapper = render(<SlickGoTo waitForAnimate={false} />);
wrapper.find("input").simulate("change", { target: { value: 3 } });
wrapper.find("input").simulate("change", { target: { value: 0 } });
expect(wrapper.find(".slick-slide.slick-active img").props().src).toEqual(
"/img/react-slick/abstract01.jpg"
);
});
});

0 comments on commit c4f6fde

Please sign in to comment.