feat(testing): useCountdown hook

react-app/src/components/TimeoutModal/index.tsx

@@ -8,9 +8,8 @@ import {
   DialogTitle,
 } from "@/components";
 import { Auth } from "aws-amplify";
-import { useIdle } from "@/hooks";
+import { useIdle, useCountdown } from "@/hooks";
 import { useGetUser } from "@/api";
-import { useCountdown } from "@/hooks/useCountdown";
 import { intervalToDuration } from "date-fns";
 import pluralize from "pluralize";
 

react-app/src/hooks/useCountdown/index.test.ts

@@ -0,0 +1,77 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { useCountdown } from ".";
+
+const COUNTDOWN_TIME = 10;
+
+describe("useCountdown", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  test("Returns the correct initial value", () => {
+    const { result } = renderHook(() => useCountdown(COUNTDOWN_TIME));
+
+    expect(result.current[0]).toBe(COUNTDOWN_TIME);
+  });
+
+  test("Returns 0 after counting down", () => {
+    const { result } = renderHook(() => useCountdown(COUNTDOWN_TIME));
+
+    act(result.current[1].startCountdown);
+
+    act(() => {
+      vi.advanceTimersByTime(COUNTDOWN_TIME * 1000);
+    });
+
+    expect(result.current[0]).toBe(0);
+  });
+
+  test("Correctly starts the countdown", () => {
+    const { result } = renderHook(() => useCountdown(COUNTDOWN_TIME));
+
+    act(result.current[1].startCountdown);
+
+    act(() => {
+      vi.advanceTimersByTime(5 * 1000);
+    });
+
+    expect(result.current[0]).toBe(COUNTDOWN_TIME - 5);
+  });
+
+  test("Correctly stops the countdown", () => {
+    const { result } = renderHook(() => useCountdown(COUNTDOWN_TIME));
+
+    act(result.current[1].startCountdown);
+
+    act(() => {
+      vi.advanceTimersByTime(5 * 1000);
+    });
+
+    act(result.current[1].stopCountdown);
+
+    act(() => {
+      vi.advanceTimersByTime(5 * 1000);
+    });
+
+    expect(result.current[0]).toBe(COUNTDOWN_TIME - 5);
+  });
+
+  test("Correctly resets the countdown", () => {
+    const { result } = renderHook(() => useCountdown(COUNTDOWN_TIME));
+
+    act(result.current[1].startCountdown);
+
+    act(() => {
+      vi.advanceTimersByTime(5 * 1000);
+    });
+
+    act(result.current[1].resetCountdown);
+
+    act(() => {
+      vi.advanceTimersByTime(5 * 1000);
+    });
+
+    expect(result.current[0]).toBe(COUNTDOWN_TIME);
+  });
+});

react-app/src/hooks/useCountdown.ts → react-app/src/hooks/useCountdown/index.ts

@@ -9,9 +9,9 @@ type CountdownControllers = {
 };
 
 export const useCountdown = (
-  countStart: number,
+  minutesToCountDown: number,
 ): [number, CountdownControllers] => {
-  const [count, setCount] = useState<number>(countStart);
+  const [count, setCount] = useState<number>(minutesToCountDown);
   const [isCountdownRunning, setIsCountdownRunning] = useState<boolean>(false);
 
   const startCountdown = () => {
@@ -25,7 +25,7 @@ export const useCountdown = (
   // Will set running false and reset the seconds to initial value
   const resetCountdown = useCallback(() => {
     stopCountdown();
-    setCount(countStart);
+    setCount(minutesToCountDown);
   }, [stopCountdown]);
 
   const countdownCallback = useCallback(() => {