refactor safe creation form test

src/logic/contracts/safeContracts.js

@@ -49,7 +49,7 @@ const createMasterCopies = async () => {
   proxyFactoryMaster = await ProxyFactory.new({ from: userAccount, gas: '5000000' })
 
   const GnosisSafe = getGnosisSafeContract(web3)
-  safeMaster = await GnosisSafe.new({ from: userAccount, gas: '6000000' })
+  safeMaster = await GnosisSafe.new({ from: userAccount, gas: '7000000' })
 }
 
 export const initContracts = ensureOnce(process.env.NODE_ENV === 'test' ? createMasterCopies : instanciateMasterCopies)

src/routes/open/components/SafeOwnersForm/index.jsx

@@ -4,7 +4,11 @@ import { withStyles } from '@material-ui/core/styles'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
 import {
-  required, composeValidators, uniqueAddress, mustBeEthereumAddress, noErrorsOn,
+  required,
+  composeValidators,
+  uniqueAddress,
+  mustBeEthereumAddress,
+  noErrorsOn,
 } from '~/components/forms/validator'
 import Block from '~/components/layout/Block'
 import Button from '~/components/layout/Button'
@@ -105,7 +109,6 @@ class SafeOwners extends React.Component<Props, State> {
     const initialValues = calculateValuesAfterRemoving(index, numOwners, values)
     updateInitialProps(initialValues)
 
-
     this.setState(state => ({
       numOwners: state.numOwners - 1,
     }))
@@ -135,11 +138,11 @@ class SafeOwners extends React.Component<Props, State> {
         </Row>
         <Hairline />
         <Block margin="md" padding="md">
-          { [...Array(Number(numOwners))].map((x, index) => {
+          {[...Array(Number(numOwners))].map((x, index) => {
             const addressName = getOwnerAddressBy(index)
 
             return (
-              <Row key={`owner${(index)}`} className={classes.owner}>
+              <Row key={`owner${index}`} className={classes.owner}>
                 <Col xs={4}>
                   <Field
                     className={classes.name}
@@ -155,13 +158,15 @@ class SafeOwners extends React.Component<Props, State> {
                   <Field
                     name={addressName}
                     component={TextField}
-                    inputAdornment={noErrorsOn(addressName, errors) && {
+                    inputAdornment={
-                      endAdornment: (
+                      noErrorsOn(addressName, errors) && {
-                        <InputAdornment position="end">
+                        endAdornment: (
-                          <CheckCircle className={classes.check} />
+                          <InputAdornment position="end">
-                        </InputAdornment>
+                            <CheckCircle className={classes.check} />
-                      ),
+                          </InputAdornment>
-                    }}
+                        ),
+                      }
+                    }
                     type="text"
                     validate={getAddressValidators(otherAccounts, index)}
                     placeholder="Owner Address*"
@@ -169,17 +174,17 @@ class SafeOwners extends React.Component<Props, State> {
                   />
                 </Col>
                 <Col xs={1} center="xs" middle="xs" className={classes.remove}>
-                  { index > 0
+                  {index > 0 && <Img src={trash} height={20} alt="Delete" onClick={this.onRemoveRow(index)} />}
-                    && <Img src={trash} height={20} alt="Delete" onClick={this.onRemoveRow(index)} />
-                  }
                 </Col>
               </Row>
             )
-          }) }
+          })}
         </Block>
         <Row align="center" grow className={classes.add} margin="xl">
-          <Button color="secondary" onClick={this.onAddOwner}>
+          <Button color="secondary" onClick={this.onAddOwner} data-testid="add-owner-btn">
-            <Paragraph weight="bold" size="md" noMargin>{ADD_OWNER_BUTTON}</Paragraph>
+            <Paragraph weight="bold" size="md" noMargin>
+              {ADD_OWNER_BUTTON}
+            </Paragraph>
           </Button>
         </Row>
       </React.Fragment>
@@ -202,5 +207,4 @@ const SafeOwnersPage = ({ updateInitialProps }: Object) => (controls: React$Node
   </React.Fragment>
 )
 
-
 export default SafeOwnersPage

src/routes/open/components/SafeThresholdForm/index.jsx

@@ -4,7 +4,9 @@ import { withStyles } from '@material-ui/core/styles'
 import MenuItem from '@material-ui/core/MenuItem'
 import Field from '~/components/forms/Field'
 import SelectField from '~/components/forms/SelectField'
-import { composeValidators, minValue, mustBeInteger, required } from '~/components/forms/validator'
+import {
+  composeValidators, minValue, mustBeInteger, required,
+} from '~/components/forms/validator'
 import Block from '~/components/layout/Block'
 import Row from '~/components/layout/Row'
 import Col from '~/components/layout/Col'
@@ -52,22 +54,23 @@ const SafeThreshold = ({ classes, values }: Props) => {
           <Field
             name={FIELD_CONFIRMATIONS}
             component={SelectField}
-            validate={composeValidators(
+            validate={composeValidators(required, mustBeInteger, minValue(1))}
-              required,
+            data-testid="threshold-select-input"
-              mustBeInteger,
-              minValue(1),
-            )}
           >
-            {
+            {[...Array(Number(numOwners))].map((x, index) => (
-              [...Array(Number(numOwners))].map((x, index) => (
+              <MenuItem key={`selectOwner${index}`} value={`${index + 1}`}>
-                <MenuItem key={`selectOwner${index}`} value={`${index + 1}`}>{index + 1}</MenuItem>
+                {index + 1}
-              ))
+              </MenuItem>
-            }
+            ))}
           </Field>
         </Col>
         <Col xs={10}>
           <Paragraph size="lg" color="primary" noMargin className={classes.owners}>
-            out of {numOwners} owner(s)
+            out of
+            {' '}
+            {numOwners}
+            {' '}
+            owner(s)
           </Paragraph>
         </Col>
       </Row>
@@ -85,5 +88,4 @@ const SafeOwnersPage = () => (controls: React$Node, { values }: Object) => (
   </React.Fragment>
 )
 
-
 export default SafeOwnersPage

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

@@ -2,7 +2,6 @@
 import * as React from 'react'
 import { type Store } from 'redux'
 import { render, fireEvent, cleanup } from 'react-testing-library'
-import Select from '@material-ui/core/Select'
 import { Provider } from 'react-redux'
 import { ConnectedRouter } from 'connected-react-router'
 import { ADD_OWNER_BUTTON } from '~/routes/open/components/SafeOwnersForm'
@@ -17,6 +16,21 @@ import { whenSafeDeployed } from './builder/safe.dom.utils'
 
 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 renderOpenSafeForm = async (localStore: Store<GlobalState>) => {
   const provider = await getProviderInfo()
   const walletRecord = makeProvider(provider)
@@ -31,53 +45,54 @@ const renderOpenSafeForm = async (localStore: Store<GlobalState>) => {
   )
 }
 
-const deploySafe = async (safe: any, threshold: number, numOwners: number) => {
+const deploySafe = async (createSafeForm: any, threshold: number, numOwners: number) => {
   const web3 = getWeb3()
   const accounts = await web3.eth.getAccounts()
 
   expect(threshold).toBeLessThanOrEqual(numOwners)
-  const form = safe.getByTestId('create-safe-form')
+  const form = createSafeForm.getByTestId('create-safe-form')
 
   // Fill Safe's name
-  const inputs = TestUtils.scryRenderedDOMComponentsWithTag(safe, 'input')
+  const nameInput: HTMLInputElement = createSafeForm.getByPlaceholderText('Name of the new Safe')
-  expect(inputs.length).toBe(1)
+
-  const fieldName = inputs[0]
+  fireEvent.change(nameInput, { target: { value: 'Adolfo Safe' } })
-  TestUtils.Simulate.change(fieldName, { target: { value: 'Adolfo Safe' } })
+  fireEvent.submit(form)
-  TestUtils.Simulate.submit(form)
   await sleep(400)
 
   // Fill owners
   const addedUpfront = 1
-  const buttons = TestUtils.scryRenderedDOMComponentsWithTag(safe, 'button')
+  const addOwnerButton = createSafeForm.getByTestId('add-owner-btn')
-  const addOwnerButton = buttons[1]
+
   expect(addOwnerButton.getElementsByTagName('span')[0].textContent).toEqual(ADD_OWNER_BUTTON)
   for (let i = addedUpfront; i < numOwners; i += 1) {
-    TestUtils.Simulate.click(addOwnerButton)
+    fireEvent.click(addOwnerButton)
   }
 
-  const ownerInputs = TestUtils.scryRenderedDOMComponentsWithTag(safe, 'input')
+  const ownerNameInputs = createSafeForm.getAllByPlaceholderText('Owner Name*')
-  expect(ownerInputs.length).toBe(numOwners * 2)
+  const ownerAddressInputs = createSafeForm.getAllByPlaceholderText('Owner Address*')
+  expect(ownerNameInputs.length).toBe(numOwners)
+  expect(ownerAddressInputs.length).toBe(numOwners)
+
   for (let i = addedUpfront; i < numOwners; i += 1) {
-    const nameIndex = i * 2
+    const ownerNameInput = ownerNameInputs[i]
-    const addressIndex = i * 2 + 1
+    const ownerAddressInput = ownerAddressInputs[i]
-    const ownerName = ownerInputs[nameIndex]
-    const account = ownerInputs[addressIndex]
 
-    TestUtils.Simulate.change(ownerName, { target: { value: `Adolfo ${i + 1} Eth Account` } })
+    fireEvent.change(ownerNameInput, { target: { value: `Owner ${i + 1}` } })
-    TestUtils.Simulate.change(account, { target: { value: accounts[i] } })
+    fireEvent.change(ownerAddressInput, { target: { value: accounts[i] } })
   }
-  TestUtils.Simulate.submit(form)
+  fireEvent.submit(form)
   await sleep(400)
 
   // Fill Threshold
-  const muiSelectFields = TestUtils.scryRenderedComponentsWithType(safe, Select)
+  const thresholdSelect = createSafeForm.getByRole('button')
-  expect(muiSelectFields.length).toEqual(1)
+  fireEvent.click(thresholdSelect)
-  muiSelectFields[0].props.onChange(`${threshold}`)
+  const thresholdOptions = createSafeForm.getAllByRole('option')
-  TestUtils.Simulate.submit(form)
+  fireEvent.click(thresholdOptions[numOwners - 1])
+  fireEvent.submit(form)
   await sleep(400)
 
   // Submit
-  TestUtils.Simulate.submit(form)
+  fireEvent.submit(form)
   await sleep(400)
 
   // giving some time to the component for updating its state with safe
@@ -93,7 +108,7 @@ const aDeployedSafe = async (specificStore: Store<GlobalState>, threshold?: numb
 }
 
 describe('DOM > Feature > CREATE a safe', () => {
-  it('fills correctly the safe form with 4 owners and 4 threshold', async () => {
+  it('fills correctly the safe form with 4 owners and 4 threshold and creates a safe', async () => {
     const owners = 4
     const threshold = 4
     const store = aNewStore()