Tests: Add Remove owner tests

cypress.config.js

@@ -12,6 +12,8 @@ export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:3000',
     testIsolation: false,
+    hideXHR: true,
+    defaultCommandTimeout: 10000,
   },
 
   chromeWebSecurity: false,

cypress/e2e/pages/create_wallet.pages.js

@@ -19,8 +19,9 @@ export function typeWalletName(name) {
 }
 
 export function selectNetwork(network, regex = false) {
-  cy.get(selectNetworkBtn).click()
-  cy.contains(network).click()
+  cy.wait(1000)
+  cy.get(selectNetworkBtn).should('exist').click()
+  cy.get('li').contains(network).click()
 
   if (regex) {
     regex = constants.networks.goerli

cypress/e2e/pages/owners.pages.js

@@ -3,6 +3,7 @@ import * as main from '../pages/main.page'
 
 const copyToClipboardBtn = 'button[aria-label="Copy to clipboard"]'
 const tooltipLabel = (label) => `span[aria-label="${label}"]`
+const removeOwnerBtn = 'button[aria-label="Remove owner"]'
 const replaceOwnerBtn = 'button[aria-label="Replace owner"]'
 const addOwnerBtn = 'span[data-track="settings: Add owner"]'
 const tooltip = 'div[role="tooltip"]'
@@ -14,6 +15,8 @@ const newOwnerNonceInput = 'input[name="nonce"]'
 const thresholdInput = 'input[name="threshold"]'
 const thresHoldDropDownIcon = 'svg[data-testid="ArrowDropDownIcon"]'
 const thresholdList = 'ul[role="listbox"]'
+const thresholdDropdown = 'div[aria-haspopup="listbox"]'
+const thresholdOption = 'li[role="option"]'
 
 const disconnectBtnStr = 'Disconnect'
 const notConnectedStatus = 'Connect'
@@ -22,11 +25,49 @@ const max50charsLimitStr = 'Maximum 50 symbols'
 const nextBtnStr = 'Next'
 const executeBtnStr = 'Execute'
 const backbtnStr = 'Back'
+const removeOwnerStr = 'Remove owner'
+const selectedOwnerStr = 'Selected owner'
+const addNewOwnerStr = 'Add new owner'
 
 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 verifyOwnerDeletionWindowDisplayed() {
+  cy.get('div').contains(constants.transactionStatus.confirm).should('exist')
+  cy.get('button').contains(backbtnStr).should('exist')
+  cy.get('p').contains(selectedOwnerStr)
+}
+
+function clickOnThresholdDropdown() {
+  cy.get(thresholdDropdown).eq(1).click()
+}
+
+function getThresholdOptions() {
+  return cy.get('ul').find(thresholdOption)
+}
+
+export function verifyThresholdLimit(startValue, endValue) {
+  cy.get('p').contains(`out of ${endValue} owner(s)`)
+  clickOnThresholdDropdown()
+  getThresholdOptions().should('have.length', 1)
+  getThresholdOptions().eq(0).should('have.text', startValue)
+}
+
+export function verifyRemoveBtnIsEnabled() {
+  return cy.get(removeOwnerBtn).should('exist')
+}
+
+export function hoverOverDeleteOwnerBtn(index) {
+  cy.get(removeOwnerBtn).eq(index).trigger('mouseover', { force: true })
+}
+
+export function openRemoveOwnerWindow(btn) {
+  cy.get(removeOwnerBtn).eq(btn).click({ force: true })
+  cy.get(copyToClipboardBtn).parent().eq(2).find('span').contains('0x').should('be.visible')
+  cy.get('div').contains(removeOwnerStr).should('exist')
+}
+
 export function openReplaceOwnerWindow() {
   cy.get(replaceOwnerBtn).click({ force: true })
   cy.get(newOwnerName).should('be.visible')
@@ -71,7 +112,8 @@ export function waitForConnectionStatus() {
 }
 
 export function openAddOwnerWindow() {
-  cy.get(addOwnerBtn).click()
+  cy.get('span').contains(addNewOwnerStr).click()
+  cy.wait(1000)
   cy.get(newOwnerName).should('be.visible')
   cy.get(newOwnerAddress).should('be.visible')
 }

cypress/e2e/smoke/remove_owner.cy.js

@@ -0,0 +1,54 @@
+import * as constants from '../../support/constants'
+import * as main from '../../e2e/pages/main.page'
+import * as owner from '../pages/owners.pages'
+
+describe('Remove an owner tests', () => {
+  beforeEach(() => {
+    cy.visit(constants.setupUrl + constants.SEPOLIA_TEST_SAFE_1)
+    cy.clearLocalStorage()
+    main.acceptCookies()
+    cy.contains(owner.safeAccountNonceStr, { timeout: 10000 })
+  })
+
+  it('Verify that "Remove" icon is visible', () => {
+    cy.visit(constants.setupUrl + constants.SEPOLIA_TEST_SAFE_3)
+    owner.verifyRemoveBtnIsEnabled().should('have.length', 2)
+  })
+
+  it('Verify Tooltip displays correct message for Non-Owner', () => {
+    cy.visit(constants.setupUrl + constants.SEPOLIA_TEST_SAFE_4)
+    owner.waitForConnectionStatus()
+    owner.hoverOverDeleteOwnerBtn(0)
+    owner.verifyTooltipLabel(owner.nonOwnerErrorMsg)
+  })
+
+  it('Verify Tooltip displays correct message for disconnected user', () => {
+    cy.visit(constants.setupUrl + constants.SEPOLIA_TEST_SAFE_3)
+    owner.waitForConnectionStatus()
+    owner.clickOnWalletExpandMoreIcon()
+    owner.clickOnDisconnectBtn()
+    owner.hoverOverDeleteOwnerBtn(0)
+    owner.verifyTooltipLabel(owner.disconnectedUserErrorMsg)
+  })
+
+  it('Verify owner removal form can be opened', () => {
+    cy.visit(constants.setupUrl + constants.SEPOLIA_TEST_SAFE_3)
+    owner.waitForConnectionStatus()
+    owner.openRemoveOwnerWindow(1)
+  })
+
+  it('Verify threshold input displays the upper limit as the current safe number of owners minus one', () => {
+    cy.visit(constants.setupUrl + constants.SEPOLIA_TEST_SAFE_3)
+    owner.waitForConnectionStatus()
+    owner.openRemoveOwnerWindow(1)
+    owner.verifyThresholdLimit(1, 1)
+  })
+
+  it('Verify owner deletion confirmation is displayed ', () => {
+    cy.visit(constants.setupUrl + constants.SEPOLIA_TEST_SAFE_3)
+    owner.waitForConnectionStatus()
+    owner.openRemoveOwnerWindow(1)
+    owner.clickOnNextBtn()
+    owner.verifyOwnerDeletionWindowDisplayed()
+  })
+})

cypress/support/constants.js

@@ -4,6 +4,8 @@ export const GOERLI_TEST_SAFE = 'gor:0x97d314157727D517A706B5D08507A1f9B44AaaE9'
 export const SEPOLIA_TEST_SAFE_1 = 'sep:0xBb26E3717172d5000F87DeFd391994f789D80aEB'
 // SEPOLIA_TEST_SAFE_2 Has no transactions, 1 owner, using for verificatons only
 export const SEPOLIA_TEST_SAFE_2 = 'sep:0x33C4AA5729D91FfB3B87AEf8a324bb6304Fb905c'
+export const SEPOLIA_TEST_SAFE_3 = 'sep:0x6E834E9D04ad6b26e1525dE1a37BFd9b215f40B7'
+export const SEPOLIA_TEST_SAFE_4 = 'sep:0x03042B890b99552b60A073F808100517fb148F60'
 export const GNO_TEST_SAFE = 'gno:0xB8d760a90a5ed54D3c2b3EFC231277e99188642A'
 export const PAGINATION_TEST_SAFE = 'gor:0x850493a15914aAC05a821A3FAb973b4598889A7b'
 export const TEST_SAFE = 'gor:0x04f8b1EA3cBB315b87ced0E32deb5a43cC151a91'

cypress/support/e2e.js

@@ -26,6 +26,18 @@ import './safe-apps-commands'
   which displays the terms banner even though it shouldn't so we need to globally hide it in our tests.
  */
 before(() => {
+  cy.on('log:added', (ev) => {
+    if (Cypress.config('hideXHR')) {
+      const app = window.top
+      if (app && !app.document.head.querySelector('[data-hide-command-log-request]')) {
+        const style = app.document.createElement('style')
+        style.innerHTML = '.command-name-request, .command-name-xhr { display: none }'
+        style.setAttribute('data-hide-command-log-request', '')
+        app.document.head.appendChild(style)
+      }
+    }
+  })
+
   cy.on('window:before:load', (window) => {
     window.localStorage.setItem('SAFE_v2__show_terms', false)
     // So that tests that rely on this feature don't randomly fail