Add test for replacing an owner and refactoring

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

@@ -25,7 +25,7 @@ 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'
+export const ADD_OWNER_NEXT_BTN_TESTID = 'add-owner-next-btn'
 
 type Props = {
   onClose: () => void,

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

@@ -19,7 +19,7 @@ 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'
+export const ADD_OWNER_SUBMIT_BTN_TESTID = 'add-owner-submit-btn'
 
 const openIconStyle = {
   height: '16px',
@@ -164,7 +164,7 @@ const ReviewAddOwner = ({
           variant="contained"
           minWidth={140}
           color="primary"
-          testId={ADD_OWNER_SUBMIT_BTN}
+          testId={ADD_OWNER_SUBMIT_BTN_TESTID}
         >
           Submit
         </Button>

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

@@ -29,6 +29,10 @@ import {
 import { styles } from './style'
 import { secondary } from '~/theme/variables'
 
+export const REPLACE_OWNER_NAME_INPUT_TESTID = 'replace-owner-name-input'
+export const REPLACE_OWNER_ADDRESS_INPUT_TESTID = 'replace-owner-address-testid'
+export const REPLACE_OWNER_NEXT_BTN_TESTID = 'replace-owner-next-btn'
+
 const openIconStyle = {
   height: '16px',
   color: secondary,
@@ -110,6 +114,7 @@ const OwnerForm = ({
                     placeholder="Owner name*"
                     text="Owner name*"
                     className={classes.addressInput}
+                    testId={REPLACE_OWNER_NAME_INPUT_TESTID}
                   />
                 </Col>
               </Row>
@@ -123,6 +128,7 @@ const OwnerForm = ({
                     placeholder="Owner address*"
                     text="Owner address*"
                     className={classes.addressInput}
+                    testId={REPLACE_OWNER_ADDRESS_INPUT_TESTID}
                   />
                 </Col>
               </Row>
@@ -138,6 +144,7 @@ const OwnerForm = ({
                 variant="contained"
                 minWidth={140}
                 color="primary"
+                testId={REPLACE_OWNER_NEXT_BTN_TESTID}
               >
                 Next
               </Button>

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

@@ -19,6 +19,8 @@ import { getEtherScanLink } from '~/logic/wallets/getWeb3'
 import { secondary } from '~/theme/variables'
 import { styles } from './style'
 
+export const REPLACE_OWNER_SUBMIT_BTN_TESTID = 'replace-owner-submit-btn'
+
 const openIconStyle = {
   height: '16px',
   color: secondary,
@@ -208,7 +210,7 @@ const ReviewRemoveOwner = ({
           variant="contained"
           minWidth={140}
           color="primary"
-          data-testid="review-tx-btn"
+          testId={REPLACE_OWNER_SUBMIT_BTN_TESTID}
         >
           Submit
         </Button>

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

@@ -31,6 +31,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 REPLACE_OWNER_BTN_TESTID = 'replace-owner-btn'
 export const OWNERS_ROW_TESTID = 'owners-row'
 
 const controlsStyle = {
@@ -162,6 +163,7 @@ class ManageOwners extends React.Component<Props, State> {
                         className={classes.replaceOwnerIcon}
                         src={ReplaceOwnerIcon}
                         onClick={this.onShow('ReplaceOwner', row)}
+                        testId={REPLACE_OWNER_BTN_TESTID}
                       />
                       {ownerData.size > 1 && (
                         <Img

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

@@ -20,6 +20,8 @@ import actions, { type Actions } from './actions'
 import { styles } from './style'
 import RemoveSafeIcon from './assets/icons/bin.svg'
 
+export const OWNERS_SETTINGS_TAB_TESTID = 'owner-settings-tab'
+
 type State = {
   showRemoveSafe: boolean,
   menuOptionIndex: number,
@@ -112,6 +114,7 @@ class Settings extends React.Component<Props, State> {
               <Row
                 className={cn(classes.menuOption, menuOptionIndex === 2 && classes.active)}
                 onClick={this.handleChange(2)}
+                testId={OWNERS_SETTINGS_TAB_TESTID}
               >
                 Owners ({owners.size})
               </Row>

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

@@ -6,12 +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 { OWNERS_SETTINGS_TAB_TEST_ID } from '~/routes/safe/components/Settings'
+import { OWNERS_SETTINGS_TAB_TESTID } from '~/routes/safe/components/Settings'
 import {
   RENAME_OWNER_BTN_TESTID,
   OWNERS_ROW_TESTID,
   REMOVE_OWNER_BTN_TESTID,
   ADD_OWNER_BTN_TESTID,
+  REPLACE_OWNER_BTN_TESTID,
 } from '~/routes/safe/components/Settings/ManageOwners'
 import {
   RENAME_OWNER_INPUT_TESTID,
@@ -26,7 +27,13 @@ import {
   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'
+import { ADD_OWNER_SUBMIT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review'
+import {
+  REPLACE_OWNER_NEXT_BTN_TESTID,
+  REPLACE_OWNER_NAME_INPUT_TESTID,
+  REPLACE_OWNER_ADDRESS_INPUT_TESTID,
+} from '~/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm'
+import { REPLACE_OWNER_SUBMIT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review'
 
 afterEach(cleanup)
 
@@ -50,7 +57,7 @@ describe('DOM > Feature > Settings - Manage owners', () => {
     await sleep(200)
 
     // click on owners settings
-    const ownersSettingsBtn = SafeDom.getByTestId(OWNERS_SETTINGS_TAB_TEST_ID)
+    const ownersSettingsBtn = SafeDom.getByTestId(OWNERS_SETTINGS_TAB_TESTID)
     fireEvent.click(ownersSettingsBtn)
     await sleep(200)
 
@@ -82,13 +89,15 @@ describe('DOM > Feature > Settings - Manage owners', () => {
     await sleep(200)
 
     // click on owners settings
-    const ownersSettingsBtn = SafeDom.getByTestId(OWNERS_SETTINGS_TAB_TEST_ID)
+    const ownersSettingsBtn = SafeDom.getByTestId(OWNERS_SETTINGS_TAB_TESTID)
     fireEvent.click(ownersSettingsBtn)
     await sleep(200)
 
     // check if there are 2 owners
     let ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TESTID)
     expect(ownerRows.length).toBe(2)
+    expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1')
+    expect(ownerRows[1]).toHaveTextContent('Adol 2 Eth Account0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0')
 
     // click remove owner btn which opens the modal
     const removeOwnerBtn = SafeDom.getAllByTestId(REMOVE_OWNER_BTN_TESTID)[1]
@@ -108,6 +117,7 @@ describe('DOM > Feature > Settings - Manage owners', () => {
     // check if owner was removed
     ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TESTID)
     expect(ownerRows.length).toBe(1)
+    expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1')
   })
 
   it('Adds a new owner', async () => {
@@ -123,10 +133,15 @@ describe('DOM > Feature > Settings - Manage owners', () => {
     await sleep(200)
 
     // click on owners settings
-    const ownersSettingsBtn = SafeDom.getByTestId(OWNERS_SETTINGS_TAB_TEST_ID)
+    const ownersSettingsBtn = SafeDom.getByTestId(OWNERS_SETTINGS_TAB_TESTID)
     fireEvent.click(ownersSettingsBtn)
     await sleep(200)
 
+    // check if there is 1 owner
+    let ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TESTID)
+    expect(ownerRows.length).toBe(1)
+    expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1')
+
     // click add owner btn
     fireEvent.click(SafeDom.getByTestId(ADD_OWNER_BTN_TESTID))
     await sleep(200)
@@ -142,15 +157,62 @@ describe('DOM > Feature > Settings - Manage owners', () => {
 
     fireEvent.click(SafeDom.getByTestId(ADD_OWNER_THRESHOLD_NEXT_BTN_TESTID))
     await sleep(200)
-    fireEvent.click(SafeDom.getByTestId(ADD_OWNER_SUBMIT_BTN))
+    fireEvent.click(SafeDom.getByTestId(ADD_OWNER_SUBMIT_BTN_TESTID))
     await sleep(1000)
 
     // check if owner was added
-    const newOwnerRow = SafeDom.getAllByTestId(OWNERS_ROW_TESTID)[1]
+    ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TESTID)
-
+    expect(ownerRows.length).toBe(2)
-    expect(newOwnerRow).toHaveTextContent(NEW_OWNER_NAME)
+    expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1')
-    expect(newOwnerRow).toHaveTextContent(NEW_OWNER_ADDRESS)
+    expect(ownerRows[1]).toHaveTextContent(`${NEW_OWNER_NAME}${NEW_OWNER_ADDRESS}`)
   })
 
-  it('Replaces a owner', async () => {})
+  it('Replaces an owner', async () => {
+    const NEW_OWNER_NAME = 'I replaced an old owner'
+    const NEW_OWNER_ADDRESS = '0x1dF62f291b2E969fB0849d99D9Ce41e2F137006e'
+
+    const twoOwnersSafeAddress = await aMinedSafe(store, 2)
+
+    const SafeDom = renderSafeView(store, twoOwnersSafeAddress)
+    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_TESTID)
+    fireEvent.click(ownersSettingsBtn)
+    await sleep(200)
+
+    // check if there are 2 owners
+    let ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TESTID)
+    expect(ownerRows.length).toBe(2)
+    expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1')
+    expect(ownerRows[1]).toHaveTextContent('Adol 2 Eth Account0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0')
+
+    // click replace owner btn which opens the modal
+    const replaceOwnerBtn = SafeDom.getAllByTestId(REPLACE_OWNER_BTN_TESTID)[1]
+    fireEvent.click(replaceOwnerBtn)
+
+    // fill and travel add owner modal
+    const ownerNameInput = SafeDom.getByTestId(REPLACE_OWNER_NAME_INPUT_TESTID)
+    const ownerAddressInput = SafeDom.getByTestId(REPLACE_OWNER_ADDRESS_INPUT_TESTID)
+    const nextBtn = SafeDom.getByTestId(REPLACE_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)
+
+    const replaceSubmitBtn = SafeDom.getByTestId(REPLACE_OWNER_SUBMIT_BTN_TESTID)
+    fireEvent.click(replaceSubmitBtn)
+    await sleep(1000)
+
+    // check if the owner was replaced
+    ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TESTID)
+    expect(ownerRows.length).toBe(2)
+    expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1')
+    expect(ownerRows[1]).toHaveTextContent(`${NEW_OWNER_NAME}${NEW_OWNER_ADDRESS}`)
+  })
 })