adding owner test wip

src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx

@@ -23,6 +23,10 @@ import {
 } from '~/components/forms/validator'
 import { styles } from './style'
 
+export const ADD_OWNER_NAME_INPUT_TESTID = 'add-owner-name-input'
+export const ADD_OWNER_ADDRESS_INPUT_TESTID = 'add-owner-address-testid'
+export const ADD_OWNER_NEXT_BTN_TESTID = 'add-owner-next btn'
+
 type Props = {
   onClose: () => void,
   classes: Object,
@@ -67,6 +71,7 @@ const OwnerForm = ({
                     placeholder="Owner name*"
                     text="Owner name*"
                     className={classes.addressInput}
+                    testId={ADD_OWNER_NAME_INPUT_TESTID}
                   />
                 </Col>
               </Row>
@@ -80,6 +85,7 @@ const OwnerForm = ({
                     placeholder="Owner address*"
                     text="Owner address*"
                     className={classes.addressInput}
+                    testId={ADD_OWNER_ADDRESS_INPUT_TESTID}
                   />
                 </Col>
               </Row>
@@ -95,7 +101,7 @@ const OwnerForm = ({
                 variant="contained"
                 minWidth={140}
                 color="primary"
-                data-testid="review-tx-btn"
+                testId={ADD_OWNER_NEXT_BTN_TESTID}
               >
                 Next
               </Button>

src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx

@@ -10,18 +10,17 @@ import Identicon from '~/components/Identicon'
 import Link from '~/components/layout/Link'
 import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
-import GnoForm from '~/components/forms/GnoForm'
 import Col from '~/components/layout/Col'
 import Button from '~/components/layout/Button'
 import Block from '~/components/layout/Block'
 import Hairline from '~/components/layout/Hairline'
-import Field from '~/components/forms/Field'
-import TextField from '~/components/forms/TextField'
 import type { Owner } from '~/routes/safe/store/models/owner'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
 import { secondary } from '~/theme/variables'
 import { styles } from './style'
 
+export const ADD_OWNER_SUBMIT_BTN = 'add-owner-submit-btn'
+
 const openIconStyle = {
   height: '16px',
   color: secondary,
@@ -39,14 +38,7 @@ type Props = {
 }
 
 const ReviewAddOwner = ({
-  classes,
+  classes, onClose, safeName, owners, network, values, onClickBack, onSubmit,
-  onClose,
-  safeName,
-  owners,
-  network,
-  values,
-  onClickBack,
-  onSubmit,
 }: Props) => {
   const handleSubmit = () => {
     onSubmit()
@@ -85,7 +77,13 @@ const ReviewAddOwner = ({
                   Any transaction requires the confirmation of:
                 </Paragraph>
                 <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
-                  {values.threshold} out of {owners.size + 1} owner(s)
+                  {values.threshold}
+                  {' '}
+                  out of
+                  {' '}
+                  {owners.size + 1}
+                  {' '}
+                  owner(s)
                 </Paragraph>
               </Block>
             </Block>
@@ -93,7 +91,9 @@ const ReviewAddOwner = ({
           <Col xs={8} layout="column" className={classes.owners}>
             <Row className={classes.ownersTitle}>
               <Paragraph size="lg" color="primary" noMargin>
-                {owners.size + 1} Safe owner(s)
+                {owners.size + 1}
+                {' '}
+                Safe owner(s)
               </Paragraph>
             </Row>
             <Hairline />
@@ -164,7 +164,7 @@ const ReviewAddOwner = ({
           variant="contained"
           minWidth={140}
           color="primary"
-          data-testid="review-tx-btn"
+          testId={ADD_OWNER_SUBMIT_BTN}
         >
           Submit
         </Button>

src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx

@@ -4,8 +4,8 @@ import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
-import SelectField from '~/components/forms/SelectField'
 import MenuItem from '@material-ui/core/MenuItem'
+import SelectField from '~/components/forms/SelectField'
 import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
 import GnoForm from '~/components/forms/GnoForm'
@@ -14,17 +14,14 @@ import Button from '~/components/layout/Button'
 import Block from '~/components/layout/Block'
 import Hairline from '~/components/layout/Hairline'
 import Field from '~/components/forms/Field'
-import TextField from '~/components/forms/TextField'
 import type { Owner } from '~/routes/safe/store/models/owner'
 import {
-  composeValidators,
+  composeValidators, required, minValue, maxValue, mustBeInteger,
-  required,
-  minValue,
-  maxValue,
-  mustBeInteger,
 } from '~/components/forms/validator'
 import { styles } from './style'
 
+export const ADD_OWNER_THRESHOLD_NEXT_BTN_TESTID = 'add-owner-threshold-next-btn'
+
 type Props = {
   onClose: () => void,
   classes: Object,
@@ -35,12 +32,7 @@ type Props = {
 }
 
 const ThresholdForm = ({
-  classes,
+  classes, onClose, owners, threshold, onClickBack, onSubmit,
-  onClose,
-  owners,
-  threshold,
-  onClickBack,
-  onSubmit,
 }: Props) => {
   const handleSubmit = (values) => {
     onSubmit(values)
@@ -58,77 +50,73 @@ const ThresholdForm = ({
         </IconButton>
       </Row>
       <Hairline />
-      <GnoForm onSubmit={handleSubmit} initialValues={{threshold: threshold.toString()}}>
+      <GnoForm onSubmit={handleSubmit} initialValues={{ threshold: threshold.toString() }}>
-        {(...args) => {
+        {() => (
-          const formState = args[2]
+          <React.Fragment>
-
+            <Block className={classes.formContainer}>
-          return (
+              <Row>
-            <React.Fragment>
+                <Paragraph weight="bolder" className={classes.headingText}>
-              <Block className={classes.formContainer}>
-                <Row>
-                  <Paragraph weight="bolder" className={classes.headingText}>
                     Set the required owner confirmations:
-                  </Paragraph>
+                </Paragraph>
-                </Row>
-                <Row>
-                  <Paragraph weight="bolder">
-                    Any transaction over any daily limit requires the confirmation of:
-                  </Paragraph>
-                </Row>
-                <Row margin="xl" align="center" className={classes.inputRow}>
-                  <Col xs={2}>
-                    <Field
-                      name={"threshold"}
-                      render={props => (
-                        <React.Fragment>
-                          <SelectField {...props} disableError>
-                            {[...Array(Number(owners.size + 1))].map((x, index) => (
-                              <MenuItem key={index} value={`${index + 1}`}>
-                                {index + 1}
-                              </MenuItem>
-                            ))}
-                          </SelectField>
-                          {props.meta.error && props.meta.touched && (
-                            <Paragraph className={classes.errorText} noMargin color="error">
-                              {props.meta.error}
-                            </Paragraph>
-                          )}
-                        </React.Fragment>
-                      )}
-                      validate={composeValidators(required, mustBeInteger, minValue(1), maxValue(owners.size + 1))}
-                      data-testid="threshold-select-input"
-                    />
-                  </Col>
-                  <Col xs={10}>
-                    <Paragraph size="lg" color="primary" noMargin className={classes.ownersText}>
-                      out of
-                      {' '}
-                      {owners.size + 1}
-                      {' '}
-                      owner(s)
-                    </Paragraph>
-                  </Col>
-                </Row>
-              </Block>
-              <Hairline />
-              <Row align="center" className={classes.buttonRow}>
-                <Button className={classes.button} minWidth={140} onClick={onClickBack}>
-                  Back
-                </Button>
-                <Button
-                  type="submit"
-                  className={classes.button}
-                  variant="contained"
-                  minWidth={140}
-                  color="primary"
-                  data-testid="review-tx-btn"
-                >
-                  Review
-                </Button>
               </Row>
-            </React.Fragment>
+              <Row>
-          )
+                <Paragraph weight="bolder">
-        }}
+                    Any transaction over any daily limit requires the confirmation of:
+                </Paragraph>
+              </Row>
+              <Row margin="xl" align="center" className={classes.inputRow}>
+                <Col xs={2}>
+                  <Field
+                    name="threshold"
+                    render={props => (
+                      <React.Fragment>
+                        <SelectField {...props} disableError>
+                          {[...Array(Number(owners.size + 1))].map((x, index) => (
+                            <MenuItem key={index} value={`${index + 1}`}>
+                              {index + 1}
+                            </MenuItem>
+                          ))}
+                        </SelectField>
+                        {props.meta.error && props.meta.touched && (
+                          <Paragraph className={classes.errorText} noMargin color="error">
+                            {props.meta.error}
+                          </Paragraph>
+                        )}
+                      </React.Fragment>
+                    )}
+                    validate={composeValidators(required, mustBeInteger, minValue(1), maxValue(owners.size + 1))}
+                    data-testid="threshold-select-input"
+                  />
+                </Col>
+                <Col xs={10}>
+                  <Paragraph size="lg" color="primary" noMargin className={classes.ownersText}>
+                      out of
+                    {' '}
+                    {owners.size + 1}
+                    {' '}
+owner(s)
+                  </Paragraph>
+                </Col>
+              </Row>
+            </Block>
+            <Hairline />
+            <Row align="center" className={classes.buttonRow}>
+              <Button className={classes.button} minWidth={140} onClick={onClickBack}>
+                  Back
+              </Button>
+              <Button
+                type="submit"
+                className={classes.button}
+                variant="contained"
+                minWidth={140}
+                color="primary"
+                testId={ADD_OWNER_THRESHOLD_NEXT_BTN_TESTID}
+              >
+                  Review
+              </Button>
+            </Row>
+          </React.Fragment>
+        )}
       </GnoForm>
     </React.Fragment>
   )

src/routes/safe/components/Settings/ManageOwners/index.jsx

@@ -30,6 +30,7 @@ import RemoveOwnerIcon from '../assets/icons/bin.svg'
 
 export const RENAME_OWNER_BTN_TESTID = 'rename-owner-btn'
 export const REMOVE_OWNER_BTN_TESTID = 'remove-owner-btn'
+export const ADD_OWNER_BTN_TESTID = 'add-owner-btn'
 export const OWNERS_ROW_TESTID = 'owners-row'
 
 const controlsStyle = {
@@ -172,6 +173,7 @@ class ManageOwners extends React.Component<Props, State> {
               variant="contained"
               color="primary"
               onClick={this.onShow('AddOwner')}
+              testId={ADD_OWNER_BTN_TESTID}
             >
               Add new owner
             </Button>

src/test/safe.dom.settings.owners.test.js

@@ -6,11 +6,13 @@ import { renderSafeView } from '~/test/builder/safe.dom.utils'
 import { sleep } from '~/utils/timer'
 import 'jest-dom/extend-expect'
 import { SETTINGS_TAB_BTN_TESTID } from '~/routes/safe/components/Layout'
+import { getWeb3 } from '~/logic/wallets/getWeb3'
 import { OWNERS_SETTINGS_TAB_TEST_ID } from '~/routes/safe/components/Settings'
 import {
   RENAME_OWNER_BTN_TESTID,
   OWNERS_ROW_TESTID,
   REMOVE_OWNER_BTN_TESTID,
+  ADD_OWNER_BTN_TESTID,
 } from '~/routes/safe/components/Settings/ManageOwners'
 import {
   RENAME_OWNER_INPUT_TESTID,
@@ -19,6 +21,13 @@ import {
 import { REMOVE_OWNER_MODAL_NEXT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner'
 import { REMOVE_OWNER_THRESHOLD_NEXT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm'
 import { REMOVE_OWNER_REVIEW_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review'
+import { ADD_OWNER_THRESHOLD_NEXT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm'
+import {
+  ADD_OWNER_NAME_INPUT_TESTID,
+  ADD_OWNER_ADDRESS_INPUT_TESTID,
+  ADD_OWNER_NEXT_BTN_TESTID,
+} from '~/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm'
+import { ADD_OWNER_SUBMIT_BTN } from '~/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review'
 
 afterEach(cleanup)
 
@@ -102,7 +111,46 @@ describe('DOM > Feature > Settings - Manage owners', () => {
     expect(ownerRows.length).toBe(1)
   })
 
-  it('Replaces a owner', async () => {})
+  it('Adds a new owner', async () => {
+    const NEW_OWNER_NAME = 'I am a new owner'
+    const NEW_OWNER_ADDRESS = (await getWeb3().eth.getAccounts())[1]
 
-  it('Adds a new owner', async () => {})
+    const SafeDom = renderSafeView(store, safeAddress)
+    await sleep(1300)
+
+    // Travel to settings
+    const settingsBtn = SafeDom.getByTestId(SETTINGS_TAB_BTN_TESTID)
+    fireEvent.click(settingsBtn)
+    await sleep(200)
+
+    // click on owners settings
+    const ownersSettingsBtn = SafeDom.getByTestId(OWNERS_SETTINGS_TAB_TEST_ID)
+    fireEvent.click(ownersSettingsBtn)
+    await sleep(200)
+
+    // click add owner btn
+    fireEvent.click(SafeDom.getByTestId(ADD_OWNER_BTN_TESTID))
+    await sleep(200)
+
+    // fill and travel add owner modal
+    const ownerNameInput = SafeDom.getByTestId(ADD_OWNER_NAME_INPUT_TESTID)
+    const ownerAddressInput = SafeDom.getByTestId(ADD_OWNER_ADDRESS_INPUT_TESTID)
+    const nextBtn = SafeDom.getByTestId(ADD_OWNER_NEXT_BTN_TESTID)
+    fireEvent.change(ownerNameInput, { target: { value: NEW_OWNER_NAME } })
+    fireEvent.change(ownerAddressInput, { target: { value: NEW_OWNER_ADDRESS } })
+    fireEvent.click(nextBtn)
+    await sleep(200)
+
+    fireEvent.click(SafeDom.getByTestId(ADD_OWNER_THRESHOLD_NEXT_BTN_TESTID))
+    fireEvent.click(SafeDom.getByTestId(ADD_OWNER_SUBMIT_BTN))
+    await sleep(400)
+
+    // check if owner was added
+    const newOwnerRow = SafeDom.getAllByTestId(OWNERS_ROW_TESTID)[1]
+
+    expect(newOwnerRow).toHaveTextContent(NEW_OWNER_NAME)
+    expect(newOwnerRow).toHaveTextContent(NEW_OWNER_ADDRESS)
+  })
+
+  it('Replaces a owner', async () => {})
 })