diff --git a/src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeaderCountdown.tsx b/src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeaderCountdown.tsx index db1a4f55e7..b5c09b194c 100644 --- a/src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeaderCountdown.tsx +++ b/src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeaderCountdown.tsx @@ -30,12 +30,12 @@ export const ProjectHeaderCountdown: React.FC = ({ return (
Closing in
-
+
@@ -52,8 +52,8 @@ export const CountdownCard = ({ label: ReactNode unit: number }) => ( -
-
{unit}
+
+
{unit}
{label}
diff --git a/src/components/v2v3/V2V3Project/ProjectDashboard/hooks/useCountdownClock.test.ts b/src/components/v2v3/V2V3Project/ProjectDashboard/hooks/useCountdownClock.test.ts index 24bbc3c0e1..92e4e1aa62 100644 --- a/src/components/v2v3/V2V3Project/ProjectDashboard/hooks/useCountdownClock.test.ts +++ b/src/components/v2v3/V2V3Project/ProjectDashboard/hooks/useCountdownClock.test.ts @@ -9,21 +9,30 @@ describe('useCountdownClock', () => { }) it('returns empty string if endSeconds is undefined', () => { const { result } = renderHook(() => useCountdownClock(undefined)) - expect(result.current).toEqual('') + expect(result.current).toEqual({ + remainingTimeText: '', + secondsRemaining: 0, + }) }) it('returns remaining time', () => { const now = Date.now() / 1000 const tenSecondsFromNow = now + 10 const { result } = renderHook(() => useCountdownClock(tenSecondsFromNow)) - expect(result.current).toEqual('0d 0h 0m 10s') + expect(result.current).toEqual({ + remainingTimeText: '0d 0h 0m 10s', + secondsRemaining: 10, + }) }) it('updates every second', () => { const now = Date.now() / 1000 const tenSecondsFromNow = now + 10 const { result } = renderHook(() => useCountdownClock(tenSecondsFromNow)) for (let i = 10; i >= 0; i--) { - expect(result.current).toEqual(`0d 0h 0m ${i}s`) + expect(result.current).toEqual({ + remainingTimeText: `0d 0h 0m ${i}s`, + secondsRemaining: i, + }) act(() => jest.advanceTimersByTime(1000)) } }) @@ -32,7 +41,10 @@ describe('useCountdownClock', () => { const now = Date.now() / 1000 const tenSecondsAgo = now - 10 const { result } = renderHook(() => useCountdownClock(tenSecondsAgo)) - expect(result.current).toEqual('0d 0h 0m 0s') + expect(result.current).toEqual({ + remainingTimeText: '0d 0h 0m 0s', + secondsRemaining: 0, + }) }) test('timer is cleared on unmount', () => { @@ -41,15 +53,24 @@ describe('useCountdownClock', () => { const { result, unmount } = renderHook(() => useCountdownClock(tenSecondsFromNow), ) - expect(result.current).toEqual('0d 0h 0m 10s') + expect(result.current).toEqual({ + remainingTimeText: '0d 0h 0m 10s', + secondsRemaining: 10, + }) act(() => { jest.advanceTimersByTime(1000) }) - expect(result.current).toEqual('0d 0h 0m 9s') + expect(result.current).toEqual({ + remainingTimeText: '0d 0h 0m 9s', + secondsRemaining: 9, + }) unmount() act(() => { jest.advanceTimersByTime(1000) }) - expect(result.current).toEqual('0d 0h 0m 9s') + expect(result.current).toEqual({ + remainingTimeText: '0d 0h 0m 9s', + secondsRemaining: 9, + }) }) })