refactor safe dom load test, fix safe address validator

src/routes/load/components/DetailsForm/index.jsx

@@ -37,9 +37,11 @@ const styles = () => ({
 export const SAFE_INSTANCE_ERROR = 'Address given is not a safe instance'
 export const SAFE_MASTERCOPY_ERROR = 'Mastercopy used by this safe is not the same'
 
+// In case of an error here, it will be swallowed by final-form
+// So if you're experiencing any strang behaviours like freeze or hanging
+// Don't mind to check if everything is OK inside this function :)
 export const safeFieldsValidation = async (values: Object) => {
   const errors = {}
-
   const web3 = getWeb3()
   const safeAddress = values[FIELD_LOAD_ADDRESS]
   if (!safeAddress || mustBeEthereumAddress(safeAddress) !== undefined) {
@@ -51,27 +53,21 @@ export const safeFieldsValidation = async (values: Object) => {
 
   const code = await web3.eth.getCode(safeAddress)
   const codeWithoutMetadata = code.substring(0, code.lastIndexOf(metaData))
-
   const proxyCode = SafeProxy.deployedBytecode
   const proxyCodeWithoutMetadata = proxyCode.substring(0, proxyCode.lastIndexOf(metaData))
-
   const safeInstance = codeWithoutMetadata === proxyCodeWithoutMetadata
   if (!safeInstance) {
     errors[FIELD_LOAD_ADDRESS] = SAFE_INSTANCE_ERROR
-
     return errors
   }
 
   // check mastercopy
-  const proxy = contract(SafeProxy)
+  const proxyAddressFromStorage = await web3.eth.getStorageAt(safeAddress, 0)
-  proxy.setProvider(web3.currentProvider)
+  const checksummedProxyAddress = web3.utils.toChecksumAddress(proxyAddressFromStorage)
-  const proxyInstance = await proxy.at(safeAddress)
-  const proxyImplementation = await proxyInstance.implementation()
-
   const safeMaster = await getSafeMasterContract()
   const masterCopy = safeMaster.address
 
-  const sameMasterCopy = proxyImplementation === masterCopy
+  const sameMasterCopy = checksummedProxyAddress === masterCopy
   if (!sameMasterCopy) {
     errors[FIELD_LOAD_ADDRESS] = SAFE_MASTERCOPY_ERROR
   }

src/routes/load/components/Layout.jsx

@@ -12,9 +12,7 @@ import { history } from '~/store'
 import { secondary } from '~/theme/variables'
 import { type SelectorProps } from '~/routes/load/container/selector'
 
-const getSteps = () => [
+const getSteps = () => ['Details', 'Review']
-  'Details', 'Review',
-]
 
 type Props = SelectorProps & {
   onLoadSafeSubmit: (values: Object) => Promise<void>,
@@ -37,30 +35,24 @@ const Layout = ({
 
   return (
     <React.Fragment>
-      { provider
+      {provider ? (
-        ? (
+        <Block>
-          <Block>
+          <Row align="center">
-            <Row align="center">
+            <IconButton onClick={back} style={iconStyle} disableRipple>
-              <IconButton onClick={back} style={iconStyle} disableRipple>
+              <ChevronLeft />
-                <ChevronLeft />
+            </IconButton>
-              </IconButton>
+            <Heading tag="h2">Load existing Safe</Heading>
-              <Heading tag="h2">Load existing Safe</Heading>
+          </Row>
-            </Row>
+          <Stepper onSubmit={onLoadSafeSubmit} steps={steps} testId="load-safe-form">
-            <Stepper
+            <Stepper.Page validate={safeFieldsValidation}>{DetailsForm}</Stepper.Page>
-              onSubmit={onLoadSafeSubmit}
+            <Stepper.Page network={network} userAddress={userAddress}>
-              steps={steps}
+              {ReviewInformation}
-            >
+            </Stepper.Page>
-              <Stepper.Page validate={safeFieldsValidation}>
+          </Stepper>
-                { DetailsForm }
+        </Block>
-              </Stepper.Page>
+      ) : (
-              <Stepper.Page network={network} userAddress={userAddress}>
+        <div>No metamask detected</div>
-                { ReviewInformation }
+      )}
-              </Stepper.Page>
-            </Stepper>
-          </Block>
-        )
-        : <div>No metamask detected</div>
-      }
     </React.Fragment>
   )
 }

src/test/safe.dom.load.test.js

@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react'
 import { type Store } from 'redux'
-import TestUtils from 'react-dom/test-utils'
 import { Provider } from 'react-redux'
+import { render, fireEvent, cleanup } from 'react-testing-library'
 import { ConnectedRouter } from 'connected-react-router'
 import Load from '~/routes/load/container/Load'
 import { aNewStore, history, type GlobalState } from '~/store'
@@ -13,12 +13,30 @@ import { makeProvider } from '~/logic/wallets/store/model/provider'
 import { aMinedSafe } from './builder/safe.redux.builder'
 import { whenSafeDeployed } from './builder/safe.dom.utils'
 
-const travelToLoadRoute = async (localStore: Store<GlobalState>) => {
+afterEach(cleanup)
+
+// https://github.com/testing-library/react-testing-library/issues/281
+const originalError = console.error
+beforeAll(() => {
+  console.error = (...args) => {
+    if (/Warning.*not wrapped in act/.test(args[0])) {
+      return
+    }
+    originalError.call(console, ...args)
+  }
+})
+
+afterAll(() => {
+  console.error = originalError
+})
+
+
+const renderLoadSafe = async (localStore: Store<GlobalState>) => {
   const provider = await getProviderInfo()
   const walletRecord = makeProvider(provider)
   localStore.dispatch(addProvider(walletRecord))
 
-  return TestUtils.renderIntoDocument(
+  return render(
     <Provider store={localStore}>
       <ConnectedRouter history={history}>
         <Load />
@@ -31,26 +49,22 @@ describe('DOM > Feature > LOAD a safe', () => {
   it('load correctly a created safe', async () => {
     const store = aNewStore()
     const address = await aMinedSafe(store)
-    const LoadDom = await travelToLoadRoute(store)
+    const LoadSafePage = await renderLoadSafe(store)
-
+    const form = LoadSafePage.getByTestId('load-safe-form')
-    const form = TestUtils.findRenderedDOMComponentWithTag(LoadDom, 'form')
+    const safeNameInput = LoadSafePage.getByPlaceholderText('Name of the Safe')
-    const inputs = TestUtils.scryRenderedDOMComponentsWithTag(LoadDom, 'input')
+    const safeAddressInput = LoadSafePage.getByPlaceholderText('Safe Address*')
 
     // Fill Safe's name
-    const fieldName = inputs[0]
+    fireEvent.change(safeNameInput, { target: { value: 'A Safe To Load' } })
-    TestUtils.Simulate.change(fieldName, { target: { value: 'Adolfo Safe' } })
+    fireEvent.change(safeAddressInput, { target: { value: address } })
-    const fieldAddress = inputs[1]
-    TestUtils.Simulate.change(fieldAddress, { target: { value: address } })
     await sleep(400)
 
     // Click next
-    TestUtils.Simulate.submit(form)
+    fireEvent.submit(form)
     await sleep(400)
 
     // Submit
-    TestUtils.Simulate.submit(form)
+    fireEvent.submit(form)
-    await sleep(400)
-
     const deployedAddress = await whenSafeDeployed()
     expect(deployedAddress).toBe(address)
   })