Tests: add Add Owner cypress tests (#2572)

* Create Sepolia wallets, add more "Add owner" tests, fix flaky cookie acceptance

* Fix signing off issue

cypress/e2e/pages/address_book.page.js

@@ -50,7 +50,7 @@ export function clickOnCreateEntryBtn() {
   cy.contains(createEntryBtn).click()
 }
 
-export function tyeInName(name) {
+export function typeInName(name) {
   cy.get(nameInput).type(name)
 }
 

cypress/e2e/pages/main.page.js

@@ -3,9 +3,18 @@ import * as constants from '../../support/constants'
 const acceptSelection = 'Accept selection'
 
 export function acceptCookies() {
-  cy.contains(acceptSelection).click()
-  cy.contains(acceptSelection).should('not.exist')
-  cy.wait(500)
+  cy.wait(1000)
+  cy.get('button')
+    .contains(acceptSelection)
+    .should(() => {})
+    .then(($button) => {
+      if (!$button.length) {
+        return
+      }
+      cy.wrap($button).click()
+      cy.contains(acceptSelection).should('not.exist')
+      cy.wait(500)
+    })
 }
 
 export function verifyGoerliWalletHeader() {
@@ -25,3 +34,22 @@ export function checkTextsExistWithinElement(element, texts) {
 export function verifyCheckboxeState(element, index, state) {
   cy.get(element).eq(index).should(state)
 }
+
+export function verifyInputValue(selector, value) {
+  cy.get(selector)
+    .invoke('val')
+    .should(($value) => {
+      console.log($value)
+    })
+}
+
+export function generateRandomString(length) {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZz0123456789'
+  let result = ''
+
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length))
+  }
+
+  return result
+}

cypress/e2e/pages/owners.pages.js

@@ -0,0 +1,98 @@
+import * as constants from '../../support/constants'
+import * as main from '../pages/main.page'
+
+const addOwnerBtn = 'span[data-track="settings: Add owner"]'
+const tooltip = 'div[role="tooltip"]'
+const expandMoreIcon = 'svg[data-testid="ExpandMoreIcon"]'
+const sentinelStart = 'div[data-testid="sentinelStart"]'
+const newOwnerName = 'input[name="newOwner.name"]'
+const newOwnerAddress = 'input[name="newOwner.address"]'
+const newOwnerNonceInput = 'input[name="nonce"]'
+const thresholdInput = 'input[name="threshold"]'
+const thresHoldDropDownIcon = 'svg[data-testid="ArrowDropDownIcon"]'
+const thresholdList = 'ul[role="listbox"]'
+
+const disconnectBtnStr = 'Disconnect'
+const notConnectedStatus = 'Connect'
+const e2eWalletStr = 'E2E Wallet'
+const max50charsLimitStr = 'Maximum 50 symbols'
+const nextBtnStr = 'Next'
+
+export const safeAccountNonceStr = 'Safe Account nonce'
+export const nonOwnerErrorMsg = 'Your connected wallet is not an owner of this Safe Account'
+export const disconnectedUserErrorMsg = 'Please connect your wallet'
+
+export function verifyAddOwnerBtnIsEnabled() {
+  cy.get(addOwnerBtn).should('exist').and('not.be.disabled')
+}
+
+export function hoverOverAddOwnerBtn() {
+  cy.get(addOwnerBtn).trigger('mouseover')
+}
+
+export function verifyTooltiptext(text) {
+  cy.get(tooltip).should('have.text', text)
+}
+
+export function clickOnWalletExpandMoreIcon() {
+  cy.get(expandMoreIcon).eq(0).click()
+  cy.get(sentinelStart).next().should('be.visible')
+}
+
+export function clickOnDisconnectBtn() {
+  cy.get('button').contains(disconnectBtnStr).click()
+  cy.get('button').contains(notConnectedStatus)
+}
+
+export function waitForConnectionStatus() {
+  cy.get('div').contains(e2eWalletStr)
+}
+
+export function openAddOwnerWindow() {
+  cy.get(addOwnerBtn).click()
+  cy.get(newOwnerName).should('be.visible')
+  cy.get(newOwnerAddress).should('be.visible')
+}
+
+export function verifyNonceInputValue(value) {
+  cy.get(newOwnerNonceInput).should('not.be.disabled')
+  main.verifyInputValue(newOwnerNonceInput, value)
+}
+
+export function verifyErrorMsgInvalidAddress(errorMsg) {
+  cy.get('label').contains(errorMsg).should('be.visible')
+}
+
+export function typeOwnerAddress(address) {
+  cy.get(newOwnerAddress).clear().type(address)
+  main.verifyInputValue(newOwnerAddress, address)
+  cy.wait(1000)
+}
+
+export function typeOwnerName(name) {
+  cy.get(newOwnerName).clear().type(name)
+  main.verifyInputValue(newOwnerName, name)
+}
+
+export function selectNewOwner(name) {
+  cy.contains(name).click()
+}
+
+export function verifyNewOwnerName(name) {
+  cy.get(newOwnerName).should('have.attr', 'placeholder', name)
+}
+
+export function clickOnNextBtn() {
+  cy.get('button').contains(nextBtnStr).click()
+}
+
+export function verifyConfirmTransactionWindowDisplayed() {
+  cy.get('div').contains(constants.transactionStatus.confirm).should('exist')
+}
+
+export function verifyThreshold(startValue, endValue) {
+  main.verifyInputValue(thresholdInput, startValue)
+  cy.get('p').contains(`out of ${endValue} owner(s)`).should('be.visible')
+  cy.get(thresholdInput).parent().click()
+  cy.get(thresholdList).contains(endValue).should('be.visible')
+}

cypress/e2e/smoke/add_owner.cy.js

@@ -0,0 +1,111 @@
+import * as constants from '../../support/constants'
+import * as main from '../../e2e/pages/main.page'
+import * as owner from '../pages/owners.pages'
+import * as addressBook from '../pages/address_book.page'
+
+// TODO: Need to add tests to testRail
+describe('Adding an owner', () => {
+  beforeEach(() => {
+    cy.visit(constants.setupUrl + constants.SEPOLIA_TEST_SAFE_1)
+    cy.clearLocalStorage()
+    main.acceptCookies()
+    cy.contains(owner.safeAccountNonceStr, { timeout: 10000 })
+  })
+
+  describe('Add new owner tests', () => {
+    it('Verify the presence of "Add Owner" button', () => {
+      owner.verifyAddOwnerBtnIsEnabled()
+    })
+
+    it('Verify “Add new owner” button tooltip displays correct message for Non-Owner', () => {
+      cy.visit(constants.setupUrl + constants.SEPOLIA_TEST_SAFE_2)
+      owner.hoverOverAddOwnerBtn()
+      owner.verifyTooltiptext(owner.nonOwnerErrorMsg)
+    })
+
+    it('Verify Tooltip displays correct message for disconnected user', () => {
+      owner.waitForConnectionStatus()
+      owner.clickOnWalletExpandMoreIcon()
+      owner.clickOnDisconnectBtn()
+      owner.hoverOverAddOwnerBtn()
+      owner.verifyTooltiptext(owner.disconnectedUserErrorMsg)
+    })
+    it('Verify the Add New Owner Form can be opened', () => {
+      owner.waitForConnectionStatus()
+      owner.openAddOwnerWindow()
+    })
+
+    it('Verify error message displayed if character limit is exceeded in Name input', () => {
+      owner.waitForConnectionStatus()
+      owner.openAddOwnerWindow()
+      owner.typeOwnerName(main.generateRandomString(51))
+      owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.exceedChars)
+    })
+
+    it('Verify that the "Name" field is auto-filled with the relevant name from Address Book', () => {
+      cy.visit(constants.addressBookUrl + constants.SEPOLIA_TEST_SAFE_1)
+      addressBook.clickOnCreateEntryBtn()
+      addressBook.typeInName(constants.addresBookContacts.user1.name)
+      addressBook.typeInAddress(constants.addresBookContacts.user1.address)
+      addressBook.clickOnSaveEntryBtn()
+      addressBook.verifyNewEntryAdded(
+        constants.addresBookContacts.user1.name,
+        constants.addresBookContacts.user1.address,
+      )
+      cy.visit(constants.setupUrl + constants.SEPOLIA_TEST_SAFE_1)
+      owner.waitForConnectionStatus()
+      owner.openAddOwnerWindow()
+      owner.typeOwnerAddress(constants.addresBookContacts.user1.address)
+      owner.selectNewOwner(constants.addresBookContacts.user1.name)
+      owner.verifyNewOwnerName(constants.addresBookContacts.user1.name)
+    })
+
+    it('Verify that Name field not mandatory', () => {
+      owner.waitForConnectionStatus()
+      owner.openAddOwnerWindow()
+      owner.typeOwnerAddress(constants.SEPOLIA_OWNER_2)
+      owner.clickOnNextBtn()
+      owner.verifyConfirmTransactionWindowDisplayed()
+    })
+
+    it('Verify relevant error messages are displayed in Address input ', () => {
+      owner.waitForConnectionStatus()
+      owner.openAddOwnerWindow()
+      owner.typeOwnerAddress(main.generateRandomString(10))
+      owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.invalidFormat)
+
+      owner.typeOwnerAddress(constants.addresBookContacts.user1.address.toUpperCase())
+      owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.invalidChecksum)
+
+      owner.typeOwnerAddress(constants.SEPOLIA_TEST_SAFE_1)
+      owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.ownSafe)
+
+      owner.typeOwnerAddress(constants.addresBookContacts.user1.address.replace('F', 'f'))
+      owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.invalidChecksum)
+
+      owner.typeOwnerAddress(constants.DEFAULT_OWNER_ADDRESS)
+      owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.alreadyAdded)
+    })
+
+    it('Verify default threshold value. Verify correct threshold calculation', () => {
+      owner.waitForConnectionStatus()
+      owner.openAddOwnerWindow()
+      owner.typeOwnerAddress(constants.DEFAULT_OWNER_ADDRESS)
+      owner.verifyThreshold(1, 2)
+    })
+
+    it('Verify valid Address validation', () => {
+      owner.waitForConnectionStatus()
+      owner.openAddOwnerWindow()
+      owner.typeOwnerAddress(constants.SEPOLIA_OWNER_2)
+      owner.clickOnNextBtn()
+      owner.verifyConfirmTransactionWindowDisplayed()
+      cy.reload()
+      owner.waitForConnectionStatus()
+      owner.openAddOwnerWindow()
+      owner.typeOwnerAddress(constants.SEPOLIA_TEST_SAFE_2)
+      owner.clickOnNextBtn()
+      owner.verifyConfirmTransactionWindowDisplayed()
+    })
+  })
+})

cypress/e2e/smoke/address_book.cy.js

@@ -18,7 +18,7 @@ describe('Address book tests', () => {
   describe('should add remove and edit entries in the address book', () => {
     it('should add an entry', () => {
       addressBook.clickOnCreateEntryBtn()
-      addressBook.tyeInName(NAME)
+      addressBook.typeInName(NAME)
       addressBook.typeInAddress(constants.RECIPIENT_ADDRESS)
       addressBook.clickOnSaveEntryBtn()
       addressBook.verifyNewEntryAdded(NAME, constants.RECIPIENT_ADDRESS)