tests init

examples/__tests__/SimpleSlider.test.js

@@ -1,6 +1,7 @@
 import React from "react";
 import SimpleSlider from "../SimpleSlider";
 import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { clickNext } from "../../test-utils";
 
 describe("SimpleSlider example", () => {
   it("should have 13 slides (1(preclone) + 6(actual) + 6(postclone))", function() {
@@ -9,14 +10,14 @@ describe("SimpleSlider example", () => {
   });
   it("should have 7 clone slides", function() {
     const { container } = render(<SimpleSlider />);
-
     expect(container.getElementsByClassName("slick-cloned").length).toBe(7);
   });
   it("should have 1 active slide", function() {
     const { container } = render(<SimpleSlider />);
     expect(container.querySelectorAll(".slick-slide.slick-active").length).toBe(
       1
     );
+    expect(activeSlide(container)).toBe(0);
   });
   it("should have 6 dots", function() {
     const { container } = render(<SimpleSlider />);
@@ -40,23 +41,15 @@ describe("SimpleSlider example", () => {
   });
   it("should got to second slide when next button is clicked", function() {
     const { container } = render(<SimpleSlider />);
-    fireEvent(
-      container.getElementsByClassName("slick-next")[0],
-      new MouseEvent("click", {
-        bubbles: true,
-        cancelable: true
-      })
-    );
+    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].classList.contains("slick-active")
-    ).toBe(true);
+      container.querySelectorAll(".slick-dots")[0].children[1]
+    ).toHaveClass("slick-active");
   });
 });

test-utils.js

@@ -0,0 +1,42 @@
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+
+export function getSlidesCount(container) {
+  return container.getElementsByClassName("slick-slide").length;
+}
+
+export function getClonesCount(container) {
+  return container.getElementsByClassName("slick-cloned").length;
+}
+
+export function getActiveSlidesCount(container) {
+  return container.querySelectorAll(".slick-slide.slick-active").length;
+}
+
+export function getActiveSlides(container) {
+  return container.querySelectorAll(".slick-slide.slick-active");
+}
+
+export function getActiveSlidesText(container) {
+  const slides = activeSlides(container);
+  return Array.from(slides).map(e => e.textContent);
+}
+
+export function clickNext(container) {
+  fireEvent(
+    container.getElementsByClassName("slick-next")[0],
+    new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true
+    })
+  );
+}
+
+export function clickPrevious(container) {
+  fireEvent(
+    container.getElementsByClassName("slick-prev")[0],
+    new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true
+    })
+  );
+}