From 8b331b38d569028e9519923c75404bf7422af76a Mon Sep 17 00:00:00 2001 From: iamacook Date: Mon, 20 Nov 2023 11:55:09 +0100 Subject: [PATCH] fix: test --- .../RecoveryInProgress/index.test.tsx | 47 ++++++++++++------- .../dashboard/RecoveryInProgress/index.tsx | 14 +++--- src/store/recoverySlice.ts | 3 -- 3 files changed, 38 insertions(+), 26 deletions(-) diff --git a/src/components/dashboard/RecoveryInProgress/index.test.tsx b/src/components/dashboard/RecoveryInProgress/index.test.tsx index d6e7063ae5..3612cff89c 100644 --- a/src/components/dashboard/RecoveryInProgress/index.test.tsx +++ b/src/components/dashboard/RecoveryInProgress/index.test.tsx @@ -36,7 +36,7 @@ describe('RecoveryInProgress', () => { <_RecoveryInProgress supportsRecovery={false} blockTimestamp={0} - recovery={[{ queue: [{ timestamp: 0 } as RecoveryQueueItem] }] as RecoveryState} + recoverySlice={{ loading: false, data: [{ queue: [{ timestamp: 0 } as RecoveryQueueItem] }] as RecoveryState }} />, ) @@ -48,11 +48,23 @@ describe('RecoveryInProgress', () => { <_RecoveryInProgress supportsRecovery={true} blockTimestamp={undefined} - recovery={[{ queue: [{ timestamp: 0 } as RecoveryQueueItem] }] as RecoveryState} + recoverySlice={{ loading: false, data: [{ queue: [{ timestamp: 0 } as RecoveryQueueItem] }] as RecoveryState }} />, ) - expect(result.container).toBeEmptyDOMElement() + expect(result.container.getElementsByClassName('MuiSkeleton-root').length).toBe(1) + }) + + it('should return a loader if the recovery proposals are loading', () => { + const result = render( + <_RecoveryInProgress + supportsRecovery={true} + blockTimestamp={0} + recoverySlice={{ loading: true, data: [{ queue: [{ timestamp: 0 } as RecoveryQueueItem] }] as RecoveryState }} + />, + ) + + expect(result.container.getElementsByClassName('MuiSkeleton-root').length).toBe(1) }) it('should return null if there are no delayed transactions', () => { @@ -60,7 +72,7 @@ describe('RecoveryInProgress', () => { <_RecoveryInProgress supportsRecovery={true} blockTimestamp={69420} - recovery={[{ queue: [] as Array }] as RecoveryState} + recoverySlice={{ loading: false, data: [{ queue: [] as Array }] as RecoveryState }} />, ) @@ -72,8 +84,9 @@ describe('RecoveryInProgress', () => { <_RecoveryInProgress supportsRecovery={true} blockTimestamp={69420} - recovery={ - [ + recoverySlice={{ + loading: false, + data: [ { queue: [ { @@ -83,8 +96,8 @@ describe('RecoveryInProgress', () => { } as RecoveryQueueItem, ], }, - ] as RecoveryState - } + ] as RecoveryState, + }} />, ) @@ -98,8 +111,9 @@ describe('RecoveryInProgress', () => { <_RecoveryInProgress supportsRecovery={true} blockTimestamp={mockBlockTimestamp} - recovery={ - [ + recoverySlice={{ + loading: false, + data: [ { queue: [ { @@ -115,8 +129,8 @@ describe('RecoveryInProgress', () => { } as RecoveryQueueItem, ], }, - ] as RecoveryState - } + ] as RecoveryState, + }} />, ) @@ -143,8 +157,9 @@ describe('RecoveryInProgress', () => { <_RecoveryInProgress supportsRecovery={true} blockTimestamp={mockBlockTimestamp} - recovery={ - [ + recoverySlice={{ + loading: false, + data: [ { queue: [ { @@ -160,8 +175,8 @@ describe('RecoveryInProgress', () => { } as RecoveryQueueItem, ], }, - ] as RecoveryState - } + ] as RecoveryState, + }} />, ) diff --git a/src/components/dashboard/RecoveryInProgress/index.tsx b/src/components/dashboard/RecoveryInProgress/index.tsx index 5817a2b202..3a357134be 100644 --- a/src/components/dashboard/RecoveryInProgress/index.tsx +++ b/src/components/dashboard/RecoveryInProgress/index.tsx @@ -9,20 +9,20 @@ import RecoveryPending from '@/public/images/common/recovery-pending.svg' import ExternalLink from '@/components/common/ExternalLink' import { useHasFeature } from '@/hooks/useChains' import { FEATURES } from '@/utils/chains' -import { selectRecovery, selectRecoverySlice } from '@/store/recoverySlice' -import type { RecoveryState } from '@/store/recoverySlice' +import { selectRecoverySlice } from '@/store/recoverySlice' import madProps from '@/utils/mad-props' +import type { RecoveryState } from '@/store/recoverySlice' +import type { Loadable } from '@/store/common' export function _RecoveryInProgress({ blockTimestamp, supportsRecovery, - recovery, + recoverySlice, }: { blockTimestamp?: number supportsRecovery: boolean - recovery: RecoveryState + recoverySlice: Loadable }): ReactElement | null { - const recoverySlice = useAppSelector(selectRecoverySlice) const allRecoveryTxs = useMemo(() => { return recoverySlice.data.flatMap(({ queue }) => queue).sort((a, b) => a.timestamp - b.timestamp) }, [recoverySlice.data]) @@ -138,10 +138,10 @@ function TimeLeft({ value, unit }: { value: number; unit: string }): ReactElemen // Appease React TypeScript warnings const _useSupportsRecovery = () => useHasFeature(FEATURES.RECOVERY) -const _useRecovery = () => useAppSelector(selectRecovery) +const _useRecoverySlice = () => useAppSelector(selectRecoverySlice) export const RecoveryInProgress = madProps(_RecoveryInProgress, { blockTimestamp: useBlockTimestamp, supportsRecovery: _useSupportsRecovery, - recovery: _useRecovery, + recoverySlice: _useRecoverySlice, }) diff --git a/src/store/recoverySlice.ts b/src/store/recoverySlice.ts index 6f4e9f171a..f2941edf4c 100644 --- a/src/store/recoverySlice.ts +++ b/src/store/recoverySlice.ts @@ -1,4 +1,3 @@ -import { createSelector } from '@reduxjs/toolkit' import type { TransactionAddedEvent } from '@gnosis.pm/zodiac/dist/cjs/types/Delay' import type { BigNumber } from 'ethers' @@ -27,5 +26,3 @@ const { slice, selector } = makeLoadableSlice('recovery', initialState) export const recoverySlice = slice export const selectRecoverySlice = selector - -export const selectRecovery = createSelector(selector, (recovery) => recovery.data)