fix: test

safe-global · Nov 20, 2023 · 8b331b3 · 8b331b3
1 parent 9d5270e
commit 8b331b3
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 26 deletions.
diff --git 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,19 +48,31 @@ 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', () => {
     const result = render(
       <_RecoveryInProgress
         supportsRecovery={true}
         blockTimestamp={69420}
-        recovery={[{ queue: [] as Array<RecoveryQueueItem> }] as RecoveryState}
+        recoverySlice={{ loading: false, data: [{ queue: [] as Array<RecoveryQueueItem> }] 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
@@ -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<RecoveryState>
 }): 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
@@ -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)