need to fix test. animate when slide/drag is cancelled

ybot1122 · Nov 4, 2024 · e1e7f5d · e1e7f5d
1 parent 5b2c228
commit e1e7f5d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/src/ReactFullpageSlideshow.tsx b/src/ReactFullpageSlideshow.tsx
@@ -106,6 +106,14 @@ export default function ReactFullpageSlideshow({
         } else {
           goToSlide(activeIndexRef.current - 1);
         }
+      } else {
+        isAnimatingRef.current = true;
+        setIsAnimating(true);
+
+        setTimeout(() => {
+          isAnimatingRef.current = false;
+          setIsAnimating(false);
+        }, slideAnimationMs);
       }
       yOffsetRef.current = 0;
       setYOffset(0);

diff --git a/test/BasicTest.test.tsx b/test/BasicTest.test.tsx
@@ -1,8 +1,8 @@
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
-import { act, render, screen } from "@testing-library/react";
+import { act, render, Screen, screen } from "@testing-library/react";
 import React from "react";
-import { App, assertSlidePosition } from "./utils";
+import { App } from "./utils";
 
 jest.useFakeTimers({ advanceTimers: true });
 
@@ -79,3 +79,13 @@ describe("BasicTest", () => {
     });
   });
 });
+
+const assertSlidePosition = (activeIndex: number, screen: Screen) => {
+  const slides = [0, 1, 2, 3, 4];
+  slides.map((ind) => {
+    const top = `calc(${(ind - activeIndex) * 100}vh + ${0}px)`;
+    expect(
+      screen.getByText(`slide ${ind + 1}`).parentNode.parentNode,
+    ).toHaveStyle(`top: ${top}`);
+  });
+};
diff --git a/test/SwipeTest.test.tsx b/test/SwipeTest.test.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { App, assertSlidePosition } from "./utils";
+import { fireEvent, render, Screen, screen } from "@testing-library/react";
+import { App } from "./utils";
 
 jest.useRealTimers();
 
@@ -20,3 +20,13 @@ test("SwipeTest", async () => {
 
   assertSlidePosition(1, screen);
 });
+
+const assertSlidePosition = (activeIndex: number, screen: Screen) => {
+  const slides = [0, 1, 2, 3, 4];
+  slides.map((ind) => {
+    const top = `calc(${(ind - activeIndex) * 100}vh + ${0}px)`;
+    expect(
+      screen.getByText(`slide ${ind + 1}`).parentNode.parentNode,
+    ).toHaveStyle(`top: ${top}`);
+  });
+};
diff --git a/test/utils.tsx b/test/utils.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { ReactFullpageSlideshow } from "../src";
 import { rfsApi } from "../src/types";
-import { Screen } from "@testing-library/dom";
 
 export const App = () => {
   return (
@@ -19,16 +18,6 @@ export const App = () => {
   );
 };
 
-export const assertSlidePosition = (activeIndex: number, screen: Screen) => {
-  const slides = [0, 1, 2, 3, 4];
-  slides.map((ind) => {
-    const top = `calc(${(ind - activeIndex) * 100}vh + ${0}px)`;
-    expect(
-      screen.getByText(`slide ${ind + 1}`).parentNode.parentNode,
-    ).toHaveStyle(`top: ${top}`);
-  });
-};
-
 const Slide = ({
   goToSlide,
   goToNextSlide,