send funds test refacotring wip

src/store/index.js

@@ -29,14 +29,15 @@ export type GlobalState = {
 
 export type GetState = () => GlobalState
 
-const reducers: Reducer<GlobalState> = combineReducers({
-  router: connectRouter(history),
+// customHistory is passed in tests, check test/builder/safe.dom.utils.js
+const reducers: Reducer<GlobalState> = (customHistory: any = history) => combineReducers({
+  router: connectRouter(customHistory),
   [PROVIDER_REDUCER_ID]: provider,
   [SAFE_REDUCER_ID]: safe,
   [TOKEN_REDUCER_ID]: tokens,
   [TRANSACTIONS_REDUCER_ID]: transactions,
 })
 
-export const store: Store<GlobalState> = createStore(reducers, finalCreateStore)
+export const store: Store<GlobalState> = createStore(reducers(), finalCreateStore)
 
-export const aNewStore = (localState?: Object): Store<GlobalState> => createStore(reducers, localState, finalCreateStore)
+export const aNewStore = (localState?: Object, customHistory: any = history): Store<GlobalState> => createStore(reducers(customHistory), localState, finalCreateStore)

src/test/builder/safe.dom.utils.js

@@ -1,18 +1,21 @@
 // @flow
 import * as React from 'react'
 import TestUtils from 'react-dom/test-utils'
+import { createMemoryHistory } from 'history'
 import { render } from '@testing-library/react'
 import ListItemText from '~/components/List/ListItemText/index'
 import { SEE_MULTISIG_BUTTON_TEXT } from '~/routes/safe/components/Safe/MultisigTx'
 import fetchTransactions from '~/routes/safe/store/actions/fetchTransactions'
 import { sleep } from '~/utils/timer'
+import { aNewStore, type GlobalState } from '~/store'
 import { Provider } from 'react-redux'
 import { ConnectedRouter } from 'connected-react-router'
 import AppRoutes from '~/routes'
 import { SAFELIST_ADDRESS, SETTINS_ADDRESS } from '~/routes/routes'
-import { history, type GlobalState } from '~/store'
 import { EMPTY_DATA } from '~/logic/wallets/ethTransactions'
 
+export const testHistory = createMemoryHistory
+
 export const EXPAND_BALANCE_INDEX = 0
 export const EXPAND_OWNERS_INDEX = 1
 export const ADD_OWNERS_INDEX = 2
@@ -93,25 +96,39 @@ export const refreshTransactions = async (store: Store<GlobalState>, safeAddress
   await sleep(1500)
 }
 
-const renderApp = (store: Store) => render(
+const renderApp = (store: Store) => ({
+  ...render(
     <Provider store={store}>
       <ConnectedRouter history={history}>
+        <React.Suspense fallback={<div />}>
           <AppRoutes />
+        </React.Suspense>
       </ConnectedRouter>
     </Provider>,
-)
+  ),
+  store,
+})
 
-export const renderSafeView = (store: Store, address: string) => {
-  history.push(`${SAFELIST_ADDRESS}/${address}`)
+export const renderSafeView = (address: string) => {
+  const url = `${SAFELIST_ADDRESS}/${address}`
+  const history = createMemoryHistory({ initialEntries: [url] })
+  const store = aNewStore(history)
 
-  return renderApp(store)
+  return renderApp(store, history)
 }
 
-export const travelToTokens = (store: Store, address: string): React$Component<{}> => {
+export const travelToTokens = (address: string) => {
   const url = `${SAFELIST_ADDRESS}/${address}${SETTINS_ADDRESS}`
-  history.push(url)
+  const history = createMemoryHistory({ initialEntries: [url] })
+  const store = aNewStore(history)
 
-  return renderApp(store)
+  return renderApp(store, history)
+}
+
+export const createTestStore = (initialRoute = '/') => {
+  const history = createMemoryHistory({initialEntries: [initialRoute]})
+
+  return aNewStore(history)
 }
 
 const INTERVAL = 500

src/test/safe.dom.funds.test.js

@@ -1,10 +1,9 @@
 // @flow
 import { render, fireEvent, cleanup } from '@testing-library/react'
 import * as fetchBalancesAction from '~/logic/tokens/store/actions/fetchTokens'
-import { aNewStore } from '~/store'
 import { aMinedSafe } from '~/test/builder/safe.redux.builder'
 import { sendTokenTo, getFirstTokenContract } from '~/test/utils/tokenMovements'
-import { EXPAND_BALANCE_INDEX, renderSafeView } from '~/test/builder/safe.dom.utils'
+import { EXPAND_BALANCE_INDEX, renderSafeView, createTestStore } from '~/test/builder/safe.dom.utils'
 import { getWeb3 } from '~/logic/wallets/getWeb3'
 import { sendMoveTokensForm, dispatchTknBalance } from '~/test/utils/transactions/moveTokens.helper'
 import { sleep } from '~/utils/timer'
@@ -12,11 +11,9 @@ import { sleep } from '~/utils/timer'
 afterEach(cleanup)
 
 describe('DOM > Feature > Funds', () => {
-  let store
   let safeAddress: string
   let accounts
   beforeEach(async () => {
-    store = aNewStore()
     safeAddress = await aMinedSafe(store)
     accounts = await getWeb3().eth.getAccounts()
   })
@@ -25,6 +22,8 @@ describe('DOM > Feature > Funds', () => {
     // GIVEN
     const numTokens = '100'
     const tokenAddress = await sendTokenTo(safeAddress, numTokens)
+    const SafeDom = await renderSafeView(safeAddress)
+    const { store } = SafeDom
 
     await dispatchTknBalance(store, tokenAddress, safeAddress)
     // const StandardToken = await fetchBalancesAction.getStandardTokenContract()
@@ -33,9 +32,8 @@ describe('DOM > Feature > Funds', () => {
     // console.log(await myToken.balanceOf(safeAddress))
 
     // WHEN
-    const SafeDom = await renderSafeView(store, safeAddress)
-    await sleep(800)
-
+    await sleep(1500)
+    console.log(SafeDom.history)
     const balanceRows = SafeDom.getAllByTestId('balance-row')
     const buttons = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'button')
     const expandBalance = buttons[EXPAND_BALANCE_INDEX]

src/test/utils/transactions/moveTokens.helper.js

@@ -8,6 +8,7 @@ import { whenExecuted } from '~/test/utils/logTransactions'
 import SendToken from '~/routes/safe/components/SendToken'
 import { makeToken, type Token } from '~/logic/tokens/store/model/token'
 import addTokens from '~/logic/tokens/store/actions/saveTokens'
+import { calculateBalanceOf } from '~/routes/safe/store/actions/fetchTokenBalances'
 
 export const sendMoveTokensForm = async (
   SafeDom: React$Component<any, any>,
@@ -44,22 +45,22 @@ export const sendMoveTokensForm = async (
 }
 
 export const dispatchTknBalance = async (store: Store, tokenAddress: string, address: string) => {
-  const fetchBalancesMock = jest.spyOn(fetchTokensAction, 'fetchTokens')
-  const funds = await fetchTokensAction.calculateBalanceOf(tokenAddress, address, 18)
+  const fetchBalancesMock = jest.fn()
+  const balance = await calculateBalanceOf(tokenAddress, address, 18)
   const balances: Map<string, Token> = Map().set(
     'TKN',
     makeToken({
       address: tokenAddress,
-      name: 'Token',
-      symbol: 'TKN',
+      name: 'OmiseGo',
+      symbol: 'OMG',
       decimals: 18,
       logoUri:
         'https://github.com/TrustWallet/tokens/blob/master/images/0x6810e776880c02933d47db1b9fc05908e5386b96.png?raw=true',
-      funds,
+      balance,
     }),
   )
   fetchBalancesMock.mockImplementation(() => store.dispatch(addTokens(address, balances)))
-  await store.dispatch(fetchTokensAction.fetchTokens(address))
+  await store.dispatch(fetchTokensAction.fetchTokens())
   fetchBalancesMock.mockRestore()
 }