refactor safe creation form test

This commit is contained in:
mmv 2019-05-30 16:57:24 +04:00
parent 4f54a60866
commit c3241a9b20
4 changed files with 79 additions and 58 deletions

View File

@ -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)

View File

@ -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) && {
endAdornment: (
<InputAdornment position="end">
<CheckCircle className={classes.check} />
</InputAdornment>
),
}}
inputAdornment={
noErrorsOn(addressName, errors) && {
endAdornment: (
<InputAdornment position="end">
<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
&& <Img src={trash} height={20} alt="Delete" onClick={this.onRemoveRow(index)} />
}
{index > 0 && <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}>
<Paragraph weight="bold" size="md" noMargin>{ADD_OWNER_BUTTON}</Paragraph>
<Button color="secondary" onClick={this.onAddOwner} data-testid="add-owner-btn">
<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

View File

@ -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(
required,
mustBeInteger,
minValue(1),
)}
validate={composeValidators(required, mustBeInteger, minValue(1))}
data-testid="threshold-select-input"
>
{
[...Array(Number(numOwners))].map((x, index) => (
<MenuItem key={`selectOwner${index}`} value={`${index + 1}`}>{index + 1}</MenuItem>
))
}
{[...Array(Number(numOwners))].map((x, index) => (
<MenuItem key={`selectOwner${index}`} value={`${index + 1}`}>
{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

View File

@ -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')
expect(inputs.length).toBe(1)
const fieldName = inputs[0]
TestUtils.Simulate.change(fieldName, { target: { value: 'Adolfo Safe' } })
TestUtils.Simulate.submit(form)
const nameInput: HTMLInputElement = createSafeForm.getByPlaceholderText('Name of the new Safe')
fireEvent.change(nameInput, { target: { value: 'Adolfo Safe' } })
fireEvent.submit(form)
await sleep(400)
// Fill owners
const addedUpfront = 1
const buttons = TestUtils.scryRenderedDOMComponentsWithTag(safe, 'button')
const addOwnerButton = buttons[1]
const addOwnerButton = createSafeForm.getByTestId('add-owner-btn')
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')
expect(ownerInputs.length).toBe(numOwners * 2)
const ownerNameInputs = createSafeForm.getAllByPlaceholderText('Owner Name*')
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 addressIndex = i * 2 + 1
const ownerName = ownerInputs[nameIndex]
const account = ownerInputs[addressIndex]
const ownerNameInput = ownerNameInputs[i]
const ownerAddressInput = ownerAddressInputs[i]
TestUtils.Simulate.change(ownerName, { target: { value: `Adolfo ${i + 1} Eth Account` } })
TestUtils.Simulate.change(account, { target: { value: accounts[i] } })
fireEvent.change(ownerNameInput, { target: { value: `Owner ${i + 1}` } })
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)
expect(muiSelectFields.length).toEqual(1)
muiSelectFields[0].props.onChange(`${threshold}`)
TestUtils.Simulate.submit(form)
const thresholdSelect = createSafeForm.getByRole('button')
fireEvent.click(thresholdSelect)
const thresholdOptions = createSafeForm.getAllByRole('option')
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()