Fix funds test, fix create safe test

.eslintrc

@@ -45,7 +45,8 @@
     ],
     "react/require-default-props": 0,
     "react/no-array-index-key": 0,
-    "react/jsx-props-no-spreading": 0
+    "react/jsx-props-no-spreading": 0,
+    "react/state-in-constructor": 0
   },
   "env": {
     "jest/globals": true,

src/routes/open/container/Open.jsx

@@ -31,6 +31,7 @@ export const createSafe = async (values: Object, userAccount: string, addSafe: A
   const ownersNames = getNamesFrom(values)
 
   await initContracts()
+
   const safe = await deploySafeContract(ownerAddresses, numConfirmations, userAccount)
   await checkReceiptStatus(safe.tx)
 

src/routes/safe/container/index.jsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import { connect } from 'react-redux'
 import Page from '~/components/layout/Page'
 import Layout from '~/routes/safe/components/Layout'
+import { type Token } from '~/logic/tokens/store/model/token'
 import selector, { type SelectorProps } from './selector'
 import actions, { type Actions } from './actions'
 

src/routes/safe/store/actions/fetchSafe.js

@@ -8,7 +8,6 @@ import addSafe from '~/routes/safe/store/actions/addSafe'
 import { getOwners, getSafeName } from '~/logic/safe/utils'
 import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
 import { getBalanceInEtherOf } from '~/logic/wallets/getWeb3'
-import updateSafe from '~/routes/safe/store/actions/updateSafe'
 
 const buildOwnersFrom = (
   safeOwners: string[],
@@ -36,16 +35,12 @@ export const buildSafe = async (safeAddress: string, safeName: string) => {
   return safe
 }
 
-export default (safeAddress: string, update: boolean = false) => async (dispatch: ReduxDispatch<GlobalState>) => {
+export default (safeAddress: string) => async (dispatch: ReduxDispatch<GlobalState>) => {
   try {
     const safeName = (await getSafeName(safeAddress)) || 'LOADED SAFE'
     const safeProps: SafeProps = await buildSafe(safeAddress, safeName)
 
-    if (update) {
-      dispatch(updateSafe(safeProps))
-    } else {
-      dispatch(addSafe(safeProps))
-    }
+    dispatch(addSafe(safeProps))
   } catch (err) {
     // eslint-disable-next-line
     console.error('Error while updating safe information: ', err)

src/routes/safe/store/reducer/safe.js

@@ -64,7 +64,7 @@ export default handleActions<SafeReducerState, *>(
       // in case of update it shouldn't, because a record would be initialized
       // with initial props and it would overwrite existing ones
 
-      if (state.has(safe.address)) {
+      if (state.hasIn(['safes', safe.address])) {
         return state.updateIn(['safes', safe.address], (prevSafe) => prevSafe.merge(safe))
       }
 

src/test/safe.dom.create.test.js

@@ -1,20 +1,21 @@
 // @flow
 import * as React from 'react'
 import { type Store } from 'redux'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, act } from '@testing-library/react'
 import { Provider } from 'react-redux'
 import { ConnectedRouter } from 'connected-react-router'
+import { sleep } from '~/utils/timer'
 import { ADD_OWNER_BUTTON } from '~/routes/open/components/SafeOwnersConfirmationsForm'
 import Open from '~/routes/open/container/Open'
 import { aNewStore, history, type GlobalState } from '~/store'
-import { sleep } from '~/utils/timer'
 import { getProviderInfo, getWeb3 } from '~/logic/wallets/getWeb3'
 import addProvider from '~/logic/wallets/store/actions/addProvider'
 import { makeProvider } from '~/logic/wallets/store/model/provider'
 import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
 import { whenSafeDeployed } from './builder/safe.dom.utils'
 
-// https://github.com/testing-library/@testing-library/react/issues/281
+// For some reason it warns about events not wrapped in act
+// But they're wrapped :(
 const originalError = console.error
 beforeAll(() => {
   console.error = (...args) => {
@@ -53,9 +54,10 @@ const deploySafe = async (createSafeForm: any, threshold: number, numOwners: num
   // Fill Safe's name
   const nameInput: HTMLInputElement = createSafeForm.getByPlaceholderText('Name of the new Safe')
 
-  fireEvent.change(nameInput, { target: { value: 'Adolfo Safe' } })
-  fireEvent.submit(form)
-  await sleep(400)
+  await act(async () => {
+    fireEvent.change(nameInput, { target: { value: 'Adolfo Safe' } })
+    fireEvent.submit(form)
+  })
 
   // Fill owners
   const addedUpfront = 1
@@ -63,7 +65,11 @@ const deploySafe = async (createSafeForm: any, threshold: number, numOwners: num
 
   expect(addOwnerButton.getElementsByTagName('span')[0].textContent).toEqual(ADD_OWNER_BUTTON)
   for (let i = addedUpfront; i < numOwners; i += 1) {
-    fireEvent.click(addOwnerButton)
+    /* eslint-disable */
+    await act(async () => {
+      fireEvent.click(addOwnerButton)
+    })
+    /* eslint-enable */
   }
 
   const ownerNameInputs = createSafeForm.getAllByPlaceholderText('Owner Name*')
@@ -75,23 +81,31 @@ const deploySafe = async (createSafeForm: any, threshold: number, numOwners: num
     const ownerNameInput = ownerNameInputs[i]
     const ownerAddressInput = ownerAddressInputs[i]
 
-    fireEvent.change(ownerNameInput, { target: { value: `Owner ${i + 1}` } })
-    fireEvent.change(ownerAddressInput, { target: { value: accounts[i] } })
+    /* eslint-disable */
+    await act(async () => {
+      fireEvent.change(ownerNameInput, { target: { value: `Owner ${i + 1}` } })
+      fireEvent.change(ownerAddressInput, { target: { value: accounts[i] } })
+    })
+    /* eslint-enable */
   }
 
   // Fill Threshold
   // The test is fragile here, MUI select btn is hard to find
   const thresholdSelect = createSafeForm.getAllByRole('button')[2]
-  fireEvent.click(thresholdSelect)
+  await act(async () => {
+    fireEvent.click(thresholdSelect)
+  })
 
   const thresholdOptions = createSafeForm.getAllByRole('option')
-  fireEvent.click(thresholdOptions[numOwners - 1])
-  fireEvent.submit(form)
-  await sleep(400)
+  await act(async () => {
+    fireEvent.click(thresholdOptions[numOwners - 1])
+    fireEvent.submit(form)
+  })
 
   // Submit
-  fireEvent.submit(form)
-  await sleep(400)
+  await act(async () => {
+    fireEvent.submit(form)
+  })
 
   // giving some time to the component for updating its state with safe
   // before destroying its context
@@ -100,6 +114,7 @@ const deploySafe = async (createSafeForm: any, threshold: number, numOwners: num
 
 const aDeployedSafe = async (specificStore: Store<GlobalState>, threshold?: number = 1, numOwners?: number = 1) => {
   const safe: React.Component<{}> = await renderOpenSafeForm(specificStore)
+  await sleep(1500)
   const safeAddress = await deploySafe(safe, threshold, numOwners)
 
   return safeAddress

src/test/safe.dom.funds.threshold>1.test.js

@@ -1,5 +1,5 @@
 // @flow
-import { fireEvent } from '@testing-library/react'
+import { fireEvent, waitForElement } from '@testing-library/react'
 import { aNewStore } from '~/store'
 import { aMinedSafe } from '~/test/builder/safe.redux.builder'
 import { sendEtherTo } from '~/test/utils/tokenMovements'
@@ -59,18 +59,20 @@ describe('DOM > Feature > Sending Funds', () => {
     expect(txRows.length).toBe(1)
 
     fireEvent.click(txRows[0])
-    await sleep(100)
-    fireEvent.click(SafeDom.getByTestId(CONFIRM_TX_BTN_TEST_ID))
-    await sleep(100)
+
+    const confirmBtn = await waitForElement(() => SafeDom.getByTestId(CONFIRM_TX_BTN_TEST_ID))
+    fireEvent.click(confirmBtn)
 
     // Travel confirm modal
-    fireEvent.click(SafeDom.getByTestId(APPROVE_TX_MODAL_SUBMIT_BTN_TEST_ID))
-    await sleep(2000)
+    const approveTxBtn = await waitForElement(() => SafeDom.getByTestId(APPROVE_TX_MODAL_SUBMIT_BTN_TEST_ID))
+    fireEvent.click(approveTxBtn)
 
     // EXECUTE TX
-    fireEvent.click(SafeDom.getByTestId(EXECUTE_TX_BTN_TEST_ID))
-    await sleep(100)
-    fireEvent.click(SafeDom.getByTestId(APPROVE_TX_MODAL_SUBMIT_BTN_TEST_ID))
+    const executeTxBtn = await waitForElement(() => SafeDom.getByTestId(EXECUTE_TX_BTN_TEST_ID))
+    fireEvent.click(executeTxBtn)
+
+    const confirmReviewTxBtn = await waitForElement(() => SafeDom.getByTestId(APPROVE_TX_MODAL_SUBMIT_BTN_TEST_ID))
+    fireEvent.click(confirmReviewTxBtn)
     await sleep(500)
 
     // THEN