diff --git a/src/components/MediaRecorder/AudioRecorder/hooks/__tests__/useTimeElapsed.test.ts b/src/components/MediaRecorder/AudioRecorder/hooks/__tests__/useTimeElapsed.test.ts new file mode 100644 index 0000000000..b508102ae7 --- /dev/null +++ b/src/components/MediaRecorder/AudioRecorder/hooks/__tests__/useTimeElapsed.test.ts @@ -0,0 +1,44 @@ +import { act, renderHook } from '@testing-library/react'; + +import { useTimeElapsed } from '../useTimeElapsed'; + +describe('useTimeElapsed', () => { + beforeEach(() => { + vi.useFakeTimers(); + }); + + afterEach(() => { + vi.useRealTimers(); + }); + + it('counts one second per second after startCounter() until stopCounter()', () => { + const { result } = renderHook(() => useTimeElapsed()); + + act(() => result.current.startCounter()); + act(() => vi.advanceTimersByTime(3000)); + expect(result.current.secondsElapsed).toBe(3); + + act(() => result.current.stopCounter()); + act(() => vi.advanceTimersByTime(3000)); + expect(result.current.secondsElapsed).toBe(3); + }); + + it('stops counting on unmount when started with startOnMount', () => { + const { unmount } = renderHook(() => useTimeElapsed({ startOnMount: true })); + expect(vi.getTimerCount()).toBe(1); + + unmount(); + + expect(vi.getTimerCount()).toBe(0); + }); + + it('stops counting on unmount when started with startCounter()', () => { + const { result, unmount } = renderHook(() => useTimeElapsed()); + act(() => result.current.startCounter()); + expect(vi.getTimerCount()).toBe(1); + + unmount(); + + expect(vi.getTimerCount()).toBe(0); + }); +}); diff --git a/src/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.ts b/src/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.ts index 051f4b487e..c613bfeec1 100644 --- a/src/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.ts +++ b/src/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.ts @@ -38,6 +38,9 @@ export const useTimeElapsed = ({ }; }, [startCounter, startOnMount, stopCounter]); + // The counter can also be started through startCounter(), so stop it on unmount too + useEffect(() => stopCounter, [stopCounter]); + return { secondsElapsed, startCounter,