completed the simpleslider test and started centerMode test

examples/__tests__/CentreMode.test.js

@@ -0,0 +1,62 @@
+import React from "react";
+import CenterMode from "../CenterMode";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+import { html as beautify_html } from "js-beautify";
+import {
+  activeSlides,
+  getActiveSlidesCount,
+  getClonesCount,
+  getCurrentSlide,
+  getSlidesCount
+} from "../../test-utils";
+
+describe("CenterMode Tests", () => {
+  test("Counting test", () => {
+    const { container } = render(<CenterMode />);
+    let totalSlides = getSlidesCount(container);
+    let clonedSlides = getClonesCount(container);
+    let activeSlides = getActiveSlidesCount(container);
+    expect(totalSlides).toEqual(16);
+    expect(clonedSlides).toEqual(10);
+    expect(activeSlides).toEqual(3);
+    expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
+  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();
+  });
+  //   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);
+
+  //     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
+  //     ]);
+
+  //     expect(beautify_html(slider.html())).toMatchSnapshot();
+  //   });
+});

examples/__tests__/SimpleSlider.test.js

@@ -1,7 +1,17 @@
 import React from "react";
 import SimpleSlider from "../SimpleSlider";
 import { render, fireEvent, waitFor, screen } from "@testing-library/react";
-import { clickNext } from "../../test-utils";
+import { html as beautify_html } from "js-beautify";
+import {
+  activeSlide,
+  clickNext,
+  clickPrevious,
+  hasClass,
+  getActiveSlides,
+  getActiveSlidesCount,
+  getActiveSlidesText,
+  getButtons
+} from "../../test-utils";
 
 describe("SimpleSlider example", () => {
   it("should have 13 slides (1(preclone) + 6(actual) + 6(postclone))", function() {
@@ -27,6 +37,7 @@ describe("SimpleSlider example", () => {
   });
   it("should have 1 active dot", function() {
     const { container } = render(<SimpleSlider />);
+
     expect(container.querySelectorAll(".slick-dots .slick-active").length).toBe(
       1
     );
@@ -52,4 +63,58 @@ describe("SimpleSlider example", () => {
       container.querySelectorAll(".slick-dots")[0].children[1]
     ).toHaveClass("slick-active");
   });
+  it("should goto last slide when prev button is clicked", function() {
+    const { container } = render(<SimpleSlider />);
+    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(<SimpleSlider />);
+    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(getButtons(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(
+      container.querySelectorAll(".slick-dots button")[2],
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(beautify_html(toString(container))).toMatchSnapshot();
+  });
 });

examples/__tests__/__snapshots__/CentreMode.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CenterMode Tests Counting test 1`] = `"[object Undefined]"`;

examples/__tests__/__snapshots__/SimpleSlider.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Simple Slider Snapshots click on 3rd dot 1`] = `"[object Undefined]"`;
+
+exports[`Simple Slider Snapshots click on next button 1`] = `"[object Undefined]"`;
+
+exports[`Simple Slider Snapshots click on prev button 1`] = `"[object Undefined]"`;
+
+exports[`Simple Slider Snapshots slider initial state 1`] = `"[object Undefined]"`;

test-utils.js

@@ -12,6 +12,29 @@ export function getActiveSlidesCount(container) {
   return container.querySelectorAll(".slick-slide.slick-active").length;
 }
 
+export function getCurrentSlide(container) {
+  return container.querySelectorAll(".slick-current");
+}
+
+export function getButtons(container) {
+  return container.querySelectorAll(".slick-dots")[0].children;
+}
+
+export function hasClass(element, classname) {
+  if (element.className != undefined) {
+    return element.className == classname;
+  }
+  return false;
+}
+export function activeSlides(container) {
+  return container.querySelectorAll(".slick-dots .slick-active");
+}
+export function activeSlide(container) {
+  return Array.from(
+    container.querySelectorAll(".slick-dots .slick-active")[0].children
+  ).map(e => parseInt(e.textContent) - 1)[0];
+}
+
 export function getActiveSlides(container) {
   return container.querySelectorAll(".slick-slide.slick-active");
 }